How can I dockerize my angular app for production?

Question

I try to containerize my existing angular app using docker this is my

• app name : admin-dashboard within the app I created my

1. nginx.conf
2. Dockerfile

I'm using Ubuntu 18.03, docker is running

This is my Dockerfile

### STAGE 1: Build ###
FROM node:12.22-alpine3.10 AS build
WORKDIR /usr/src/app
COPY package.json package-lock.json ./
RUN npm install -g @angular/cli
COPY . .
RUN ng build --prod
### STAGE 2: Run ###
FROM nginx:1.17.1-alpine
COPY nginx.conf /etc/nginx/nginx.conf
COPY --from=build /usr/src/app/dist/* /usr/share/nginx/html

This is my nginx.conf file

events{}
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;
        }
    }
}

This is my package.json

    {
  "name": "next-v8.1.2-lite",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.1.2",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "~8.1.2",
    "@angular/compiler": "~8.1.2",
    "@angular/core": "~8.1.2",
    "@angular/forms": "~8.1.2",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "~8.1.2",
    "@angular/platform-browser-dynamic": "~8.1.2",
    "@angular/router": "~8.1.2",
    "@ng-bootstrap/ng-bootstrap": "^4.2.1",
    "apexcharts": "^3.8.0",
    "bootstrap": "^4.3.1",
    "css-animator": "^2.3.1",
    "jquery": "^3.4.1",
    "moment": "^2.24.0",
    "ng-click-outside": "^4.0.0",
    "ng2-validation": "^4.2.0",
    "ngx-perfect-scrollbar": "^8.0.0",
    "rxjs": "^6.5.2",
    "rxjs-compat": "^6.5.2",
    "screenfull": "^4.2.0",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1102.9",
    "@angular/cli": "^11.2.9",
    "@angular/compiler-cli": "~8.1.2",
    "@angular/language-service": "~8.1.2",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/jquery": "^3.3.30",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^6.3.2",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "node-sass": "^4.12.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  }
}

Finally I try to create my docker container with the command

docker build -t myapp:prod .

I'm getting this error

Step 6/9 : RUN ng build --prod
 ---> Running in c62fc8500224
An unhandled exception occurred: Cannot find module '@angular-devkit/build-angular/package.json'
Require stack:
- /usr/local/lib/node_modules/@angular/cli/node_modules/@angular-devkit/architect/node/node-modules-architect-host.js
- /usr/local/lib/node_modules/@angular/cli/node_modules/@angular-devkit/architect/node/index.js
- /usr/local/lib/node_modules/@angular/cli/models/architect-command.js
- /usr/local/lib/node_modules/@angular/cli/commands/build-impl.js
- /usr/local/lib/node_modules/@angular/cli/node_modules/@angular-devkit/schematics/tools/export-ref.js
- /usr/local/lib/node_modules/@angular/cli/node_modules/@angular-devkit/schematics/tools/index.js
- /usr/local/lib/node_modules/@angular/cli/utilities/json-schema.js
- /usr/local/lib/node_modules/@angular/cli/models/command-runner.js
- /usr/local/lib/node_modules/@angular/cli/lib/cli/index.js
- /usr/local/lib/node_modules/@angular/cli/lib/init.js
- /usr/local/lib/node_modules/@angular/cli/bin/ng
See "/tmp/ng-NjNJAp/angular-errors.log" for further details.
The command '/bin/sh -c ng build --prod' returned a non-zero code: 127

What's the issue, I'm not sure, I'm stuck.

Answer 1

Try RUN npm i after the RUN ng build --prod.

eg:

    ### STAGE 1: Build ###
    FROM node:12.22-alpine3.10 AS build
    WORKDIR /usr/src/app
    COPY package.json package-lock.json ./
    RUN npm i -g @angular/cli
    
    # Install app dependencies:
    RUN npm i 
    
    COPY . .
    RUN ng build --prod
    ### STAGE 2: Run ###
    FROM nginx:1.17.1-alpine
    COPY nginx.conf /etc/nginx/nginx.conf
    COPY --from=build /usr/src/app/dist/* /usr/share/nginx/html