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

Question

i want to setup a pipeline in Gitlab CI for an Angular application.

This is my gitlab-ci.yml file:

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

In the stage "build frontend" i build the application and create an artifact in the ./dist folder. This is the folder i want to use for my docker build in the stage "build-image-frontend". The dockerfile "Dockerfile.ci" i use in this stage is the following:

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

The issue i am facing occurs in the last line of the docker file where i want to copy the previously created ./dist folder. I am getting following error:

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

So i guess in the execution of the build docker looks for the dist folder within the container but acutally the dist folder is located in the ${CI_PROJECT_DIR} directory.

Here is the output of the ls before the build(before_script in the buildFrontend stage):

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

How can i copy the dist folder that was generated and stored as artifact in the buildFrontend stage?

is this job is downloading the artifact? paste the output of the ls command please — Sergio Tanaka, May 13 '21 at 13:02
i added the ls output before the cd frontend and the docker build. As you can see there is a dist folder. — hiaslosch17, May 13 '21 at 13:27

Roman P. · Answer 1 · 2021-05-13T20:03:02.303

Your build-image-frontend job does not have the artifacts from the buildFrontend job. You have to add dependencies or needs to your build-image-frontend job to get the artifacts:

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

or

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

score 0 · Accepted Answer · answered May 14 '21 at 06:21

Thank you for the replies, i was able to find the problem. The problem was that i had to add the dist folder to my docker container, which was outside of the build context.

Because the build happened within the frontend folder docker was not aware of the dist folder outside of its build context(because frontend folder and dist folder are on the same level). To work this out i had to start the docker build command like this

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

without changing in the frontend directory before. So i can add the dist folder outside of the build context with the ADD command.

reference: How to include files outside of Docker's build context?

score -1 · Answer 3 · answered May 13 '21 at 13:46

-1

Just use ADD instead of COPY

there is a lot of reference here in the stack like this How to copy folders to docker image from Dockerfile?

answered May 13 '21 at 13:46

Sergio Tanaka

1,325
1
6
18

I am getting the same issue when using add instead of COPY. The problem is that the ./dist folder is not found. I guess the path is set to the docker container so i somehow am not able to add the dist folder to it. I execute the docker build within the frontend foder, so i can not reach the dist folder which i want to copy(dist folder and frontend folder are on the same level in the project-dir as seen in the output of the ls command). – hiaslosch17 May 13 '21 at 14:11

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

3 Answers3