在管理环境的同时 Dockerize Angular 应用程序答案

【问题标题】：Dockerize Angular app while managing environments在管理环境的同时 Dockerize Angular 应用程序
【发布时间】：2020-11-30 23:36:06
【问题描述】：

我有一个使用不同环境的 Angular 应用程序。我在环境文件夹中定义了我的环境文件（environment.int.ts、environment.test.ts、environment.prod.ts）。然后我用我的环境设置修改了我的angular.json 文件，例如：

"test" : {
    "fileReplacements": [
     {
         "replace": "src/environments/environment.ts",
         "with": "src/environments/environment.test.ts"
     }
  ]
},

我在package.json 中创建了自定义命令来运行它们：

"build-prod": "ng build --prod",
"build-test": "ng build --configuration=test",
"build-int": "ng build --configuration=int",

现在我的目标是将我的应用程序化、构建（通过选择环境）并在容器中运行它。

因此，我为每个环境创建了多个docker-compose.yml 文件（docker-compose-int.yml、docker-compose-test.yml、docker-compose-prod.yml）。这些文件如下所示：

version: '3.3'

services:
  myapp:
    image: myapp.azurecr.io/myapp
    build:
      context: ../
      dockerfile: docker/Dockerfile
      args:
        PROFILE: int
    ports:
      - "8080:4200"

以下是我的 dockerfile:

FROM node:12.16.1-alpine As builder
WORKDIR /usr/src/app

COPY package.json package-lock.json ./
RUN npm install
COPY . .

ARG PROFILE
ENV PROFILE $PROFILE
RUN echo "Environment: ${PROFILE}"
RUN npm run build-${PROFILE}

FROM nginx:1.15.8-alpine
COPY --from=builder /usr/src/app/dist/myapp/ /usr/share/nginx/html

EXPOSE 4200
CMD ["nginx", "-g", "daemon off;"]

以前，当我没有环境时，我只在 dockerfile 中的npm install 之后运行以下命令：

EXPOSE 4200
CMD ["npm", "start"]

但是我现在无法使用npm start 指定环境，所以我必须构建应用程序并运行构建的版本（如果我错了，请纠正我）。问题是，当我使用 nginx alpine 时，我不确定在新 dockerfile 的第二部分中我在做什么，以及是否会启动我的应用程序。

我应该在这里做什么？例如，当我运行以下命令时，我应该期待什么输出？

docker-compose -f docker/docker-compose-test.yml build
docker-compose -f docker/docker-compose-test.yml up

如何在所选环境的容器中运行我的应用程序？

我看到有些人 - 除了我所做的之外 - 放了一个nginx.conf 文件：

server {
  listen 8080;
  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri $uri/ /index.html =404;
  }
}

并将以下行添加到 dockerfile：

COPY --from=builder /usr/src/app/.docker/nginx.conf /etc/nginx/conf.d/default.conf

我需要这个文件吗？我的版本有什么不同？

【问题讨论】：

标签： angular docker nginx docker-compose

【解决方案1】：

这主要是端口问题。

在dockerfile 中，我已将最后几行替换为：

COPY --from=builder /usr/src/app/dist/myapp/ /usr/share/nginx/html
COPY --from=builder /usr/src/app/docker/nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

无需运行CMD ["nginx", "-g", "daemon off;"]。

我还在我的应用程序中创建了一个nginx.conf 文件（dockerfile 的同一文件夹），代码如下：

server {
  listen 80;
  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri $uri/ /index.html =404;
  }
}

然后在docker-compose.yml文件中我更新了端口匹配：

version: '3.3'

services:
  myapp:
    image: myapp.azurecr.io/myapp
    build:
      context: ../
      dockerfile: docker/Dockerfile
      args:
        PROFILE: int
    ports:
      - "8080:80"

现在我可以使用我需要的 docker-compose 文件来运行多个环境。例如对于 int 我使用：

docker-compose -f docker/docker-compose-int.yml build
docker-compose -f docker/docker-compose-int.yml up

为了测试我使用

docker-compose -f docker/docker-compose-test.yml build
docker-compose -f docker/docker-compose-test.yml up

然后我导航到localhost:8080，我的应用程序运行正常。

【讨论】：