Exposing a port to the Web and port forwarding on EC2

By default a new AWS EC2 instance only exposes port 22 to the Web to enable accessing the new EC2 instance via ssh. Often it's helpful to open other ports to the Web so that you can access them via a browser. This tutorial shows 2 different ways of exposing ports on AWS EC2 instances.

Additionally if you're not interested in exposing a port to the Web but would still like to access it via your browser you can use port forwarding in VS Code which is covered in the final section below.

Exposing a port to the Web on an AWS instance

When launching a new EC2 instance, fill out the following items

Name and tags: give your instance a unique name. ex: nodejs-front-end
OS image: I prefer Ubuntu LTS
Instance type: t3.large for prod. t2.micro for quickly testing
Key pair (login): select your keypair for ssh
Configure storage: 1000GB for prod. 8GB for testing

Network Settings

You can easily expose port 443 for HTTPS traffic and port 80 for HTTP traffic to your node by selecting the "Allow HTTPS traffic from the internet" and "Allow HTTPS traffic from the internet" boxes respectively under "Network Settings."

First Way

To open up a custom port there are two options. You can create a new security group via the "Create security group" option. Alternatively you can use "Select existing security group."

When using the "Create security group" option, during the process of launching a new EC2 instance "Edit" Network Settings and click "Add security group rule."

Type: Custom TCP
Source type: Anywhere
Port range: Enter a specifc port (or range). Ex: 3000 (to open port 3000) to the Web
Description: optional

Now click "Launch instance", get the IP address and add it to ~/.ssh/config.

# aws-ec2-instance-name
Host ip.address
  HostName ip.address
  User username
  IdentityFile path/to/keypair.pem

For example

# nodejs-front-end
Host 12.345.67.890
  HostName 12.345.67.890
  User ubuntu
  IdentityFile ~/.ssh/myKeypair.pem

Second Way

The second way is to launch a new EC2 instance following the same steps as above but don't "Add Security Group Rule." Either "Create security group" with only port 22 exposed or "Select existing security group" and select an existing group with the rules you want to clone to the new EC2 instance.

Once the instance is up and running, then via the EC2 Web console go to the "Security" tab for that instance. Under "Inbound rules" select the security group under "Security Groups."

Once you open the "Security Groups" page click on "Inbound rules" and "Edit inbound rules." On the "Edit inbound rules page" click "Add rule" with the following details

Type: Custom TCP
Port range: 3000
Source: Anywhere-IPv4 (0.0.0.0/0)
Description: (optional)

Click "Save rules"

Testing

To test either the first or second method, first "Remote-SSH: Connect to Host" via the VS Code Command Palette and select the ip address which you added to ~/.ssh/config. Then install nvm

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

Next source to restart the terminal

source ~/.bashrc

Then install the latest version of NodeJS.

nvm install node

Create a simple HTML5 document to serve up from your remote home directory

touch index.html

Open the file in the file explorer and add the following markup.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>Hello World 🌎</p>
</body>
</html>

Serve up your home directory's index.html

npx serve

It will automatically set up port forwarding and offer to open in the browser. If you click "Open in browser" you'll see the Hello World page at localhost:3000 this is forwarding the port 3000 on the EC2 instance to your local machine's port 3000.

Alternatively if you want to test the exposed port on an IP address then access the ip.address:3000 and you should see "Hello World." The first time you load the page you'll see "The connection to ip.address is not secure." Click "Continue to site."

Port Forwarding

As mentioned above, when running npx serve VS Code will automatically enable port forwarding from the EC2 instances port 3000 to your local machine's port 3000. To configure this toggle the panel open/close with Command+j (on MacOS).

Once open, select the "Ports" tab. Click "Forward a Port" to add a new port. The "Forwarded Address" port will match the EC2 port unless there is already another EC2 instance forwarding to that port, in which case the "Forwarded Address" will auto-increment by 1 until it finds an open port to forward to.

cgcardona/exposing-and-forwarding-ec2-port.md