Dockerize and deploy🚀 your Angular App with a secure endpoint 🔐(HTTPS) using ChatGPT3🤖

#gpt3 #devops #angular #webdev

First of all, I’ll explain to you how to do that without ChatGPT, and after I’ll give you some commands that you can use in ChatGPT to do it.

Part 1: Dockerize your angular application

1. Create a Dockerfile in your angular project

# Stage 1
FROM node:19.6.0-alpine3.17 AS build
WORKDIR /app
COPY package.json package-lock.json .
RUN npm ci
COPY . .
RUN npm run build --prod

# Stage 2
FROM nginx:alpine
## add permissions for nginx user
RUN chown -R nginx:nginx /var/cache/nginx && \
        chown -R nginx:nginx /var/log/nginx && \
        chown -R nginx:nginx /etc/nginx/conf.d
RUN touch /var/run/nginx.pid && \
        chown -R nginx:nginx /var/run/nginx.pid
#switch to nginx user        
USER nginx
COPY --from=build /app/dist/weather-app /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]

Explanation

We use a dockerfile with 2 stages:

the first one to build our angular application
the second is to make an image of our angular app from an Nginx image

WORKDIR /app: navigate to app/ folder
npm ci: npm clean install

Best practices

As a best practice, we‘re building our image from an alpine version of Nginx to get the smaller size possible for our image.
We’re also using a non-root user to minimalize the privilege in our container.
The multi-stage Dockerfile allows us to build an image without the useless heavy package used to build our application.

2. Run the following commands to build and push your image.

docker build -t $DOCKERHUB_USERNAME/weather-app:1.0 .
docker login -u $DOCKERHUB_USERNAME -p $DOCKERHUB_PASSWORD
docker push $DOCKERHUB_USERNAME/weather-app:1.0

Part 2: Create a VPS and a domain name

Create a virtual machine instance on AWS for free with the ubuntu os and instance type t2.micro
Download the private key of your instance and run the command ssh -i PRIVATE_KEY_FILE_NAME.pem ubuntu@VM_PUBLIC_IP
And create a domain name for your application for free on No-IP and link it to the public IP of your VPS

Part 3: Deploy your application

1. Create a docker-compose file in your VPS

version: "3.3"
services:
  weather-app:
    container_name: weather-app
    image: "wi11i4m/weather-app:1.0"
    #ports:
    #  - "80:80"
    environment:
      VIRTUAL_HOST: weather-app.ddns.net
      LETSENCRYPT_HOST: weather-app.ddns.net

  nginx-proxy:
    container_name: nginx-proxy
    image: jwilder/nginx-proxy:alpine
    ports:
      - "80:80"
      - "443:443"
    environment:
      DHPARAM_GENERATION: "false" # disable auto param generation
    volumes:
      - /var/run/docker.sock:/tmp/docker.sock:ro # allow nginx to interact with docker
      - ./etc/nginx/certs:/etc/nginx/certs # certificate
      - ./etc/nginx/vhost.d:/etc/nginx/vhost.d # host
      - nginx_proxy_html:/usr/share/nginx/html # store our web app

  nginx-proxy-letencrypt:
    container_name: nginx-proxy-letsencrypt
    image: jrcs/letsencrypt-nginx-proxy-companion
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock:ro # allow nginx to interact with docker
      - ./etc/nginx/certs:/etc/nginx/certs # certificate
      - ./etc/nginx/vhost.d:/etc/nginx/vhost.d # host
      - nginx_proxy_html:/usr/share/nginx/html # store our web app
    environment:
      DEFAULT_EMAIL: example@gmail.com
      NGINX_PROXY_CONTAINER: nginx-proxy

volumes:
  nginx_proxy_html: