DEV Community

Cover image for Learn How to: “Add Files to the index.html File from S3 Bucket Storage and Run It on the Browser via Termius on an EC2 Instance”
Kiran Amin Panjwani for AWS Cloud Clubs

Posted on

Learn How to: “Add Files to the index.html File from S3 Bucket Storage and Run It on the Browser via Termius on an EC2 Instance”

Welcome to this comprehensive guide on adding files to the index.html file from a S3 bucket and running them on a browser using Termius via an EC2 instance. In this blog, we'll walk you through the steps to harness AWS services for web development and cloud computing.

What We Will Learn and Why It Matters:
You will learn how to use S3 for file storage, launch EC2 instances to host your web applications, and manage your instances with Termius. This knowledge is essential for web developers and cloud enthusiasts looking to securely and efficiently deploy their applications in the cloud. By the end of this tutorial, you'll have a functional web application accessible via a public IP address and ready to be explored by users worldwide.

Step-by-Step Guide:

1. Open the EC2 Instance:
Access your EC2 instance in the AWS Management Console and copy the "Public IPv4 address" for later use. For example: "3.0.184.216".

Access

2. Configure Security Group:
Scroll down and navigate to the "Security" tab. Open the "Security groups" link, click the "Edit inbound rules" button, and add a new inbound rule for port 8081. Save the rules for later use.

security

rules

3. Connect via Termius:
Click the "Connect" button mentioned on top of the instance details.

termius

You can choose either the "EC2 instance Connect" tab or create a new Host on Termius.

4. Create a Termius Host:
Open Termius, press "New HOST," and provide a meaningful label (such as "demoinstance"). Enter the EC2 instance's Public IPv4 address, set the username as "ubuntu," and import the key pair file.

termius

ubuntu

5. Start the Host:
Start the host by clicking the icon on the top-right corner of the panel.

host

Now you are ready to proceed with adding an image to the index.html file from S3 and running the index.html file on the browser using the EC2 instance.

[Instructions to Add Files to the index.html File and Run It on the Browser]

Execute the following commands after opening the host:

  1. Update Package Information: sudo apt update
  2. Install Apache Web Server: sudo apt install apache2
  3. Open Apache Port Configuration File: sudo nano /etc/apache2/ports.conf
  4. Change Working Directory: cd /var/www/html
  5. List Files in the Directory: ls
  6. Remove Existing index.html File (if any): sudo rm index.html
  7. Create a New index.html File: sudo nano index.html
  8. Write your HTML code inside the file and include the "Object URL" link of the file you uploaded to your S3 bucket. Save the file and exit the text editor. Example: Link the file
  9. Edit Apache Port Configuration: sudo nano /etc/apache2/ports.conf Edit the port number next to "Listen" in the file. For example: "8081". Save the file. 8081
  10. Edit Apache Default Virtual Host Configuration: sudo nano /etc/apache2/sites-enabled/000-default.conf Edit the port number next to "VirtualHost" in the file. For example: "8081". Save the file. type
  11. Restart Apache Server: sudo service apache2 restart
  12. Open Your Browser and Navigate to your EC2 Instance: Open your browser and click your instance's "Public IPv4 address". You will be redirected to a new tab.
  13. Edit URL: Add ":your port number" at the end of your URL and remove the "s" from "https" in the URL. For example, if your Public IPv4 address is "3.0.184.216" and your port number is "8081," the URL will look like this: "http://3.0.184.216:8081/". browser

Congratulations! You have successfully added files to the index.html file from S3 and run your web application on a browser using an EC2 instance via Termius. This accomplishment marks the beginning of your exciting journey into the world of AWS, web development, and cloud computing. Now, you have the tools to deploy and manage your applications with confidence.

Feel free to explore more AWS services and further enhance your web projects.

Happy coding!

Reference Links:

Previous Blogs:

Getting Started with AWS S3: Create Your First Bucket and Upload a File

Getting Started with AWS EC2: Create Your First EC2 Linux Instance

Download Termius:
https://www.termius.com/

Top comments (0)