From ede12d36ad4601fc1377d08cd143daee6f7747c3 Mon Sep 17 00:00:00 2001 From: Florent Chehab Date: Sun, 7 Apr 2019 22:10:17 +0200 Subject: [PATCH] feat(docker, front): cleaner & more reproducible frontend * The frontend dependencies are now cached in the docker images itself * A little hack is used to restore them when needed ie: the `node_modules` folder is stored outside of the workdir and then brought in * Images are now versioned on the registry * The docker-compose file has been updated to use the new/versioned images. * The documentation has been updated. * And the Gitlab-CI has been tweaked. --- .gitlab-ci.yml | 23 ++++++++--------------- docker-compose.yml | 16 ++++++++++------ documentation/Technologies/docker.md | 15 ++++++++++----- frontend/Dockerfile | 10 +++++++++- 4 files changed, 37 insertions(+), 27 deletions(-) diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index ded013c0..dd3770f9 100644 --- a/.gitlab-ci.yml +++ b/.gitlab-ci.yml @@ -1,3 +1,5 @@ +# In CI we use the latest docker images. + stages: - check - test @@ -40,12 +42,9 @@ check_back: check_front: <<: *only-default stage: check - image: node:10.15.1-alpine - cache: - paths: - - frontend/node_modules/ + image: registry.gitlab.utc.fr/rex-dri/rex-dri/frontend before_script: - - cd frontend && npm i + - cd frontend && cp -R /usr/src/deps/node_modules . script: - npm run build tags: @@ -70,12 +69,9 @@ test_back: test_frontend: <<: *only-default stage: test - image: node:10.15.1-alpine - cache: - paths: - - frontend/node_modules/ + image: registry.gitlab.utc.fr/rex-dri/rex-dri/frontend before_script: - - cd frontend && npm i + - cd frontend && cp -R /usr/src/deps/node_modules . script: - npm run test tags: @@ -93,12 +89,9 @@ flake8: eslint: <<: *only-default stage: lint - image: node:10.15.1-alpine - cache: - paths: - - frontend/node_modules/ + image: registry.gitlab.utc.fr/rex-dri/rex-dri/frontend before_script: - - cd frontend && npm i + - cd frontend && cp -R /usr/src/deps/node_modules . script: - npm run lint tags: diff --git a/docker-compose.yml b/docker-compose.yml index bffcae77..3872c0ae 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -13,8 +13,8 @@ services: # Service for the backend app. backend: # Get the image from the registry - image: registry.gitlab.utc.fr/rex-dri/rex-dri/backend:latest - # To use a locally build one, comment above, uncomment bellow. + image: registry.gitlab.utc.fr/rex-dri/rex-dri/backend:v0.1.0 + # To use a locally built one, comment above, uncomment bellow. # build: ./backend restart: on-failure volumes: @@ -60,13 +60,17 @@ services: # Service to handle frontend live developpments and building frontend: - # Build image from Dockerfile - build: ./frontend - # On startup, start the developpement server - command: /bin/sh -c "cd frontend && npm i --verbose && npm run dev" + # Get the image from the registry + image: registry.gitlab.utc.fr/rex-dri/rex-dri/frontend:v0.1.0 + # To use a locally built one, comment above, uncomment bellow. + # build: ./frontend + # On startup, we retrieve the dependencies from the image and start the developpement server + command: /bin/sh -c "cd frontend && cp -R /usr/src/deps/node_modules . && npm run dev" volumes: # "Copy" the repo to the workdir. - .:/usr/src/app/ + # Ignore local node_modules: we will use the one from the docker image + - /usr/src/app/frontend/node_modules ports: # Replicate the node server port. More info in ./frontend/server.js - 3000:3000 diff --git a/documentation/Technologies/docker.md b/documentation/Technologies/docker.md index c275bf05..8383804d 100644 --- a/documentation/Technologies/docker.md +++ b/documentation/Technologies/docker.md @@ -11,12 +11,11 @@ You can have a look at those files for more comments. ## Use in Gitlab -The `backend` image is also stored on [https://gitlab.utc.fr/rex-dri/rex-dri/container_registry](https://gitlab.utc.fr/rex-dri/rex-dri/container_registry) to be easily used in `Gitlab CI`. +Both images for the `backend` and the `frontend` are stored on [https://gitlab.utc.fr/rex-dri/rex-dri/container_registry](https://gitlab.utc.fr/rex-dri/rex-dri/container_registry) to be easily used in `Gitlab CI` and during development. -As it seemed not possible to do the same for the `frontend` image due to the fact that the `node_modules` folder couldn't be kept during `CI`, the image is basically regenerated in `CI`. -When ran locally, the `npm i` command (installing the `Node` dependencies) is run everytime with `make up` to make sure your `node_modules` folder is up to date. +## Updating the images on Gitlab -## Updating the image on Gitlab +### The hard / standard way If you are not connected to the registry yet, do it: @@ -36,9 +35,15 @@ And push it: docker push registry.gitlab.utc.fr/rex-dri/rex-dri/backend:latest ``` +:warning: images should be versioned with meaningful tags. + +### The automated way + +You can find on [this repo](https://gitlab.utc.fr/rex-dri/ansible/tree/master/build-docker) an `ansible` script that automate the building/pushing of the images from a remote server. Very useful if you have a bad internet connection. + ## Updating the images from Gitlab -To do so, run `make docker-pull`. +To do so, run `make docker-pull`. (this should be automatic on image tag version change) ## Issues with `__pycache__` diff --git a/frontend/Dockerfile b/frontend/Dockerfile index bfa41034..47b5d4ac 100644 --- a/frontend/Dockerfile +++ b/frontend/Dockerfile @@ -1,5 +1,13 @@ # pull official base image of node FROM node:10.15.1-alpine +ENV NODE_ENV = "DEV" -# set up the workdir. +# we cache de dependencies in one location, so that we can reuse them easily +WORKDIR /usr/src/deps + +COPY ./package.json ./package.json +COPY ./package-lock.json ./package-lock.json +RUN npm ci + +# And prepare a clean workdir for the project WORKDIR /usr/src/app -- 2.21.0