angular - 在 Docker 中构建 Angular 项目 - 特定于环境

Question

这是我第一次编写 Dockerfile。我在 Angular 中有一个应用程序连接到不同的后端(Spring Boot Rest 服务)。我的意思是说 spring boot 应用程序已经部署在许多不同的站点/位置。它们都有不同的 URL。这些休息服务已经有了(我没有写这些休息服务)。当我尝试调用这些 Rest 服务时出现 CORS 错误。所以我必须给我们下面的 xyx.proxy.conf.json

下面是我的配置:

package.json

  "scripts": {
    "ng": "ng",
    "start:localhost": "ng serve --proxy-config localhost.proxy.conf.json",
    "start:site1qa": "ng serve --proxy-config site1qa.proxy.conf.json",
    "start:site2qa": "ng serve --proxy-config site2qa.proxy.conf.json",
    "start:site1prod": "ng serve --proxy-config site1qa.proxy.conf.json",
    "start:site2prod": "ng serve --proxy-config site2prod.proxy.conf.json",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e --proxy-config site1qa.proxy.conf.json"
  },

site1qa.proxy.conf.json 注意:我必须使用代理，因为我收到 CORS 错误

{
  "/RestWeb/*": {
    "target": "http://site1qa:8005",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

Angular 服务.ts

  findAllByModelYear(): Observable<string[]> {
    return this.httpClient.get<string[]>('/RestWeb/model/findAllModelYearCodes');
  }

我在本地使用以下命令测试了应用程序，指向不同的后端，如下所示:

npm run start:localhost
OR
npm run start:site1qa
OR
npm run start:site2prod

我当前的 Dockerfile 是这样的:

# Stage 1: Compile and Build angular codebase

# Use official node image as the base image
FROM node:latest as build

# Set the working directory
WORKDIR /usr/local/app

# Add the source code to app
COPY ./ /usr/local/app/

# Install all the dependencies
RUN npm install

# Generate the build of the application
RUN npm run build

# Stage 2: Serve app with nginx server

# Use official nginx image as the base image
FROM nginx:latest

# Copy the build output to replace the default nginx contents.
COPY --from=build /usr/local/app/dist/my-projectt /usr/share/nginx/html

# Expose port 80
EXPOSE 80

目前我是这样构建的:

docker build -t dockerangular .

然后像这样运行:

docker run -it -p 8000:80 --name angulardocker1 my-first-app

问题:

我如何传递参数(在构建和/或运行应用程序时)，以便我可以连接到不同的站点(如 package.json 中所述，即使用 xyx.proxy.conf.json)

Answer 1

由于您似乎使用 NGINX 作为 HTTP 服务器，您可以使用 proxy_pass用于代理目的的指令。

此外，您还可以创建自己的 NGINX 模板配置文件，即在引导 NGINX 期间查看 /etc/nginx/templates/ 文件夹，如果有 .template文件存在，NGINX 输出执行结果 envsubst到/etc/nginx/conf.d，例如:

如果您在 /etc/templates/default.conf.template 中放置一个文件，其中包含如下变量引用:

listen  ${MY_NGINX_PORT};

输出将转到 /etc/nginx/conf.d/default.conf 并且看起来像这样(假设 MY_NGINX_PORT 是 8080):

listen 8080;

引用:https://hub.docker.com/_/nginx

解决方案:

由于 NGINX 的默认配置文件位于 /etc/nginx/conf.d/default.conf，包含一个非常简单的设置，您可以创建一个模板文件并让 NGINX 使用它来覆盖引导期间的默认 conf 文件:

/etc/templates/default.conf.template --(在envsubst之后会变成)--> /etc/nginx/conf.d/默认.conf

1. 创建一个名为 nginx-default.conf.template 的文件并用以下内容填充它，然后将其放入您的项目根文件夹中:

server {
    listen       80;
    server_name  _;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    location /RestWeb/ {
        proxy_pass ${REMOTE_API_URL};
    }
}

注意 /RestWeb/ 路径和 ${REMOTE_API_URL} 自定义环境变量，即任何以 /RestWeb/ 路径开头的请求将无缝代理到 ${REMOTE_API_URL}，就像 ng cli / webpack's proxy dev server does .

1. 按如下方式调整您的 Dockerfile:

...
# Add this line right before `EXPOSE 80`
COPY nginx-default.conf.template /etc/nginx/templates/default.conf.template
...

1. 下次将环境变量 REMOTE_API_URL 传递给 docker run 时，它的值将在 NGINX 服务器启动时自动使用，例如

docker run -p 8000:80 -e REMOTE_API_URL="http://site1qa:8005" my-first-app

或安全 API:

docker run -p 8000:80 -e REMOTE_API_URL="https://site1prod:8005" my-first-app

一些提示

• 您不需要 EXPOSE 80。它仅用于文档目的，实际上什么都不做。

• 避免使用最新版本的 Docker 镜像，例如 nginx:latest 或 node:latest。 latest，顾名思义，总是指向最新版本。

  • 每个 docker build 指令都会从 Docker Hub 中提取最新版本的相应图像，但是，这可能不是您真正想要/需要的。想象一下，今天 node 的当前版本是 12，几天/几周后版本 13 出现并且带有 node:latest 标签，您可以拉出它并在后台使用它。这是有风险的，因为它可能会破坏某些东西
  • 因此，最好坚持使用特定版本并在测试新版本后随着时间的推移自行增加版本(例如，您可以使用 node:14-alpine 和 nginx :1.19.9-alpine。查看 Docker Hub 了解更多标签)

• 这些是等价的:

  WORKDIR /usr/local/app
  COPY ./ /usr/local/app/
  

  WORKDIR /usr/local/app
  COPY ./ .
  

参见:https://docs.docker.com/engine/reference/builder/#workdir

• 如下修改您的 Dockerfile 以利用 Docker 层缓存机制使后续 Docker 构建运行得更快

...
WORKDIR /usr/local/app
COPY package.json .
RUN npm install
COPY . .
RUN npm run build
...

参见:Why COPY package*.json ./ precedes COPY . .?