Add Dockerfile and CI Docker Hub deployment (fixes #16)

.dockerignore

@@ -0,0 +1,7 @@
+docs/
+.git/
+.idea/
+dist/
+node_modules/
+*.md
+LICENSE

.gitlab-ci.yml

@@ -5,6 +5,12 @@ stages:
 
 variables:
   CYPRESS_CACHE_FOLDER: '$CI_PROJECT_DIR/cache/Cypress'
+  DOCKER_BUILDKIT: 1 # use buildkit for better performance
+  DOCKER_DRIVER: overlay2 # better docker driver to avoid copying too many files on each run
+  GITLAB_REGISTRY: registry.gitlab.com # We use docker.io for official images and gitlab's registry to store temporary images
+  IMAGE_NAME: geovisio/api
+  CI_IMAGE_CACHE: $GITLAB_REGISTRY/$IMAGE_NAME:build_cache
+  DOCKER_TLS_CERTDIR: ""
 
 before_script:
   ## chmod is unfortunately currently mandatory : https://github.com/nodejs/docker-node/issues/661
@@ -58,3 +64,71 @@ deploy:
     - yarn install
     - yarn upgrade geovisio@develop
     - yarn build
+
+deploy:develop:
+  rules:
+    # run job only for fork that have the credentials to pull images from the gitlab-registry
+    # and only for merge on 'develop' branch
+    - if: $CI_DEPLOY_PASSWORD == null || $CI_DEPLOY_USER == null
+      when: never
+    - if: $CI_COMMIT_REF_SLUG == "develop"
+  stage: Deploy
+  image: docker:latest
+  services:
+      - docker:dind
+  before_script:
+    # login to the gitlab docker registry to use the cache and to publish
+    - echo $CI_DEPLOY_PASSWORD | docker login -u $CI_DEPLOY_USER --password-stdin $GITLAB_REGISTRY
+    - docker buildx create --use --name "geovisio-image-builder" --driver=docker-container # use docker-container driver to be able to publish a full cache
+    # login to dockerhub
+    - echo $CI_REGISTRY_PASSWORD | docker login -u $CI_REGISTRY_USER --password-stdin $CI_REGISTRY
+  script:
+    # build image using repository as cache
+    - docker buildx build
+      --cache-from "type=registry,ref=$CI_IMAGE_CACHE"
+      --cache-to "type=registry,mode=max,ref=$CI_IMAGE_CACHE"
+      --tag "$CI_REGISTRY_IMAGE:develop"
+      --label "org.opencontainers.image.title=$CI_PROJECT_TITLE"
+      --label "org.opencontainers.image.url=$CI_PROJECT_URL"
+      --label "org.opencontainers.image.created=$CI_JOB_STARTED_AT"
+      --label "org.opencontainers.image.revision=$CI_COMMIT_SHORT_SHA"
+      --load
+      --progress=plain
+      .
+
+    # publish image to dockerhub with the develop tag
+    - docker push "$CI_REGISTRY_IMAGE:develop"
+
+deploy:latest:
+  # we consider that tag always land on main
+  # and they always should publish a tagged image and the `latest` docker image
+  only:
+    - tags
+  stage: Deploy
+  image: docker:latest
+  services:
+      - docker:dind
+  before_script:
+    # login to the gitlab docker registry to use the cache and to publish
+    - echo $CI_DEPLOY_PASSWORD | docker login -u $CI_DEPLOY_USER --password-stdin $GITLAB_REGISTRY
+    - docker buildx create --use --name "geovisio-image-builder" --driver=docker-container # use docker-container driver to be able to publish a full cache
+    # login to dockerhub
+    - echo $CI_REGISTRY_PASSWORD | docker login -u $CI_REGISTRY_USER --password-stdin $CI_REGISTRY
+  script:
+    # build image using repository as cache
+    - docker buildx build
+      --cache-from "type=registry,ref=$CI_IMAGE_CACHE"
+      --cache-to "type=registry,mode=max,ref=$CI_IMAGE_CACHE"
+      --tag "$CI_REGISTRY_IMAGE:$CI_COMMIT_REF_NAME"
+      --tag "$CI_REGISTRY_IMAGE:latest"
+      --label "org.opencontainers.image.title=$CI_PROJECT_TITLE"
+      --label "org.opencontainers.image.url=$CI_PROJECT_URL"
+      --label "org.opencontainers.image.created=$CI_JOB_STARTED_AT"
+      --label "org.opencontainers.image.revision=$GIT_DESCRIBE"
+      --load
+      --progress=plain
+      .
+
+    # publish image to dockerhub
+    - docker push $CI_REGISTRY_IMAGE:$CI_COMMIT_REF_NAME
+    - docker push $CI_REGISTRY_IMAGE:latest

Dockerfile

@@ -0,0 +1,26 @@
+FROM node:18.16.0-alpine
+
+WORKDIR /opt/geovisio
+
+# Import dependencies files
+COPY package.json yarn.lock ./
+
+# Install NodeJS dependencies
+RUN yarn install
+
+# Import source code
+COPY static ./static
+COPY src ./src
+COPY *.json *.js *.ts *.html ./
+
+# Build code
+RUN yarn build
+
+# Environment variables
+ENV PORT=3000
+ENV VITE_INSTANCE_NAME="GeoVisio/Docker"
+ENV VITE_API_URL="https://panoramax.ign.fr/"
+
+# Expose
+EXPOSE 3000
+CMD ["yarn", "start"]

docs/02_Setup.md

@@ -1,6 +1,15 @@
 # Setup
 
-## System requirements
+GeoVisio website can be installed through classic method, or using Docker.
+
+__Contents__
+
+[[_TOC_]]
+
+
+## Classic install
+
+### System requirements
 
 **You need to have [Nodejs installed](https://nodejs.org/en/download)**
 Node version : >=18.13.0
@@ -9,7 +18,7 @@ Node version : >=18.13.0
 
 You can use npm or [yarn](https://yarnpkg.com/) as package manager
 
-## Install
+### Install
 
 The website can be installed locally by retrieving this repository and installing dependencies:
 
@@ -22,7 +31,7 @@ cd website/
 npm install
 ```
 
-## Build for production
+### Build for production
 
 Before building, you need to define a bit of settings. At least, you have to create a `.env` file and edit its content.
 
@@ -41,6 +50,31 @@ PORT=3000 npm run start
 
 The website is now available at [localhost:3000](http://localhost:3000).
 
+
+## Docker setup
+
+The [Docker](https://docs.docker.com/get-docker/) deployment is a really convenient way to have a Geovisio website running in an easy and fast way. Note that this setup documentation only covers __GeoVisio front-end__ (website), if you also need an API running, please refer to [Docker API deployment](https://gitlab.com/geovisio/api/-/blob/develop/docs/14_Running_Docker.md).
+
+You can use the provided __Docker Hub__ `geovisio/website:latest` image directly:
+
+```bash
+docker run \
+	-e VITE_API_URL="https://your.geovisio.api/" \
+	-p 3000:3000 \
+	--name geovisio-website \
+	-d \
+	geovisio/website:latest
+```
+
+This will run a container bound on [localhost:3000](http://localhost:3000).
+
+You can also build the image from the local source with:
+
+```bash
+docker build -t geovisio/website:latest .
+```
+
+
 ## Next steps
 
 You can check out [the available settings for your instance](./03_Settings.md).