Angular App into Docker container - Genocs/documentations GitHub Wiki

How to create a new angular project

  • Initialize the environment
ng new democontainer
cd democontainer
npm install
ng serve
ng build --prod
  • Create the file Dockerfile and add the following lines
### STAGE 1: Build ###
FROM node:12.7-alpine AS build
#FROM node:14.9.0-alpine3.10 AS build

WORKDIR /usr/src/app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build --prod

### STAGE 2: Run ###
FROM nginx:alpine
COPY nginx.conf /etc/nginx/nginx.conf
WORKDIR /usr/share/nginx/html
COPY --from=build /usr/src/app/dist/democontainer .
  • Create the file .dockerignore and add the following lines
dist
node_modules
npm-debug.log
Dockerfile*
docker-compose*
.dockerignore
.git
.gitignore
.env
*/bin
*/obj
README.md
LICENSE
.vscode
  • Create the file nginx.conf and add the following lines
http {

    include /etc/nginx/mime.types;

    server {
        listen 80;
        server_name localhost;
        root /usr/share/nginx/html;
        index index.html;

        location / {
            try_files $uri $uri/ /index.html;
        }
    }
}
  • Build image and run the container
docker build -t genocs.democontainer .
docker run -p 88:80 -d --name kp-container genocs.democontainer
  • Publish on DockerHub
docker tag genocs.democontainer genocs/democontainer
docker push genocs/democontainer
docker pull genocs/democontainer:latest