Commit ede12d36 authored by Florent Chehab's avatar Florent Chehab

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
Pipeline #38003 passed with stages
in 4 minutes and 44 seconds
# 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:
......
......@@ -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
......
......@@ -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__`
......
# 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
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