Commit ede12d36 authored by Florent Chehab's avatar Florent Chehab
Browse files

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.
parent 1badf978
# In CI we use the latest docker images.
stages: stages:
- check - check
- test - test
...@@ -40,12 +42,9 @@ check_back: ...@@ -40,12 +42,9 @@ check_back:
check_front: check_front:
<<: *only-default <<: *only-default
stage: check stage: check
image: node:10.15.1-alpine image: registry.gitlab.utc.fr/rex-dri/rex-dri/frontend
cache:
paths:
- frontend/node_modules/
before_script: before_script:
- cd frontend && npm i - cd frontend && cp -R /usr/src/deps/node_modules .
script: script:
- npm run build - npm run build
tags: tags:
...@@ -70,12 +69,9 @@ test_back: ...@@ -70,12 +69,9 @@ test_back:
test_frontend: test_frontend:
<<: *only-default <<: *only-default
stage: test stage: test
image: node:10.15.1-alpine image: registry.gitlab.utc.fr/rex-dri/rex-dri/frontend
cache:
paths:
- frontend/node_modules/
before_script: before_script:
- cd frontend && npm i - cd frontend && cp -R /usr/src/deps/node_modules .
script: script:
- npm run test - npm run test
tags: tags:
...@@ -93,12 +89,9 @@ flake8: ...@@ -93,12 +89,9 @@ flake8:
eslint: eslint:
<<: *only-default <<: *only-default
stage: lint stage: lint
image: node:10.15.1-alpine image: registry.gitlab.utc.fr/rex-dri/rex-dri/frontend
cache:
paths:
- frontend/node_modules/
before_script: before_script:
- cd frontend && npm i - cd frontend && cp -R /usr/src/deps/node_modules .
script: script:
- npm run lint - npm run lint
tags: tags:
......
...@@ -13,8 +13,8 @@ services: ...@@ -13,8 +13,8 @@ services:
# Service for the backend app. # Service for the backend app.
backend: backend:
# Get the image from the registry # Get the image from the registry
image: registry.gitlab.utc.fr/rex-dri/rex-dri/backend:latest image: registry.gitlab.utc.fr/rex-dri/rex-dri/backend:v0.1.0
# To use a locally build one, comment above, uncomment bellow. # To use a locally built one, comment above, uncomment bellow.
# build: ./backend # build: ./backend
restart: on-failure restart: on-failure
volumes: volumes:
...@@ -60,13 +60,17 @@ services: ...@@ -60,13 +60,17 @@ services:
# Service to handle frontend live developpments and building # Service to handle frontend live developpments and building
frontend: frontend:
# Build image from Dockerfile # Get the image from the registry
build: ./frontend image: registry.gitlab.utc.fr/rex-dri/rex-dri/frontend:v0.1.0
# On startup, start the developpement server # To use a locally built one, comment above, uncomment bellow.
command: /bin/sh -c "cd frontend && npm i --verbose && npm run dev" # 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: volumes:
# "Copy" the repo to the workdir. # "Copy" the repo to the workdir.
- .:/usr/src/app/ - .:/usr/src/app/
# Ignore local node_modules: we will use the one from the docker image
- /usr/src/app/frontend/node_modules
ports: ports:
# Replicate the node server port. More info in ./frontend/server.js # Replicate the node server port. More info in ./frontend/server.js
- 3000:3000 - 3000:3000
......
...@@ -11,12 +11,11 @@ You can have a look at those files for more comments. ...@@ -11,12 +11,11 @@ You can have a look at those files for more comments.
## Use in Gitlab ## 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`. ## Updating the images on Gitlab
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 image on Gitlab ### The hard / standard way
If you are not connected to the registry yet, do it: If you are not connected to the registry yet, do it:
...@@ -36,9 +35,15 @@ And push it: ...@@ -36,9 +35,15 @@ And push it:
docker push registry.gitlab.utc.fr/rex-dri/rex-dri/backend:latest 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 ## 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__` ## Issues with `__pycache__`
......
# pull official base image of node # pull official base image of node
FROM node:10.15.1-alpine 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 WORKDIR /usr/src/app
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment