I was looking for a better way to use the Multi-Stage Build process for my Angular Application. Fortunately, after consulting a couple of resources, I came across something I had thought would suffice for my needs here.

I have also taken advantage of the knowledge I have already gained working with Docker & Docker-Compose. However, my recent Angular service does not seem to want to come to life.

Directory Structure

Below is what my stack’s directory structure looks like:

.
├── app
├── docker-compose.yaml <--- The docker-compose file used to boot services
├── portal
│   ├── README.md
│   ├── angular.json
│   ├── dist
│   ├── node_modules
│   ├── package-lock.json
│   ├── package.json
│   ├── src
│   ├── tsconfig.app.json
│   ├── tsconfig.json
│   └── tsconfig.spec.json
└── sys
    ├── mongodb
    ├── portal <--- Where the default.conf & Dockerfile reside for portal service
    └── rabbitmq

The portal directory contains the Angular App we are trying to Dockerize. The sys directory contains both the default.conf & Dockerfile files.

The Dockerfile

I am still in the testing stage of this build and the problem is that when docker-compose tries to build the containers it fails with the portal service. Below is, first, a typical output that shows:

Building portal
[+] Building 4.5s (11/15)
 => [internal] load build definition from Dockerfile                                                                                                                                                   0.0s
 => => transferring dockerfile: 864B                                                                                                                                                                   0.0s
 => [internal] load .dockerignore                                                                                                                                                                      0.0s
 => => transferring context: 2B                                                                                                                                                                        0.0s
 => [internal] load metadata for docker.io/library/nginx:stable-alpine                                                                                                                                 1.1s
 => [internal] load metadata for docker.io/library/node:16-alpine                                                                                                                                      1.1s
 => [builder 1/6] FROM docker.io/library/node:16-alpine@sha256:a1f9d027912b58a7c75be7716c97cfbc6d3099f3a97ed84aa490be9dee20e787                                                                        0.0s
 => [stage-1 1/4] FROM docker.io/library/nginx:stable-alpine@sha256:210650bba35a8e714a56aadb4a5abed9db1e55a90122b4bfa38c3977be831db9                                                                   0.0s
 => [internal] load build context                                                                                                                                                                      3.3s
 => => transferring context: 4.91MB                                                                                                                                                                    3.2s
 => CACHED [builder 2/6] WORKDIR /app                                                                                                                                                                  0.0s
 => ERROR [builder 3/6] COPY package.json .                                                                                                                                                            0.0s
 => CACHED [stage-1 2/4] RUN rm -rf /usr/share/nginx/html/*                                                                                                                                            0.0s
 => CACHED [stage-1 3/4] COPY sys/portal/default.conf /etc/nginx/nginx.conf                                                                                                                            0.0s
------
 > [builder 3/6] COPY package.json .:
------
failed to compute cache key: "/package.json" not found: not found
ERROR: Service 'portal' failed to build : Build failed

I have thoroughly inspected my Dockerfile and ensured that everything makes sense and is configured based on my directory structure.

The actual Dockerfile looks as shown below:

###### Install dependencies only when needed ######
FROM node:16-alpine AS builder

ARG CONFIGURATION='development'

# Make /app as working directory
WORKDIR /app

# Copy package.json file
COPY package.json .

# Install dependencies
RUN npm install --legacy-peer-deps

# Copy the source code to the /app directory
COPY . .

# Build the application
RUN npm run build --  --output-path=dist --configuration=$CONFIGURATION --output-hashing=all


######  Use NgInx alpine image  ###### 
FROM nginx:stable-alpine

# Remove default nginx website
RUN rm -rf /usr/share/nginx/html/*

# Copy nginx config file
COPY sys/portal/default.conf /etc/nginx/nginx.conf

# Copy dist folder fro build stage to nginx public folder
COPY --from=builder /app/dist /usr/share/nginx/html

# Start Nginx service
CMD ["nginx", "-g", "daemon off;"]

From the way I see it, things should be working okay with regards to the build stage since I declare that /app is my working directory and the fact that I have this directory also mapped under the volumes entry in docker-compose.yaml file.

services:
  portal:
    container_name: coolstuff_portal
    image: coolstuffportal:local
    build:
      context: .
      dockerfile: sys/portal/Dockerfile
    ports:
      - 9300:80
    expose:
      - 80
    volumes:
      - ./portal:/app
      - /app/node_modules
    networks:
      - coolstuff-solutions

With all these configurations in place, I am left confused as to what I am getting wrong based on my directory structure.

I’d appreciate pointers in the right direction, thanks.