Playground Backend Deployment Dev Log2

This shows how the Playground backend is deployed on an AWS EC2 machine, and made secure through nginx proxy manager.

By Avinh Huynh4/5/2023
Article Thumbnail

Introduction

This guide mostly follows Jeffrey Fonseca's guide on nginx proxy manager (npm) (link). The Playground uses a deployed websocket server to share a live updating IDE that multiple people can access. This devlog shows how this server is deployed and made secure (https).

AWS EC2 Instance

The socket server is deployed on Tristan's AWS Account. The IP address and the pem file are in the Slack channel. If you want to access the server:

  1. Download the pem file from the slack channel
  2. CD into the folder where the pem file is downloaded
  3. Do the command, and fill in the {{blanks}} (info is in the slack):
ssh -i {{pem file}} ubuntu@{{ec2 public ip}}.us-west-1.compute.amazonaws.com

Some important things about the Instance is that there is a security group attached to it that decides which ports can be used.

Image of security groups

In this example, this is not our site, ports 22, 80, and 443 are accessible from anywhere. 0.0.0.0/0 means that it is accessible from any ipv4 address, and ::/0 means that it is accessible form any ipv6 port. This can be adjusted to allow only one ip address to access the ports, or to allow more ports to be accessed.

In ours, we allow ports 22, 80, 81, and 443 for the npm, and ports 3000 and 8085 for our project. Port 3000 is where our websocket server is deployed at.

Docker

Our site uses docker to build the project. Docker makes a remote container to store the websocket server. Docker is also used to deploy the npm which will be talked about later.

To build the project, use:

docker-compose up --build -d

You can see the server running through the docker container for testing purposes using:

http://{{ec2 private ip}}:3000

Node Package Manager

Npm allows us to change it from http --> https. It makes it secure and also changed the domain name. This can normally be done through nginx and certbot, but thats awful and npm is user friendly and has a nice gui.

To access this, go to:

http://{{ec2 private ip}}:81

Here, you can see log in credentials that are also posted on the slack.

Image of the npm

Here, you can see that the private server is sent to https://cancode-websocket.duckdns.org

Duck DNS

unkown • 6/16/2025, 12:33:04 PM