Gitlab CI Angular 的管道：构建和发布 docker 未找到图像 ./dst 文件夹

Question

我想在 Gitlab CI 中为 Angular 应用程序设置一个管道。

这是我的gitlab-ci.yml文件：

variables:
    CLI_VERSION: 9.1.4

stages:
    - install_dependencies
    - build
    - test
    - build-image-frontend

cache:
  key: ${CI_COMMIT_REF_SLUG}
  paths:
    - ./frontend/node_modules
    - ./frontend/.npm

buildFrontend:
    stage: build
    image: trion/ng-cli
    before_script:
        - cd frontend
        - npm ci --cache .npm --prefer-offline
    script:
        - ng build --prod
        - mv ./dist ${CI_PROJECT_DIR}
        - echo "after build structure in frontend folder:"
        - ls 
    artifacts:
        expire_in: 1 day
        paths:
            - ./dist
    tags:
        - docker


build-image-frontend:
    stage: build-image-frontend
    image: docker
    services:
        - docker:19.03.12-dind
    before_script:
        - echo "folder before cd:"
        - ls
        - cd frontend
    script:
        - docker build -t frontendproduction -f Dockerfile.ci .
        - docker push frontendproduction
    tags:
        - docker

在 “构建前端” 阶段，我构建了应用程序并在 ./dist 文件夹中创建了一个工件。这是我要在阶段 "build-image-frontend" 中用于我的 docker 构建的文件夹。我在这个阶段使用的docker文件“Dockerfile.ci”如下：

FROM nginx:1.14.1-alpine
COPY ./nginx.conf /etc/nginx/conf.d/default.conf
RUN rm -rf /usr/share/nginx/html/*
COPY ./dist /usr/share/nginx/html

我面临的问题出现在 docker 文件的最后一行，我想在其中复制之前创建的 ./dist 文件夹。我收到以下错误：

Step 4/4 : COPY ./dist /usr/share/nginx/html
COPY failed: stat /var/lib/docker/tmp/docker-builder820618559/dist: no such file or directory

所以我猜想在构建的执行过程中 docker 在容器中查找 dist 文件夹，但实际上 dist 文件夹位于 ${CI_PROJECT_DIR} 目录中。

这是构建前 ls 的输出（before_script 在 buildFrontend 阶段）：

folder before cd:
$ ls
README.md
backend
dist
docker-compose.yml
frontend
package-lock.json

如何复制在 buildFrontend 阶段生成并存储为工件的 dist 文件夹？

Answer 1

只需使用 ADD 而不是 COPY

堆栈中有很多这样的引用 How to copy folders to docker image from Dockerfile?

Answer 2

您的 build-image-frontend 作业没有来自 buildFrontend 作业的工件。您必须将 dependencies 或 needs 添加到您的 build-image-frontend 作业中才能获得工件：

build-image-frontend:
    needs: ["buildFrontend"]
    stage: build-image-frontend
    image: docker
    services:
        - docker:19.03.12-dind
    before_script:
        - echo "folder before cd:"
        - ls
        - cd frontend
    script:
        - docker build -t frontendproduction -f Dockerfile.ci .
        - docker push frontendproduction
    tags:
        - docker

或

build-image-frontend:
    dependencies:
      - buildFrontend
    stage: build-image-frontend
    image: docker
    services:
        - docker:19.03.12-dind
    before_script:
        - echo "folder before cd:"
        - ls
        - cd frontend
    script:
        - docker build -t frontendproduction -f Dockerfile.ci .
        - docker push frontendproduction
    tags:
        - docker

Answer 3

感谢您的回复，我找到了问题所在。问题是我必须将 dist 文件夹添加到我的 docker 容器中，它在构建上下文之外。

因为构建发生在前端文件夹内 docker 不知道其构建上下文之外的 dist 文件夹（因为前端文件夹和 dist 文件夹在同一级别）。为了解决这个问题，我必须像这样启动 docker 构建命令

docker build -t frontendproduction -f frontend/Dockerfile.ci .

之前在前端目录中没有更改。所以我可以使用 ADD 命令在构建上下文之外添加 dist 文件夹。

参考： How to include files outside of Docker's build context?

Gitlab CI Angular 的管道：构建和发布 docker 未找到图像 ./dst 文件夹

Gitlab CI Pipeline for Angular: Build and Publish docker Image ./dst folder not found

continuous-integration

docker

gitlab-ci

angular