Host a site into EC2
Tags: aws, cloudskills, beginners, tutorial
Published: 2022-02-07 13:18:12

With increase in business and startups, setting up large physical servers was becoming very hectic for owners. Using large number of physical servers and implementing various computing techniques to manage them, people were in need of something more flexible and budget friendly. And finally, in around 2006-2008 Amazon Web Services launched the era of Cloud Computing with it's first virtual servers or machines **Amazon Elastic Compute Cloud or EC2 instances**. Since then EC2 has helped perform so many operations and provided uncountable solutions.

In this blog, I have tried to show three of the simple techniques to host a very basic website into your EC2 instance.
For a very simple basic website we have files of CSS,JS,HTML and many more. Here I have chosen a sample website contents from [here.](https://www.free-css.com/free-css-templates/page275/aj)

### Summary of Steps:

- Step 1 : [Launch an EC2 instance](#step1)
- Step 2 : [Install Apache Server](#step2)
- Step 3 : Add the files of website(three ways):
       -             [Directly from your Device](#step31)
       -             [From S3 bucket](#step32)
       -             [From GitHub repository](#step33)

---

#### Step 1 : Choose an EC2 instance , Launch the instance and then SSH into the instance. <a name="step1"><a> 
I have chosen here the Amazon Linux. You can choose any one of your choice. _[You can find the steps to setup your EC2 instance in this amazing tutorial by one of my friend here.](https://dev.to/atm_06/what-is-ec2-instance-and-setup-of-ec2-instances-4abk)_ Only while selecting the Security Group here's what different you have to do:

1. For type **SSH** change **Source** to **MyIP** (This will allow only your IP to SSH into your EC2).
2. Now, add rule and select **HTTP** and for **Source** select **Anywhere**.
3. Again add rule **HTTPS** and for **Source** select **Anywhere**.

*_These are the simplest rules for a beginner, incase you want to have custom and enhanced security, you can always add the allowed custom IPs only_*

#### Step 2 : Install the Apache Server into EC2 <a name="step2"><a>
To host a website into EC2, you will need to install Apache Server into EC2. Here are the Linux commands to install Apache Server into your EC2.

**1. Login as root user:**
Initially when you connect to EC2, you will be logined as ec2-user. Change it to root user. Use these linux commands:
`sudo su` ,then `cd`

**2. Install Apache Server:**
Now, install Apache Server with the command:
`yum install httpd`

**While installing you will get a confirmation message , just type yes for it**. After successfully installation you will get a Complete message.
![Xshell](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wyatyllzpt37i5vl3vn4.PNG)

**3. Start and Enable Apache:**
After installing apache, you have to start the Apache. Here is the command to do so.
`systemctl start httpd`

Now, you need to enable the Apache server to avoid stopping the server when you stop and restart your EC2 instance. Here is the command to do so.
`systemctl enable httpd`
![Xshell2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zsgufngzrop085ngtcxf.PNG)

After all these setup done , now we just need to add our files into EC2. Here are the three simple ways to do so:

#### Step 3 : Add your website files into EC2
##### Way 1 >>> By adding the files directly from your device: <a name="step31"><a>
You can directly copy paste your files from your device into EC2 instance. For this you need to have an application called **WinSCP** . [Here](https://winscp.net/eng/download.php) is the download link for the same.
Now follow the following steps:(Refer the picture below)
1. In the **Host Name** fill the **public IPv4 DNS** of your **EC2 instance**.
2. For the **User Name** enter **ec2-user**
3. Now, click on **Advanced** 

![Public DNS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pn0gx2kwtlgiss4h80ap.PNG)
![WinSCP](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ji148jkfzbz1icqoxj4d.PNG)

4. Now, select the **Authentication** option in the left side menu and **browse your key file** (created while launching the EC2 instance). If your key file is of .pem extension , change the search filter to all files, select the .pem file and it will ask you to convert into a .ppk file. Allow for the same and select the .ppk file.
5. Now click on OK.
![WinSCP2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e9b8vtf0cmcv9mkr6fpf.PNG)

6. Now, click on **Login** , and you will be connected to your EC2 as ec2-user in the right side window.
7. Now, browse the location where your files are present on the window on the left side.
![Locate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c0zun6gq30kc7gug6i71.PNG)
8. Now, create a new directory into ec2-user and drag and drop all your files from the left window to the right into the new directory.
![New directory](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jgloz0rpehlaija2377x.PNG)
![Drag Drop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e8ica8ojusthstksdm0i.gif)

9. Go back to your Xshell and check if the file is present by the command `ls /home/ec2-user/<your-directory>`
10. Now, you have to copy the file into another directory which is the html directory.
You can copy the entire contents of your directory into html directory by command :
`rsync –a /home/ec2-user/<your-directory-name>/. /var/www/html/`

![Xshell](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vu77ha3cokeddslw0tun.PNG)

11. Now copy paste the public IP of the EC2 and hit into the browser and you will be able to see your website.

##### Way 2 >>> By copying the files from your S3 bucket: <a name="step32"><a>

1. First you need to create a S3 bucket and upload your files. [Here is a tutorial by one of my friend on how to create and upload files into S3 bucket.] (https://dev.to/shankarsurya035/what-is-s3-bucket-how-to-mount-a-s3-bucket-in-a-drive-network-drive-3d4f)
2. Now, to access your S3 bucket and contents into EC2 instance you must create an IAM role with S3 full access and attach it to your EC2 instance. [Learn how to create IAM roles here.] (https://dev.to/sulagna206/secure-your-aws-account-2h1f#Roles)

![S3 bucket](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rn3711f6xd5pajaf7csk.PNG)

3. List out the S3 buckets name using command `aws s3 ls`
4. List out the contents of S3 bucket using command 
`aws s3 ls s3://<your-bucket-name>`
5. Go to the html directory using command `cd /var/www/html/`
6. Now copy the contents to html directory using command 
`aws s3 sync s3://<your-bucket-name>/ .` (dot represents current directory)
![S3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c2kkn1270i2gqx8mjtqs.PNG)

7.Now copy paste the public IP of the EC2 and hit into the browser and you will be able to see your website.

##### Way 3 >>> By copying the files from your Github Repo: <a name="step33"><a>
1. First create a GitHub Repository and upload the files in that repository. [Here is a tutorial on the same.](https://handsondataviz.org/create-repo.html)

![My GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/46d1cxugabrxla8svrma.PNG)

2. Now to access GitHub from your EC2 install git. To do so use the command `yum install git -y` in your XShell. Accept any confirmation asked.
![Install git](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ne9qhsjn8idfghh3q9n.PNG)

3. Go to the html directory using command `cd /var/www/html/`
4. Now download all the files of your GitHub repo into the directory using command `git clone git://github.com/<your-account-name>/<your-repo-name> .` (dot represents current directory)
![Git files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8go9zar60lyby9bp8bw7.PNG)

5. Now copy paste the public IP of the EC2 and hit into the browser and you will be able to see your website.

This is how you can view your website:

![View](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c2uwlvdsergjyeosx1yq.gif)

_That's all in this blog. Hope so this has helped you!_