A Technical Guide to Cloud-Based Web Prototype Deployment

Cloud computing has transmuted the way we develop and deploy software, offering scalability, flexibility, and cost-effectiveness. In this article, I will guide you through the process of provisioning a server on a cloud platform and setting up a simple landing page.

What you will learn:
In this article, you will learn how to:

• Provision a server and install a Linux distribution of your choice on a cloud platform (AWS)

• Set up a web server (Apache or Nginx) to serve web content.

• Deploy a simple HTML page.

• Configure networking to allow HTTP traffic.

• Optionally, configure HTTPS for secure communication.

Let's get started

Provisioning a server and installing a Linux distribution

1. First, go to the AWS website (https://aws.amazon.com/) and log in to your AWS account. If you don't have an account, you'll need to create one.

• Once logged in, you'll see the AWS Management Console. In the search bar at the top, type "EC2" and select the "EC2" service.

• On the EC2 dashboard, click the launch Instances button. This starts the instance launch wizard.

2.Choose an Amazon Machine Image (AMI).

• An AMI is a template that contains the operating system and software configuration for your server.

• Choose your preferred Linux distribution; let's use Ubuntu.

3.Choose an Instance Type: The instance type determines the hardware resources allocated to your server (CPU, memory, storage).

• For testing and simple web prototypes, the t2.micro instance type is often sufficient and eligible for the AWS Free Tier (if you're eligible). Select t2.micro or another instance type that meets your needs.

4.Configure your instance details

• Number of instances: Set this to 1 for this exercise.

• Subnet: Select a subnet within your VPC. If you're using the default VPC, choose a public subnet.

• Auto-assign Public IP: Make sure this is enabled. This will give your instance a public IP address so you can access it from the internet.

• Leave other settings at their defaults unless you have specific requirements.

5.Add Storage

• You can accept the default storage settings or customize the size and type of storage for your instance. For a simple web prototype, the default is usually sufficient.

6.Add Tags (Recommended)

• Tags are key-value pairs that help you organize and manage your AWS resources. Add a tag like Name=MyWebAppServer to easily identify your instance later.

7.Configure Security Group

• A security group acts as a virtual firewall for your instance, controlling inbound and outbound traffic.

• Create a new security group or select an existing one.

• Add the following inbound rules:

• Type: SSH, Port Range: 22, Source: My IP (This is the most secure option. It allows SSH access only from your current IP address. If you need to access from other locations, you can specify a wider IP range or 0.0.0.0/0(less secure, allows access from any IP address).

• Type: HTTP, Port Range: 80, Source: 0.0.0.0/0(This allows HTTP traffic from any IP address, making your website publicly accessible).

8.Select or Create a Key Pair

• A key pair is used to securely connect to your instance via SSH.

• If you don't have one, create a new key pair.

• Give it a name (eg. mike.pem).

• Download the .pemfile. This is extremely important. Store this file in a secure location. You will need it to connect to your instance.

9.Connect to Your Instance

• After launching the instance, you'll be taken to the EC2 Instances dashboard. It might take a few minutes for the instance to start.

• Select your instance and copy its Public IPv4 address.

• Open a terminal or SSH client (like PuTTY on Windows, or the built-in terminal on macOS/Linux). We will use our Linux terminal.

• Use the following command:
  

ssh -i /path/to/your/key.pem ubuntu@[your_instance_public_ip]

For example:

ssh -i ~/Downloads/mike.pem ubuntu@54.123.45.67

Congratulations! You have now provisioned a server on AWS. You should be connected to your Ubuntu instance via SSH.

Set up a web server

We will use Apache in this instance. To install Apache, we first need to update our packages. Input this command:

sudo apt update

Then install Apache:

sudo apt install apache2 -y

Congratulations! You have set up your web server.

Deploy a simple HTML page

To deploy our html page, we can create one on our terminal using this command:

sudo nano/var/www/html/index.html

This command takes you to an html page already on Apache, you just have to format the template to your taste and save it. Type ctrl+oto save your html content. Hit ctrl+xto exit.

Configure networking to allow HTTP traffic

We did this during our creation of the security group for our ec2 instance. You can check to make sure it has been properly configured.

• Navigate to ec2 on your AWS management console.

• In the left-hand navigation pane, under Network & Security, click on
  Security Groups.

• Find the security group that you associated with your EC2 instance when
  you launched it. Select the security group.

• Click on the Inbound rules tab.

• Click the Edit inbound rules button.

• Click Add rule.

• Type: Select HTTP.

• Port Range: This will automatically be set to 80(the standard port
  for HTTP).

• Source: This determines which IP addresses can access your instance on
  port 80. Choose 0.0.0.0/0. Suitable for this exercise.

Configure HTTPS

• For HTTPS to work correctly, you need to allow traffic from all sources 0.0.0.0/0 on port 443 in your security group. The actual encryption is handled by the SSL/TLS certificate and your web server software.

• Click save rules.

• To test if your prototype works, copy the public IP address of your instance. Paste it in any browser. You should see your site display.

• To install an SSL certificate, you need a domain name for your site. Choose any free domain site of your choice or a paid one for a more customized domain and point it to your instance public address.

• Once this is done, input this commands to install the SSL certificate:
  

sudo apt update
sudo apt install certbot python3-certbot-apache -y
sudo certbot --apache -d <domain or url>

Congratulations!You just enabled HTTPS and installed an SSL certificate.

Conclusion

With your web prototype now live in the cloud, you have a solid foundation for further development and iteration. This process provides a rapid and cost-effective way to bring your web application ideas to life.