Build eshop template with MEAN stack and typescript - deployment

There is more ways to deploy, you can use heroku or just pm2 for the serving of the app. We will use docker, dockerhub and github, so after change is pushed to master, dockerhub will run new build and we will set webhook in dockerhub to call it if the build is successful.

On the server is Ubuntu 20.04 and we will use NGINX server. After the github project is ready, we set the Dockerfile

FROM node:12.13.0-alpine as buildContainer
RUN apk update && apk add python make g++
WORKDIR /usr/src/app
COPY ./package.json ./
RUN npm install
COPY . /usr/src/app
RUN npm run build:ssr

FROM node:12.13.0-alpine
WORKDIR /usr/src/app
COPY --from=buildContainer /usr/src/app/package.json /usr/src/app/.env* ./
COPY --from=buildContainer /usr/src/app/dist ./dist

ENTRYPOINT ["npm", "run", "serve:ssr"]

First the app is build in the chosen node version, after that we will copy this build with package.json and .env, if this file exist (.env isn't in github, so this is useful just when we build docker through docker build -t app-name .), otherwise we will add .env later.

For the build in server, we can use this bash

sudo docker stop eshop_mean
sudo docker system prune -f
sudo docker pull user/eshop-mean:latest
sudo docker run -d --name=eshop_mean --env-file /home/eshop-mean/.env --network=host user/eshop-mean:latest

Important here is that we have path to .env file and network is set to host to have in on the port on server. It took latest build from dockerhub and serve it on the port which we set in app.

Then we can install webhook and we will add settings to hooks.json

[
  {
    "id": "server_hook_deploy",
    "execute-command": "/root/hook/redeploy.sh",
    "command-working-directory": "./",
    "response-message": "Redeploying Server"
  }
]

It will run on the port 9000 , in the path localhost:9000/server_hook_deploy

Now can setup NGINX in the etc/nginx/sites-enables

 server {
  listen 80;
  server_name your_server_name;

  location /hooks {
    proxy_pass          http://127.0.0.1:9000;
  }

  location / {
    proxy_pass          http://127.0.0.1:4000;
    proxy_http_version  1.1;
    proxy_redirect      default;
    proxy_set_header    Upgrade $http_upgrade;
    proxy_set_header    Connection "upgrade";
    proxy_set_header    Host $host;
    proxy_set_header    X-Real-IP $remote_addr;
    proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header    X-Forwarded-Host $server_name;
  }

 }

We are serving here hooks, which path we can add to dockerhub to run it when build is successful. Now the app should run after restarting NGINX.