Dockerizing Angular 8+ application with Nginx-Alpine
Containerize Angular app to be built and to to run withing Docker image.
![Dockerizing Angular 8+ application with Nginx-Alpine](/content/images/size/w2000/2020/11/angular-docker-spring-boot.png)
In the root folder of your Angular app add three files:
.git
node_modules
dist
/e2e
/docs
.gitignore
### STAGE 1: Build ###
FROM node:alpine AS builder
# set working directory
WORKDIR /app
COPY . .
RUN npm install
RUN npm install -g @angular/cli@8.3.25
RUN ng build --configuration production
## STAGE 2: Run ###
FROM nginx:1.19.4-alpine
COPY --from=builder /app/dist/myapplicationname /usr/share/nginx/html
COPY default.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
server {
listen 80;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri$args $uri$args/ $uri $uri/ /index.html =404;
}
}
Dockerfile is a multistage build. STAGE 1 builds our angular application.
STAGE 2 copies from STAGE 1 our built angular app and copies the files into what is going to be our running container.
The reason for doing multistage builds is to avoid having all unnecessary files within our docker container, such as build dependencies, build tools, extra files, ..., making our image as small as possible.
Run the build in the root folder of your app:
docker build -t myappname:latest .
Testing the containerized docker image
Simply run the docker container and go to: http://localhost
docker run -p 80:80 -ti myappname:latest
There you have it. Done and done.