DEV Community

Alex Qu
Alex Qu

Posted on

Beginner’s Guide: Launching Your First AWS Website — Step by Step or with AI in Minutes

#aws #webdev #ai #cloudcomputing

In this tutorial, we'll show you how to set up a working website on AWS. Normally, this means spinning up an EC2 instance, configuring a VPC, subnets, route tables, gateways, security groups, installing Nginx, and finally serving a "Hello World" page. It's a lot of moving parts - and one wrong click can break the setup.

That's why we built an AI agent to do it all for you. Instead of spending hours juggling AWS settings, you can launch a website in a complete, production-ready environment in under three minutes - no prior AWS experience required. Scroll down to "A faster way". Try it now.

If you'd still like to understand how AWS works under the hood, keep reading - we'll walk you through the manual process step by step.

Prerequisite: Permissions

Log into you AWS account and select the region where you want to create AWS resources. You'll need permissions to create and manage VPC and EC2 resources.

  • If you're using an IAM user or role, make sure you have either AmazonVPCFullAccess and AmazonEC2FullAccess or equivalent permissions.
  • If you're signing in with the root account, these permissions are already included by default - but keep in mind that AWS recommends creating an admin user instead of using root for day-to-day work.

Part 1: Set up networking (VPC)

AWS EC2 resources live inside a VPC (Virtual Private Cloud), which is a logically isolated virtual network. AWS provides a "default VPC" out of the box, but in this guide we'll follow best practices and create our own custom VPC.

Step 1: Create a VPC

  1. Search and navigate to VPC service in the AWS Management Console.
  2. Click Create VPC.
  3. Select VPC only.
  4. Give it a name, e.g. app-vpc
  5. Set the IPv4 CIDR block to 10.0.0.0/16 (a private network range).
  6. Leave other settings as default and click Create VPC.

Step 2: Create subnets

  1. In VPC dashboard page, from the left menu, click Subnets → Create subnet.
  2. Choose your VPC (app-vpc).
  3. Give it a name: public-subnet-01.
  4. Pick an Availability Zone, or you can leave it to No preference.
  5. IPv4 CIDR block: 10.0.1.0/24. (The private IP segment for the subnet)
  6. Click Create subnet.

Now we have one public subnet.

Step 3: Create an Internet Gateway

  1. In VPC dashboard page, from the left menu, click Internet Gateways → Create internet gateway.
  2. Give it a name app-igw.
  3. Click Create internet gateway, then Actions → Attach to VPC.
  4. Attach it to app-vpc.

Step 4: Set up a Route Table

A route table tells the subnet how traffic flows.

  1. In VPC dashboard page, from the left menu, click Route Tables → Create route table.
  2. Give it a name: app-public-rtb.
  3. Choose the VPC: app-vpc.
  4. Click on “Create route table”.

5.Under Routes section→ Edit routes → Add route.

  • Destination: 0.0.0.0/0
  • Target: Internet Gateway (app-igw).

6.Save changes.

7.Under "Subnet associations" section → Edit subnet associations

  • Check the box of "public-subnet-01"
  • Save associations

Step 5: Enable auto-assign public IP

Our to-be-created EC2 instance will need to have a public IP.

  1. In VPC dashboard page, from the left menu, go to Subnets → click "public-subnet-01".
  2. Click Actions → Edit subnet settings.
  3. Check Enable auto-assign public IPv4 address.
  4. Click “Save” in the bottom right corner.

Now, we have a VPC with a subnet where we can host EC2 instances that connect to the internet.

Part 2: Launch your EC2 instance

  1. Search and navigate to EC2 service in the AWS Management Console. Click Launch instance.
  2. Give it a name: nginx-app (just an example).
  3. For Application and OS Images, choose the AMI: Amazon Linux 2023 Kernel-6.1 AMI (It should be the first option of the list, and free tier eligible).

4.Instance type: t2.micro (it should be the first option of the list, and free tier eligible).

5.Key pair (if you already have an SSH key pair in the region and know how to use it, select your key for the drop down menu, and skip this step.)

  • Click Create new key pair
  • Give it a name app-keypair
  • Leave everything else as default, and Create Key pair
  • Find the path of .pem file, for mac, it's commonly in Downloads folder.
  • Open a terminal, and then move the key file to .ssh directory mv ~/Downloads/app-keypair.pem ~/.ssh/app-keypair.pem
  • Secure the permission of the key file chmod 400 ~/.ssh/app-keypair.pem

6.Network settings. Click Edit.

  • Choose our newly created VPC: app-vpc
  • Subnet: public-subnet-01
  • Leave it as Auto-assign public IP: enabled

  • Create security group
  • Give it a name: app-sg
  • Description: "Allow ssh from me and http traffic from anywhere"
  • Allow 22 (SSH) from your IP
  • Add security group rule to allow 80 (HTTP) from anywhere (0.0.0.0/0)

7.Click Launch instance on the right.

Part 3: Create a simple website

Step 1: Connect to the EC2 instance

  1. In EC2 dashboard, from the left, go to Instances → check the box of nginx-app
  2. Look for Public IPv4 address in Details
  3. From your local terminal, run ssh -i ~/.ssh/app-keypair.pem ec2-user@<the public ip from step 2>, and type "yes".

Now you are connected to the EC2 instance, a linux machine.

Step 2: Install and run Nginx

1.Once you are connected to the EC2 instance, run the following:
sudo dnf update -y 
sudo dnf install -y nginx 
sudo systemctl enable --now nginx

2.Test Nginx by open http:// in a browser, you should be able to see:

3.Replace with a customized html file with the following code:

sudo tee /usr/share/nginx/html/index.html >/dev/null <<'EOF'
<!doctype html>
<html>
  <head><meta charset="utf-8"><title>Hello EC2</title></head>
  <body style="font-family:sans-serif; text-align:center;">
    <h1>Hello World</h1>
    <p>This is my first website!</p>
    <img src="<https://upload.wikimedia.org/wikipedia/commons/9/9a/Soyuz_TMA-9_launch.jpg>" 
         alt="Rocket" width="200">
  </body>
</html>
EOF
Enter fullscreen mode Exit fullscreen mode

Then run sudo systemctl reload nginx

4.Now you can check your website by opening the http:// again.

Part 4: Clean up

When you're done, don't forget to stop or terminate your EC2 instance to avoid charges. You can also delete the VPC and related resources.

A faster way

This is why we have created the Backend Agent for AWS. It will help you accomplish the same thing in under three minutes (saving 90% of time). You just need to answer a couple questions to describe your goal, the AI agent will then generate a read-to-deploy CloudFormation template and guide you through the one-click service deployment.

Let's see how we will achieve the same with the agent.

1.After logging in, click Next.

2.Choose a region where you want to deploy your resources, and click Next.

3.Select the option "I want to run light-weight tasks on a cloud server.", then click Next.

4.A summary page will show the resources that will be created, along with a cost estimate. You can also make customizations to the services. Review this information before continuing.

5.The agent will now generate a CloudFormation template. A CloudFormation template is a text file written in JSON or YAML format that defines the AWS resources you want to provision and manage as a single unit, known as a "stack." You can edit the script if needed, then click Next.

6.Provide a stack name. Click OK to continue.

7.Click the provided link or copy and paste it into your browser. This will open the CloudFormation Quick Create Stack page in your AWS account (make sure you are already logged in to AWS).

8.On the Quick Create Stack ** page, scroll down and click **Create stack. If prompted to acknowledge that "AWS CloudFormation might create IAM resources with custom names," simply check the box.

9.CloudFormation will now create all required resources (the networking and EC2 setup from Parts 1 and 2 of this tutorial). While it runs, you can return to the Backend Agent to view the "How to Get Started" instructions.

10.Once the CloudFormation stack has finished creating, you're ready to continue with Part 3 of this tutorial to configure Nginx and launch your website. You can review your resources under the CloudFormation Resources tab.

Wrapping Up

In this tutorial, you learned how to build a simple website on AWS from the ground up:

  • Creating the necessary networking infrastructure (VPC, subnets, Internet Gateway, route table, and security group).
  • Launching and configuring an EC2 instance.
  • Installing Nginx and serving a custom web page.

But as you saw, doing everything manually can be time-consuming. That's why we created the AI-powered Backend Agent. With just a few clicks, your can set up your infrastructure, and you can skip directly to configuring your website. You will avoid the complexity, while still having the flexibility to customize.

The Backend Agent for AWS is currently in beta and is free to use. Try out the agent here and don’t hesitate to share your experience with us. We can’t wait to see what you’ll build!

Top comments (0)