CODEWITHSUNDEEP
angulardockercontinuous-integrationgitlab-ci
hiaslosch17
hiaslosch17

Reputation: 67

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

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?

Upvotes: 0

Views: 683

Answers (3)

hiaslosch17
hiaslosch17

Reputation: 67

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?

Upvotes: 0

Roman P.
Roman P.

Reputation: 373

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

Upvotes: 1

Sergio Tanaka
Sergio Tanaka

Reputation: 1435

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?

Upvotes: -1

Related Questions