Docker Assignments #20: Deploy an Angular Application using Nginx

 Nginx is a webserver and can also be used as reverse-proxy, load balancer and http cache

1. Setup an angular docker application as per previous article http://millionvisit.blogspot.com/2020/10/docker-assignments-19-dockerizing.html
2. change command as "npm run build" in docker-compose.yml
3. run docker-compose up command  to generate dist folder in the host machine
4. make sure to remove dist folder entry in .dockerignore file
5. create Dockerfile.nginx in the root directory and add following content

FROM nginx:1.17.1-alpine

COPY ./dist/docker-angular/ /usr/share/nginx/html/

     6. create docker-compose.prod.yml file in the root directory and add following content

version: '3'

services:

    dockerangular-prod-service:

      build:

        context: .

        dockerfile: Dockerfile.nginx

      environment:

        NODE_ENV: production

      ports:

        - 8080:80

 

    7. run following docker compose up command

       > docker-compose -f "docker-compose.prod.yml" up

    8. check http://localhost:8080/

we can even spin up docker containers by right click on docker-compose.prod.yml in vscode and select "Compose up" option

Source code available under https://github.com/ramasubbareddy1224/docker-angular

Happy Coding :)