Dockerfile for deploying an Angular with CLI project

# === Start: Stage #1 - Building the web app
FROM node:10.15.0-alpine AS builder

WORKDIR /usr/app

# Wildcard to copy package-lock.json too
COPY package*.json ./

# RUN executes command(s) in a new layer and creates a new image. E.g., it is often used for installing software packages.
RUN npm install

# Copy only the required files/folders ordered from least o most subject to change
# That way the built will only run if any of these files/folders are modified
COPY angular.json .
COPY tsconfig.json .
COPY tslint.json .
COPY e2e e2e
COPY src src

RUN npm run-script build -- --prod

# This is just for testing the app was built correctly
# && ls -la /usr/app
# === End: Stage #1

# === Start: Stage #2 - Configuring Nginx with the app as document's root
FROM nginx:1.15.5-alpine

COPY docker/nginx/nginx.conf /etc/nginx/nginx.conf

# TODO: Change "my-app" in "/usr/app/dist/my-app" for the name of your application, 
#       for example: "/usr/app/dist/my-angular-application"
COPY --from=builder /usr/app/dist/my-app /usr/share/nginx/html/

# This is just for testing the app was copied correctly
# RUN ls -la /usr/share/nginx/html/

EXPOSE 80

# ENTRYPOINT configures a container that will run as an executable.
ENTRYPOINT ["/bin/ash", "-c", "nginx -g 'daemon off;'"]

1. Place this Dockerfile in the root of your CLI project
2. Create a <ANGULAR_APP_ROOT_DIR>/.dockerignore file with this content https://gist.github.com/alex-arriaga/9f35cc43a013eb3592be0f9ae2fc711f
3. Create a file for nginx configuration in <ANGULAR_APP_ROOT_DIR>/docker/nginx/nginx.conf and place the content in: https://gist.github.com/alex-arriaga/b8e198c2617442abf8a53b8473a7d475
4. Build your image (being on the root directory of your project)

docker build --tag my-company/my-app:1.0.0

4. Upload your image to Docker Hub
5. Test your image by running a container

docker run -d --rm --name my-app-container -p 8000:80 my-company/my-app:1.0.0

6. Open your browser http://localhost:8000