Skip to content

Instantly share code, notes, and snippets.

@alex-arriaga

alex-arriaga/Dockerfile for deploying an Angular with CLI project

Last active January 22, 2019 16:56
Show Gist options
  • Save alex-arriaga/c821da19ff05d775906c23fc0496e887 to your computer and use it in GitHub Desktop.
Save alex-arriaga/c821da19ff05d775906c23fc0496e887 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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;'"]
@alex-arriaga
Copy link
Author

alex-arriaga commented Jan 18, 2019 •
edited
Loading

  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
  1. Upload your image to Docker Hub
  2. 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
  1. Open your browser http://localhost:8000

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment