This app is a simple chat app that allows users to chat with each other in real time. It is built using Node.js, Express, and Socket.io. This app is deployed in AWS EC2 with docker and self-hosted service in gitHub this doc will give the all steps and command to do the same.provided the repo of front end and back end of the app. In the document you will see the necessary changes to be done in the code to make it work in your local machine or in the server.
You can follow the steps to deploy the chat app. And take reference from the code in the backend repo and frontend repo.
- Create an AWS free tire account and login to the console.
- Go to the EC2 dashboard and click on the launch instance.
- chose the ubuntu server free tire eligible with 64bit by default.
- Configure the instance t2.micro free tire eligible.
- create a key pair and download it for ssh access from local machine.
- leave storage and network settings make ssh allowed from anywhere as default.
- Review and launch the instance.
- After successful launch click on the instance and note the public IPV4 address.
- setup the security group for the instance to allow the port by editing inbound rules in my case
3000for frontend and5000for backend the chat app. - open the terminal of instance by go to instance and click on connect and follow the steps that written there. you can follow any of the methods to connect to the instance.(ssh or browser based)
- once you in the terminal of the instance run the following command to update the package index.
sudo apt-get update- Install docker by running the following command.
sudo apt-get install docker.io -y
sudo systemctl start docker
sudo docker run hello-world
docker ps
sudo chmod 666 /var/run/docker.sock
sudo systemctl enable docker
docker --version- Docker is installed and running now.
- Go to the github repo of the chat app backend and click on the settings.
- Click on the actions and then click on the runners.
- create new self-hosted runner.
- we are using linux runner so select linux and follow the instructions written there(download and configure).
note:mkdir actions-runner && cd actions-runneryou can change the directory name as you want. all the prompt after running command you can press enter to go with default. - you can run the runner by running the following command.
./run.sh- after the runner is configured you will see the runner is online in the github repo. But it will be offline after some time because we are not running the runner as a service. we will run it as a service so that it will run in the background.
- to run the runner as a service run the following command.instruction
sudo ./svc.sh install
sudo ./svc.sh start- now the runner is running as a service and it will be online always.
- now we have the EC2 instance with docker and self-hosted runner setup.
- now we will deploy the chat app backend and frontend in the EC2 instance.
- you need to follow the same steps to setup
github self-hosted runnerfor frontend and bac 8000 kend.
- Go to the github repo of the chat app backend and click on the settings.
- Click on the secrets & variables->actions->New Repo Secret add the secrets.
DOCKER_USERNAME: your dockerhub username.DOCKER_PASSWORD: your dockerhub password.- ........ and other secrets that you need to add.
- Create a file
Dockerfilein the backend repo and copy the following code in it.
FROM node:alpine3.19
WORKDIR /app
COPY package.json ./
RUN npm install
COPY . .
EXPOSE 5000
CMD ["npm", "start"]- Create a folder in backend repo
.github/workflowsand create a filedeploy.yml(name could be anything) in it. - Copy the following code in the
deploy.ymlfile. - Change the
DOCKER_USERNAMEandDOCKER_PASSWORDwith the secrets that you added in the github repo. - You can change the commands in the
deploy.ymlfile as per your requirement. - Commit the changes and push it to the github repo.
- Go to the actions tab in the github repo and you will see the workflow is running.
- After the workflow is completed you can see the docker image is pushed to the dockerHub.
- you can see the necessary changes in the code to make it work in your local machine or in the server.In the backend repo.
- in my case i usually just add cors in the backend code to make it work in the server.
Note: thisfrontendURLis the url of the frontend app that you will deploy in the EC2 instance. you can change it as per your requirement. This allows the frontend app to access the backend API.
index.js
import { configDotenv } from "dotenv";
import cors from "cors";
configDotenv();
const port = process.env.PORT || 5000;
const frontendURL = process.env.FRONTEND_URL;
app.use(cors({
// origin: [frontendURL, localUrl], // Multiple allowed origins
origin: [frontendURL], // Multiple allowed origins
methods: ['GET', 'POST'],
credentials: true // Enable cookies
}));socket.js
// you can see the changes in the socket.js file in the backend repo.
const io = new Server(server, {
cors: {
origin: [frontendURL],
methods: ["GET", "POST"]
}
});- setup the secrets that you need as same before
- same as backend create a file
Dockerfilein the frontend repo and copy the following code in it.
FROM node:alpine3.19 as build
# Declare Arguments
ARG VITE_API_URL
# Set the environment variable
ENV VITE_API_URL=$VITE_API_URL
# Biuld the app
WORKDIR /app
COPY package.json ./
RUN npm install
COPY . .
RUN npm run build
# Server with nginx
FROM nginx:1.27.2-alpine
WORKDIR /usr/share/nginx/html
RUN rm -rf ./*
COPY --from=build /app/dist .
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]- Create a folder in frontend repo
.github/workflowsand create a filedeploy.yml(name could be anything) in it. - Copy the following code in the
deploy.ymlfile. - Make necessary changes in the
deploy.ymlfile as per your requirement. - watch the port in the
deploy.ymlfile and change it as per your requirement. - In the frontend repo you can see the necessary changes in the code to make it work in your local machine or in the server.
- In my case i passed the
VITE_API_URLas an environment variable to the frontend. change thevite.config.jsfile as default.
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
})- Commit the changes and push it to the github repo.
Note: if you are facing any issue or want any changes you can ask chatGPT for help. withymlandDockerfilefile.