This tutorial will help you create docker container with Angular 2 and Nginx on production mode.

1.Setup Angular 2 application

Following Angular 2 instruction and create your Angular application https://angular.io/guide/quickstart

1.1 Install the Angular CLI

1.2 Create a workspace and initial application

1.3 Serve the application

2. Setup Dockerfile

2.1 Create .dockerignore

From your root directory, create .dockerignore file. It will ignore files/folder when you copy into docker image from your source.

node_modules
npm-debug.log
Dockerfile
.dockerignore

2.2 Create Dockerfile

From your root directory, create Dockerfile

FROM node:8 as node
WORKDIR /usr/src/app
COPY package*.json ./
COPY . .
RUN npm install
RUN npm run build --prod
FROM nginx:1.13.12-alpine
COPY --from=node /usr/src/app/dist /usr/share/nginx/html
COPY ./nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80 443

3. Build & Run

3.1 First Build and create image

Run the following command

docker build -t zodinet/angular-web-app .

3.2 Run your image

Run the following command

docker run --name angular-web-app -p 443:443 -p 80:80 -d zodinet/angular-web-app

Check your result by visit http://localhost/