Merge pull request #478 from GeotrekCE/develop

Develop > Master / 3.2.0

docs/changelog.md

@@ -1,5 +1,54 @@
 # Changelog
 
+3.2.0 (2021-09-30)
+------------------
+
+Requires [Geotrek-rando-v3-installer](https://github.com/GeotrekCE/Geotrek-rando-v3-installer) version 2.0.0 or more.
+
+**💥 Beaking changes**
+
+* New build system to install and customize a Geotrek-rando portal dynamically, without building it locally (#458)
+
+**🛠️ Maintenance**
+
+* Upgrade dependencies (NextJS 10 to 11 and others) (#469)
+
+**✨ Improvements**
+
+* Move download button in header on desktop trek detail pages (#378)
+* Better title and URL for static pages (#468)
+* Add "More information" in trek detail page (#370)
+* Use ``maximumZoomLevel`` parameter for spiderfy clusters (#367)
+* Better 404 error handler for multilanguage (#416)
+* Themes uses portalFilters (#432)
+* Switch advice and labels on trek detail pages (#445)
+* Display parking detail in tooltip on trek detail pages (#400)
+* Add ``<h1>`` on homepage
+
+**🐛 Fixes**
+
+* Don't override multi-day trekking url (#473)
+* Fix crash when there is no label available in this language (#470)
+* Fix tooltip on touristic content detail page (#455)
+* Show line or polygon of touristic contents on search page (#456)
+* Fix default language canonical URL (#476)
+* Deactivate alternate links in meta to avoid 404 (#475)
+
+**⚠️ Version notes**
+
+If you update Geotrek-rando v3, the global Docker process has been updated to avoid the Docker image build on your server :
+
+* Download the version 2.0.0 of [Geotrek-rando-installer](https://github.com/GeotrekCE/Geotrek-rando-v3-installer) 
+(``wget https://github.com/GeotrekCE/Geotrek-rando-v3-installer/archive/v2.0.0.zip``) and unzip it in a new folder
+* Rapatriate your customization in this folder, overriding the default one
+* Eventually create and update the ``.env`` file to define another port from the 8080 default one
+* Make sure your NGINX configuration uses the same port (8080 by default)
+* Install Docker Compose. See its [official documentation](https://docs.docker.com/compose/install/)
+* Launch the application with ``docker-compose up -d``
+* No need anymore to build a Docker image on your server to install or update the configuration of your Geotrek-rando
+* Details in [installation documentation](/docs/installation.md)
+* You can also remove your previous Docker containers and images with launching ``docker container prune`` and ``docker image prune -a``
+
 3.1.3 (2021-09-21)
 ------------------
 
@@ -32,7 +81,7 @@
 3.1.0 (2021-07-02)
 ------------------
 
-**✨ Improvements**
+**🚀 New features**
 
 * Add ``redirects.json`` setting file to manage redirections from Geotrek-rando v2 to Geotrek-rando v3 (#59)
 * Allow to filter results by displayed map area (bbox) and its setting ``enableSearchByMap`` (#383)

docs/customization.md

@@ -145,13 +145,4 @@ You can also add images and other files in the `medias` folder to be used as log
 
 ## Apply changes
 
-After each customization changes, you'll have to rebuild the customized Docker image by running:
-
-```bash
-docker build -t geotrek-rando --build-arg VERSION={YOUR_VERSION} .
-docker ps ## To find previous container ID to stop
-docker stop {CONTAINER_ID}
-docker run --restart unless-stopped -d -p {YOUR_PORT}:80 geotrek-rando
-```
-
-Make sure to remove older images after building new ones, otherwise your server will keep all build and enlarge your machine storage fast.
+After each customization changes, you'll have to restart the Docker container by running `docker-compose restart`.

docs/installation.md

@@ -6,42 +6,42 @@ Install Geotrek-rando on your own computer or server.
 
 ## Global process
 
-![Global process](./assets/geotrek-rando-v3-global-process.jpg)
-
 Before starting the technical installation, here is an overview of the global process:
 - Developers are working on code source of this repository where you will also find the documentation, issues and releases
-- Once they have a new version of the application ready, they will release it, build a prebuild image of this new version and push it in the [packages repository](https://github.com/orgs/GeotrekCE/packages/container/package/geotrek-rando-v3%2Fgeotrek-rando-prebuild)
-- If required, they will also make changes to the dockerfile and customization template in the [installer dedicated repository](https://github.com/GeotrekCE/Geotrek-rando-v3-installer) and release a new version of it
-- Administrators will log in on their host with SSH and install Docker on it
-- They will download an archive of the latest version of the Docker customization repository and extract it on their host
-- They will edit the customization files and build a customized image of the application
-- They will run this customized image in a Docker container that will be available with a web browser through NGINX
+- Once they have a new version of the application ready, they will release it, build a Docker image of this new version and push it in the [packages repository](https://github.com/orgs/GeotrekCE/packages/container/package/geotrek-rando-v3%2Fgeotrek-rando)
+- If required, they will also make changes to the docker-compose file and customization template in the [installer dedicated repository](https://github.com/GeotrekCE/Geotrek-rando-v3-installer) and release a new version of it
+- Administrators will log in on their host with SSH and install Docker and Docker Compose on it
+- They will download an archive of the latest version of the Installer repository and extract it on their host
+- They will edit the customization files
+- They will download the Docker image, run the Docker container with Docker Compose and make it available with a web browser through NGINX
 
 ## Install Docker
 
-You need to have Docker installed on your own computer or server. Docker allows to easily install and update Geotrek-rando on several plateforms (Linux, Windows, macOS).
+You need to have Docker and Docker Compose installed on your own computer or server. Docker allows to easily install and update Geotrek-rando on several plateforms (Linux, Windows, macOS).
 
 - Docker installation documentation is [right here](https://docs.docker.com/engine/install/).
 - You will also need to follow the [post install process](https://docs.docker.com/engine/install/linux-postinstall/) as well to be able to download the Geotrek-rando container with your non-root Linux user.
+- Once Docker is installed, install Docker Compose with following its [installation documentation](https://docs.docker.com/compose/install/).
 
 ## Install Geotrek-rando
 
-You will have to download the prebuilt default Docker image of Geotrek-rando and its customization folder template and build a customized image on your own computer or server.
+You will have to download the Installer of Geotrek-rando and its customization folder template to run the Docker container of Geotrek-rando on your own computer or server.
 
 - Create a folder to install your Geotrek-rando (`/home/myuser/geotrekrando` for instance) and go in this folder
-- On your server download the [Geotrek-rando-installer repository](https://github.com/GeotrekCE/Geotrek-rando-v3-installer) version you want: `wget https://github.com/GeotrekCE/Geotrek-rando-v3-installer/archive/vX.Y.Z.zip` (replace `X.Y.Z` with the version of Geotrek-rando-v3-docker that is compatible with the Geotrek-rando-v3 version you want to use) and unzip it. You can also git clone it (`git pull https://github.com/GeotrekCE/Geotrek-rando-v3-installer.git`)
-- Update the files in the `/customization` folder according to your structure (See [customization](customization.md) documentation)
-- Go in the root folder of your Geotrek-rando-v3-installer and build a [specific version](https://github.com/orgs/GeotrekCE/packages/container/package/geotrek-rando-v3%2Fgeotrek-rando-prebuild) of the Docker image with `docker build -t geotrek-rando --build-arg VERSION={THE VERSION YOU WANT} .` You can add the `-m` option in this command, if you want to limit the memory usage of the build process (`-m 2g` to limit to 2 GB of RAM)
-- Now we want to run the website that we just built and make it available from your server address. To do so run the Docker image on the port you want: `docker run --restart unless-stopped -d -p {YOUR_PORT}:80 geotrek-rando`
-  - Let's explain what this command does step by step
-    - `docker run [options] geotrek-rando` runs the container named geotrek-rando that we've just built
-    - the `-d` option specifies that it should run "deamonized" meaning the container should run in background instead of keeping the terminal window linked to its stdout.
-    - the `-p` option specifies a port mapping between the port you want to connect on your machine to the port the server is running on in the Docker container (here 80). Replace `{YOUR_PORT}` by any available port on your host.
-    ![Doker port mapping](./assets/DockerPortMaping.png)
-    - the `--restart unless-stopped` option specified that unless you stopped the container on purpose, it should restart automatically if something goes wrong.
-- Your website is now available to the address of your server
-
-You can then serve what comes out of your local `{YOUR PORT}` port. To configure NGINX, see below.
+- On your server, download the [Geotrek-rando-installer repository](https://github.com/GeotrekCE/Geotrek-rando-v3-installer) version you want: `wget https://github.com/GeotrekCE/Geotrek-rando-v3-installer/archive/vX.Y.Z.zip` (replace `X.Y.Z` with the version of Geotrek-rando-v3-installer that is compatible with the Geotrek-rando-v3 version you want to use) and unzip it. You can also git clone it (`git pull https://github.com/GeotrekCE/Geotrek-rando-v3-installer.git`)
+- Update the files in the `/customization` folder according to your structure (See [customization documentation](customization.md))
+- Go in the root folder of your Geotrek-rando-v3-installer and run the Docker container with launching `docker-compose up -d`
+- Your Geotrek-rando is now available at the address of your server on 8080 port (e.g. http://myserver:8080)
+
+You can now serve what comes out of the default 8080 port. To configure NGINX, see below.
+
+If you want to have logs directly in terminal you can just run `docker-compose up`. `ctrl`+`c` will exit the command and stop the container. That's why `docker-compose up -d` is used in production to run the service in the background.
+
+After updating customization, you just have to run `docker-compose restart` to apply changes.
+
+You can also create the optional `.env` file based on the example (`cp .env.example .env`), if you want to change the Docker image URL (or run a specific version different from the latest one), the running port, or the `customization` and `medias` folders path. Run `docker-compose down && docker-compose up -d` to apply changes to `.env` file.
+
+If you want to run several Geotrek-rando on the same server, just download one Geotrek-rando-v3-installer for each portal with their own customization and set a different port for each.
 
 ## An example with NGINX
 
@@ -51,7 +51,7 @@ You can then serve what comes out of your local `{YOUR PORT}` port. To configure
 ```bash
 server {
    location / {
-        proxy_pass http://localhost:{YOUR PORT};
+        proxy_pass http://localhost:8080;
         proxy_http_version 1.1;
         proxy_set_header Upgrade $http_upgrade;
         proxy_set_header Connection 'upgrade';
@@ -66,7 +66,7 @@ server {
 }
 ```
 
-Update `{YOUR PORT}` and `{mydomain.fr}` depending on your context.
+Update `{mydomain.fr}` depending on your context. Update the 8080 port if you changed it in the `.env` file.
 
 Make sure to enable it by creating a symbolic link from `sites-enabled` to it with:
 
@@ -75,7 +75,7 @@ ln -s /etc/nginx/sites-available/geotrekrando.conf /etc/nginx/sites-enabled/
 sudo service nginx reload
 ```
 
-Feel free to add https configuration at will.
+Feel free to add https configuration at will. It is required for the PWA mobile version.
 
 Example with Certbot:
 
@@ -88,60 +88,15 @@ sudo apt install python3-certbot-nginx
 sudo certbot --nginx
 ```
 
-You can also open up your web ports thanks to UFW for instance
-
-```bash
-sudo ufw allow https comment 'Open all to access Nginx port 443'
-sudo ufw allow http comment 'Open access Nginx port 80'
-sudo ufw allow ssh comment 'Open access OpenSSH port 22'
-sudo ufw enable
-```
-
-Now you should be able to reach your Geotrek-rando through the default web port of your virtual machine.
-
 ## Update Geotrek-rando version or configuration
 
-After updating configuration or to install a new version of Geotrek-rando, you have to rebuild a new image of Geotrek-rando, stop the old one and run the new one.
-
-- Make sure that there is not a new version of the [Geotrek-rando-docker repository](https://github.com/GeotrekCE/Geotrek-rando-v3-docker) to update the dockerfile or customization folder on your host
-- Build a new Geotrek-rando image with the [desired version](https://github.com/orgs/GeotrekCE/packages/container/package/geotrek-rando-v3%2Fgeotrek-rando-prebuild): `docker build -t geotrek-rando --build-arg VERSION={YOUR_VERSION} .`
-- Check running containers: `docker ps`
-- Stop the old container: `docker stop <CONTAINER_ID>`
-- Run the new image: `docker run --restart unless-stopped -d -p {YOUR_PORT}:80 geotrek-rando`
+After updating configuration or to install a new version of Geotrek-rando, you have to pull the new container of Geotrek-rando, stop and remove the old one and run the new one:
 
-### Manage Docker images storage on disk:
-
-The old images will stay on your system and use disk storage.
-
-To remove images without container associated, you can run `docker image prune -a`.
-You can also run `docker container prune` to remove all stopped containers. Run `docker ps -a` to list all containers on your system.
-
-Use case: after several images built on my server to update and customize my Geotrek-rando, my `/var/lib/docker/vfs` folder had a size of 81 Go! Identified with `sudo du -sh /var/lib/docker/vfs` command. After running `docker container prune` its size was reduced to 14 Go. And after running `docker image prune -a` its size was 7 Go. 🎉
-
-See https://docs.docker.com/config/pruning/ for more details about cleaning unused Dockers objects.
-
-Another method: If you notice a unexpectedly large amount of images remaining on your system when asking Docker for images with the command `docker images -a` (showing all the otherwise hidden intermediate images), you can start from a clean slate and delete all the existing docker images on your system by running:
-`docker rmi $(docker images -a -q) -f`.
-Docker supports subqueries like this one, let's understand it step by step:
-
-- `docker rmi` is the command to delete an image
-- `$()` defines the subquery
-  - `docker images` list images
-  - `-a` (all) specifies that you want to see all of them even the intermediate ones
-  - `-q` (quiet) specifies that you only need to get the images IDs
-- `-f` (force) means you want to bypass docker security preventing you to delete used images
-
-## Debug the output of your Docker container
-
-If something is wrong with your website and you want to see directly what happens on your Docker container you can change the running command to `docker run --restart unless-stopped -it -p {YOUR_PORT}:80 geotrek-rando`.
-Notice we replaced the `-d` option by the `-it` one specifying that we want the container to be interactive(i) and to connect a tty to it so that it will respond to "ctrl-c" command to kill it.
-The fact that we keep connected to the container's stdout comes from ommitting the deamonize option.
-
-If you don't even manage to get your container starting and want to inspect the files inside of it, you can override the entrypoint by running `docker run -it --entrypoint sh geotrek-rando -s`.
-The `--entrypoint sh` option will allow you to replace the server launch command by a simple shell process, you will then be able to navigate in your container.
-Keep in mind that the modification you make will not be saved to the image, therefore you will lose them if you restart your container from the image.
+```sh
+docker-compose pull && docker-compose down && docker-compose up -d
+```
 
-# Install without Docker
+# Install without Docker (not recommended)
 
 If you can't install Docker for some reason, there is also a way to directly deploy the node server to your machines.
 
@@ -187,7 +142,7 @@ PORT=82 && yarn start
 
 ## Process manager
 
-In order to have a more robust solution to serve your node server, our advice is to use [pm2](https://pm2.keymetrics.io/).
+If you installed Geotrek-rando without Docker and in order to have a more robust solution to serve your node server, our advice is to use [pm2](https://pm2.keymetrics.io/).
 
 Here is a quick guide on how to use pm2 with an Ubuntu distribution (Make sure you've installed nodejs and built the project following the previous step)
 

frontend/.eslintrc

@@ -13,10 +13,7 @@
     "plugin:@typescript-eslint/recommended",
     "plugin:@typescript-eslint/recommended-requiring-type-checking",
     "plugin:prettier/recommended",
-    "prettier/react",
-    "prettier/@typescript-eslint",
-    "plugin:testing-library/recommended", // react-testing-libary rules
-    "plugin:testing-library/react", // react-testing-libary rules
+    "prettier",
     "plugin:jest-dom/recommended" // react-testing-libary rules
   ],
   "parser": "@typescript-eslint/parser",

frontend/Dockerfile

@@ -1,5 +1,43 @@
-# ---- Base Node ----
-FROM node:12-alpine3.12 AS base
+# Install dependencies only when needed
+FROM node:alpine AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat g++ gcc libgcc libstdc++ linux-headers make python3
 WORKDIR /app
-COPY . /app
-RUN yarn
+COPY package.json yarn.lock ./
+RUN yarn install --frozen-lockfile
+
+# Rebuild the source code only when needed
+FROM node:alpine AS builder
+WORKDIR /app
+COPY . .
+COPY --from=deps /app/node_modules ./node_modules
+RUN yarn build && yarn install --production --ignore-scripts --prefer-offline
+
+# Production image, copy all the files and run next
+FROM node:alpine AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+
+RUN addgroup -g 1001 -S nodejs
+RUN adduser -S nextjs -u 1001
+
+# You only need to copy next.config.js if you are NOT using the default configuration
+COPY --from=builder /app/next.config.js ./
+COPY --from=builder /app/cache.js ./
+COPY --from=builder /app/config ./config
+COPY --from=builder /app/src/ ./src
+COPY --from=builder /app/node_modules ./node_modules
+COPY --from=builder /app/package.json ./package.json
+RUN chown -R nextjs:nodejs ./src/.next
+
+USER nextjs
+
+EXPOSE 3000
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+CMD ["yarn", "start"]

frontend/config/global.json

@@ -8,7 +8,7 @@
   "apiUrl": "https://geotrekdemo.ecrins-parcnational.fr/api/v2",
   "googleAnalyticsId": null,
   "googleSiteVerificationToken": "eKAyxwaXAobFWQcJen0mnZ8T3CpLoN45JysXeNkRf38",
-  "baseUrl": "https://geotrek-rando-v3-pi.vercel.app",
+  "baseUrl": "http://127.0.0.1:3000",
   "fallbackImageUri": "https://upload.wikimedia.org/wikipedia/fr/d/df/Logo_ecrins.png",
   "touristicContentLabelImageUri": "https://upload.wikimedia.org/wikipedia/fr/d/df/Logo_ecrins.png",
   "applicationName": "Geotrek-rando",

frontend/customization/config/global.json

@@ -8,7 +8,7 @@
   "apiUrl": "https://geotrekdemo.ecrins-parcnational.fr/api/v2",
   "googleAnalyticsId": "G-8FSV2N4FXN",
   "googleSiteVerificationToken": "eKAyxwaXAobFWQcJen0mnZ8T3CpLoN45JysXeNkRf38",
-  "baseUrl": "https://geotrek-rando-v3-pi.vercel.app",
+  "baseUrl": "http://localhost:3000",
   "fallbackImageUri": "https://upload.wikimedia.org/wikipedia/fr/d/df/Logo_ecrins.png",
   "touristicContentLabelImageUri": "https://upload.wikimedia.org/wikipedia/fr/d/df/Logo_ecrins.png",
   "applicationName": "Custom Geotrek",

frontend/customization/config/header.json

@@ -2,7 +2,7 @@
   "menu": {
     "primaryItemsNumber": 3,
     "shouldDisplayFavorite": false,
-    "supportedLanguages": ["fr", "en"],
+    "supportedLanguages": ["fr", "en", "it"],
     "defaultLanguage": "fr"
   },
   "logo": "https://geotrek.ecrins-parcnational.fr/PNX-logo.png"