DEV Community

Arthur William
Arthur William

Posted on

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

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.

Image description

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
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/ && \
        chown -R nginx:nginx /var/run/
#switch to nginx user        
USER nginx
COPY --from=build /app/dist/weather-app /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]
Enter fullscreen mode Exit fullscreen mode


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 push $DOCKERHUB_USERNAME/weather-app:1.0
Enter fullscreen mode Exit fullscreen mode

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 Image description
  • 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"
    container_name: weather-app
    image: "wi11i4m/weather-app:1.0"
    #  - "80:80"

    container_name: nginx-proxy
    image: jwilder/nginx-proxy:alpine
      - "80:80"
      - "443:443"
      DHPARAM_GENERATION: "false" # disable auto param generation
      - /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

    container_name: nginx-proxy-letsencrypt
    image: jrcs/letsencrypt-nginx-proxy-companion
      - /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
      NGINX_PROXY_CONTAINER: nginx-proxy

Enter fullscreen mode Exit fullscreen mode

Replace wi11i4m/weather-app:1.0 with your docker image and with the domain name you just created

2. Run the docker-compose file by using docker-compose up -d

After that, you can visit your app by using your domain name

Image description

If you get the page doesn't load, verify that you allowed port 443 (HTTPS) on your VPS.

Oldest comments (2)

wi11i4m profile image
Arthur William
thosch66 profile image
Thomas Schewe

Why do use still use docker-compose instead of the now recommended docker compose?