"npm run build" in Dockerfile: dist folder is generated but disappears

Question

I have a Dockerfile for a Django and Vue.js app that I use along with Gitlab.

The problem that I'm about to describe only happens when deploying via Gitlab CI and the corresponding .gitlab-ci.yml file. When running the docker-compose up command in my local machine, this doesn happen.

So I run docker-compose up and all the instructions in the Dockerfile run apparently fine. But when I check the production server, the dist folder (where the bundle.js and bundle.css should be stored) doesn't exist.

The logs that are spit out while running the Dockerfile confirm that the npm install and npm run build commands are run, and it even confirms that the dist/bundle.js and dist/bundle.css files have been generated. But for some reason they seem to be deleted.

This is my Dockerfile:

FROM python:3.7-alpine
MAINTAINER My Name

ENV PYTHONUNBUFFERED 1

RUN mkdir /app

# make the 'app' folder the current working directory
WORKDIR /app

# copy project files and folders to the current working directory (i.e. 'app' folder)
COPY ./app .

COPY ./requirements.txt /requirements.txt
RUN apk add --update --no-cache postgresql-client
RUN apk add --update --no-cache --virtual .tmp-build-deps \
      gcc libc-dev linux-headers postgresql-dev
RUN pip install -r /requirements.txt
RUN apk del .tmp-build-deps

# copy both 'package.json' and 'package-lock.json' (if available)
COPY app/frontend/package*.json ./frontend/

# Install npm
RUN  apk add --update nodejs && apk add --update nodejs-npm

# install project dependencies
WORKDIR /app/frontend
RUN npm install

# build app for production with minification
RUN npm run build

RUN adduser -D user
USER user

CMD ["sh ../scripts/entrypoint.sh"]

This is the .gitlab-ci.yml file:

image: docker:latest

services:
  - docker:dind

before_script:
  - echo "Runnig before_script"
  - sudo apt-get install -y python-pip
  - sudo apt-get install -y nodejs
  - pip install docker-compose

stages:
  - test
  - build
  - deploy

test:
  stage: test
  script:
    - echo "Testing the app"
    - docker-compose run app sh -c "python /app/manage.py test && flake8"

build:
  stage: build
  only:
    - develop
    - production
    - feature/gitlab_ci
  script:
    - echo "Building the app"
    - docker-compose build

deploy:
  stage: deploy
  only:
    - master
    - develop
    - feature/gitlab_ci
  script:
    - echo "Deploying the app"
    - docker-compose up --build -d

This is the content of the docker-compose.yml file:

version: "3"

services:
  app:
    build:
      context: .
    ports:
      - "8000:8000"
    volumes:
      - ./app:/app
    command: >
      sh -c "python /app/manage.py runserver 0.0.0.0:8000"
    environment:
      - DB_HOST=db
      - DB_NAME=app
      - DB_USER=postgres
      - DB_PASS=postgres
    depends_on:
      - db
  db:
    image: postgres:10-alpine
    environment:
      - POSTGRES_DB=app
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=postgres

This is the content of the entrypoint.sh file:

#!/bin/bash

(cd .. && ./manage.py collectstatic --noinput)
# Migration files are commited to git. Makemigrations is not needed.
# ./manage.py makemigrations app_name
(cd .. && ./manage.py migrate)

I would like to know why the dist/ folder disappears and how to keep it.

Answer 1

When your docker-compose.yml file says

volumes:
  - ./app:/app

that hides everything that your Dockerfile builds in the /app directory and replaces it with whatever's in your local system. If your host doesn't have a ./app/frontend/dist then your container won't have that path either, regardless of whatever the Dockerfile does.

I would generally recommend just deleting this volumes: block entirely. It introduces an awkward live-development path (where all of your tooling needs to know that the actual service runs in Docker) and simultaneously isn't what you'd run in development (you want the image to be self-contained and not to need to copy the application separately from the image).