如何正确配置Angular,使其能够在Docker后面成功运行进行开发

我正在为我的Angular应用程序寻找一种更好的方法来使用多阶段构建过程。幸运的是,在咨询了一些资源后,我发现了一些我认为足以满足我需求的东西 here .

我还利用了我在Docker&Docker Compose。然而,我最近的Angular服务似乎并不想复活。

目录结构

下面是我的堆栈的目录结构:

.
├── 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

这个 portal 目录包含我们正在尝试Dockerize的Angular应用程序。这个 sys 目录包含 default.conf & Dockerfile 文件夹。

Dockerfile

我仍然处于这个构建的测试阶段,问题是当docker compose试图构建容器时,它失败了 门户 服务首先,下面是一个典型的输出,显示:

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

我已经彻底检查了我的Dockerfile,并确保一切都有意义,并且是基于我的目录结构进行配置的。

实际的Dockerfile如下所示:

###### 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;"]

在我看来,在 build 阶段,因为我宣布 /app 是我的工作目录,事实上我也将此目录映射到 volumes 报关进口 docker-compose.yaml 文件

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

有了所有这些配置,我对基于目录结构的错误感到困惑。

我很感激有人给我指引正确的方向,谢谢。