Angular 在Docker中生成角度项目-特定于环境

这是我第一次写Dockerfile。我在Angular中有一个应用程序，它连接到不同的后端（Spring Boot Rest服务）。我的意思是说spring boot应用程序已经部署在许多不同的站点/位置。它们都有不同的URL。这些Rest服务已经存在（我没有编写这些Rest服务）。当我试图调用这些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"
  }
}

角度服务.ts

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

我当前的Dockerfile如下所示：

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

# 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

listen  ${MY_NGINX_PORT};

目前我是这样建造的：

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

# 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

listen  ${MY_NGINX_PORT};

然后像这样跑：

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

# 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

listen  ${MY_NGINX_PORT};

问题：

---

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

由于您似乎将NGINX用作HTTP服务器，因此可以将该指令用于代理目的

此外，您还可以创建自己的NGINX模板配置文件，即在引导过程中，NGINX在

/etc/NGINX/templates/

文件夹中查找，如果存在任何

.template

文件，NGINX将执行结果输出到

/etc/NGINX/conf.d

，例如：

如果在

/etc/templates/default.conf.template

中放置一个文件，该文件包含如下变量引用：

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

# 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

listen  ${MY_NGINX_PORT};

输出将转到

/etc/nginx/conf.d/default.conf

，如下所示（假设

我的nginx\u端口是8080）：

参考：

解决方案：
由于NGINX的默认配置文件位于
/etc/NGINX/conf.d/default.conf
中，包含一个非常简单的设置，因此您可以创建一个模板文件，并让NGINX在引导期间使用它覆盖默认的conf文件：

/etc/templates/default.conf.template
--（将在
envsubt
之后变成）-->
/etc/nginx/conf.d/default.conf

创建一个名为
nginx default.conf.template
的文件，用此内容填充该文件，然后将其放入项目根文件夹：
请注意
/RestWeb/
路径和
${REMOTE\u API\u URL}
自定义环境变量，即以
/RestWeb/
路径开头的任何请求都将无缝地代理到
${REMOTE\u API\u URL}
，如下所示

调整Dockerfile，如下所示：
下次将环境变量
REMOTE\u API\u URL
传递到
docker run
时，它的值将在NGINX服务器启动时自动使用，例如
或对于安全API：

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

一些提示

您不需要
公开80
。它仅用于文档目的，实际上不起任何作用


避免使用最新版本的Docker映像，如
nginx:latest
或
node: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/



见：


修改Docker文件如下，以利用Docker层缓存机制使后续Docker构建运行得更快

请参阅：
您是否尝试像这样将site1qa.proxy.conf.json添加到angular.json文件中？：

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "projectname:build",
            "proxyConfig": "./site1qa.proxy.conf.json"
          },

您可能需要查看可以设置为dockerfile中最后一行的
入口点
指令。有了它，您可以指定一个命令和参数数组，在运行时只需向其中添加所需的任何参数。另请参见本节，然后了解如何配置多个站点url以及Dockerfile生成命令是什么？你能告诉我更多的细节吗？我还没有机会测试这个。现在我已经放弃投票，一旦我测试了它，我就会接受答案。谢谢