No Response : Unable to dockerize and run angular app

Question

I am trying to dockerize and run an angular app. Able to build the docker image successfully. But the container probably not running and hence not able to access the application in browser.

Dockerfile

# Stage 1
FROM node:12.16-alpine as build-step
RUN mkdir -p /app
WORKDIR /app
COPY package.json /app
RUN npm install
COPY . /app
RUN npm run build
    
# Stage 2
FROM nginx:1.17.1-alpine


COPY --from=build-step /app/dist/login-UI /usr/share/nginx/html

Docker Image log :

docker build -t loginui .
Sending build context to Docker daemon  929.3kB
Step 1/9 : FROM node:12.16-alpine as build-step
 ---> 7a48db49edbf
Step 2/9 : RUN mkdir -p /app
 ---> Using cache
 ---> 009b1d8e341c
Step 3/9 : WORKDIR /app
 ---> Using cache
 ---> 22cca832d730
Step 4/9 : COPY package.json /app
 ---> Using cache
 ---> e493d0d6beae
Step 5/9 : RUN npm install
 ---> Using cache
 ---> 2d940671484f
Step 6/9 : COPY . /app
 ---> ffd600d0f204
Step 7/9 : RUN npm run build
 ---> Running in 234158b54741

> login-ui@0.0.0 build /app
> ng build

Browserslist: caniuse-lite is outdated. Please run next command `npm update`

chunk {main} main-es2015.js, main-es2015.js.map (main) 64.6 kB [initial] [rendered]
chunk {polyfills} polyfills-es2015.js, polyfills-es2015.js.map (polyfills) 251 kB [initial] [rendered]
chunk {runtime} runtime-es2015.js, runtime-es2015.js.map (runtime) 6.09 kB [entry] [rendered]
chunk {styles} styles-es2015.js, styles-es2015.js.map (styles) 16.3 kB [initial] [rendered]
chunk {vendor} vendor-es2015.js, vendor-es2015.js.map (vendor) 4.09 MB [initial] [rendered]
Date: 2020-09-28T18:02:46.647Z - Hash: e180e2f26c569d07323a - Time: 14143ms

chunk {main} main-es5.js, main-es5.js.map (main) 67.2 kB [initial] [rendered]
chunk {polyfills} polyfills-es5.js, polyfills-es5.js.map (polyfills) 558 kB [initial] [rendered]
chunk {runtime} runtime-es5.js, runtime-es5.js.map (runtime) 6.09 kB [entry] [rendered]
chunk {styles} styles-es5.js, styles-es5.js.map (styles) 16.3 kB [initial] [rendered]
chunk {vendor} vendor-es5.js, vendor-es5.js.map (vendor) 4.18 MB [initial] [rendered]
Date: 2020-09-28T18:02:58.006Z - Hash: 75ab165574f3ffc6ffd6 - Time: 11236ms
Removing intermediate container 234158b54741
 ---> 2d10426b40cc
Step 8/9 : FROM nginx:1.17.1-alpine
 ---> ea1193fd3dde
Step 9/9 : COPY --from=build-step /app/dist/login-UI /usr/share/nginx/html
 ---> Using cache
 ---> 3a0472e79b29
Successfully built 3a0472e79b29
Successfully tagged loginui:latest
SECURITY WARNING: You are building a Docker image from Windows against a non-Windows Docker host. All files and directories added to build context will have '-rwxr-xr-x' permissions. It is recommended to double check and reset permissions for sensitive files and directories.

Docker RUN :

docker run -p 4200:4200 --name login-UI loginui:latest

No container id getting generated here in this step.

docker ps

CONTAINER ID        IMAGE                    COMMAND                  CREATED             STATUS                 PORTS                                        NAMES
2273b2f03df7        loginui:latest           "nginx -g 'daemon of"   3 minutes ago       Up 4 minutes           80/tcp, 0.0.0.0:4200->4200/tcp               login-UI

Where I am doing wrong ?

Answer 1

You are putting your static html/javascript files into an nginx image that but you setup port mapping on 4200 when running the container. Port 4200 is used when running the dev server (e.g. with angular-cli), but not with nginx. When you serve the files using nginx, you need to map port 80 and browse to the chosen port.

docker run -p 80:80 --name login-UI loginui:latest

and then use http://localhost instead of http://localhost:4200.

Technically you can also map 4200:80 to keep the urls as before, but I would advise to use a different one (like 80) to avoid confusion and allow running the local dev server next to the containerized one.