Dockerize and deploy🚀 your Angular App with a secure endpoint 🔐(HTTPS) using ChatGPT3🤖
Tags: gpt3, devops, angular, webdev
Published: 2023-02-05 09:36:28

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mrprejxz5nymmqiykyfp.png)

# Part 1: Dockerize your angular application
## 1. Create a Dockerfile in your angular project

```bash
# 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.
```bash
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**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yxkf7z5cml9ywar9k5vj.png)
* 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](https://www.noip.com/) and link it to the public IP of your VPS

# Part 3: Deploy your application
## 1. Create a docker-compose file in your VPS
```yaml
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:
```

> Replace wi11i4m/weather-app:1.0 with your docker image and example.ddns.net 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3h1k47me15ine316iv5v.png)

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