Rework Docker Deployment and add frontend container

.gitlab-ci.yml

@@ -332,14 +332,14 @@ deploy_documentation:
   services:
     - docker:20-dind
   before_script:
-    - docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY
     - docker login -u $DOCKER_LOGIN -p $DOCKER_PASSWORD
-    - cp -r front/dist api/frontend
   script:
 
 docker_publish_stable_release:
   # Publish a docker image for releases
   extends: .docker_publish
+  variables:
+    IMAGE_NAME: funkwhale/$COMPONENT
   rules:
     - if: $CI_COMMIT_TAG && $CI_COMMIT_REF_NAME =~ /^[0-9]+(.[0-9]+){1,2}$/
   script:
@@ -347,32 +347,45 @@ docker_publish_stable_release:
     - ./docs/get-releases-json.py | scripts/is-docker-latest.py $CI_COMMIT_TAG - && export DOCKER_LATEST_TAG="-t $IMAGE_LATEST" || export DOCKER_LATEST_TAG=;
     - export major="$(echo $CI_COMMIT_REF_NAME | cut -d '.' -f 1)"
     - export minor="$(echo $CI_COMMIT_REF_NAME | cut -d '.' -f 1,2)"
-    - cd api
+    - cd $COMPONENT
     - docker buildx create --use --name A$CI_COMMIT_SHORT_SHA
     - docker buildx build --platform $BUILD_PLATFORMS --push -t $IMAGE $DOCKER_LATEST_TAG -t $IMAGE_NAME:$major -t $IMAGE_NAME:$minor .
+  parallel:
+    matrix:
+      - COMPONENT: ["api", "front"]
 
 docker_publish_unstable_release:
   # Publish a docker image for releases
   extends: .docker_publish
+  variables:
+    IMAGE_NAME: funkwhale/$COMPONENT
   rules:
     - if: $CI_COMMIT_TAG && $CI_COMMIT_REF_NAME !~ /^[0-9]+(.[0-9]+){1,2}$/
   script:
     # Check if this is the latest release
-    - cd api
+    - cd $COMPONENT
     - docker buildx create --use --name A$CI_COMMIT_SHORT_SHA
     - docker buildx build --platform $BUILD_PLATFORMS --push -t $IMAGE .
+  parallel:
+    matrix:
+      - COMPONENT: ["api", "front"]
 
-docker_published_non-release:
+docker_publish_non-release:
   # Publish a docker image for each commit on develop
   extends: .docker_publish
+  variables:
+    IMAGE_NAME: funkwhale/$COMPONENT
   only:
     - develop@funkwhale/funkwhale
     - stable@funkwhale/funkwhale
   script:
     - ./scripts/set-api-build-metadata.sh $CI_COMMIT_SHORT_SHA
-    - cd api
+    - cd $COMPONENT
     - docker buildx create --use --name A$CI_COMMIT_SHORT_SHA
     - docker buildx build --platform $BUILD_PLATFORMS --push -t $IMAGE .
+  parallel:
+    matrix:
+      - COMPONENT: ["api", "front"]
 
 docker_all_in_one_release:
   stage: deploy

changes/changelog.d/1822.update

@@ -0,0 +1,24 @@
+
+If you are running the docker deployment, make sure to update our compose file.
+In this small example we show you how to save the old config and update it
+correctly:
+
+```
+export FUNKWHALE_VERSION="1.3.0"
+cd /srv/funkwhale
+docker-compose down
+mv docker-compose.yml docker-compose.bak
+curl -L -o /srv/funkwhale/docker-compose.yml "https://dev.funkwhale.audio/funkwhale/funkwhale/raw/${FUNKWHALE_VERSION}/deploy/docker-compose.yml"
+```
+
+.. note::
+   If you need to customize your nginx template, e.g. to work around `problems with
+   Docker's resolver <https://docs.funkwhale.audio/admin/external-storages.html#no-resolver-found>`_, you can mount your
+   custom nginx configuration into the container. Uncomment the commented volumes in the `nginx` section of your `docker-compose.yml`.
+	 Additionally you need to update the paths in `nginx/funkwhale.template`.
+	 Replace all occurances of `/funkwhale` by `/usr/share/nginx/html`.
+   This loads the templates from your `nginx` folder and overrides the template files in the Docker container.
+
+```
+docker-compose up -d
+```

deploy/docker-compose.yml

@@ -58,7 +58,7 @@ services:
 
   api:
     restart: unless-stopped
-    image: funkwhale/funkwhale:${FUNKWHALE_VERSION:-latest}
+    image: funkwhale/api:${FUNKWHALE_VERSION:-latest}
     networks:
       - default
     depends_on:
@@ -69,13 +69,12 @@ services:
       - "${MUSIC_DIRECTORY_SERVE_PATH-/srv/funkwhale/data/music}:${MUSIC_DIRECTORY_PATH-/music}:ro"
       - "${MEDIA_ROOT}:${MEDIA_ROOT}"
       - "${STATIC_ROOT}:${STATIC_ROOT}"
-      - "${FUNKWHALE_FRONTEND_PATH}:/frontend"
     ports:
       - "5000"
 
-  nginx:
+  front:
     restart: unless-stopped
-    image: nginx
+    image: funkwhale/front:${FUNKWHALE_VERSION:-latest}
     networks:
       - default
     depends_on:
@@ -86,12 +85,15 @@ services:
       # Override those variables in your .env file if needed
       - "NGINX_MAX_BODY_SIZE=${NGINX_MAX_BODY_SIZE-100M}"
     volumes:
-      - "./nginx/funkwhale.template:/etc/nginx/conf.d/funkwhale.template:ro"
+      # Uncomment if you want to use your previous nginx config, please let us
-      - "./nginx/funkwhale_proxy.conf:/etc/nginx/funkwhale_proxy.conf:ro"
+      # know what special configuration you need, so we can support it with out
+      # upstream nginx configuration!
+      #- "./nginx/funkwhale.template:/etc/nginx/conf.d/funkwhale.template:ro"
+      #- "./nginx/funkwhale_proxy.conf:/etc/nginx/funkwhale_proxy.conf:ro"
+
       - "${MUSIC_DIRECTORY_SERVE_PATH-/srv/funkwhale/data/music}:${MUSIC_DIRECTORY_PATH-/music}:ro"
       - "${MEDIA_ROOT}:${MEDIA_ROOT}:ro"
       - "${STATIC_ROOT}:${STATIC_ROOT}:ro"
-      - "${FUNKWHALE_FRONTEND_PATH}:/frontend:ro"
     ports:
       # override those variables in your .env file if needed
       - "${FUNKWHALE_API_IP}:${FUNKWHALE_API_PORT}:80"

front/Dockerfile

@@ -1,14 +1,15 @@
-FROM node:16-buster
+FROM node:16 as builder
+WORKDIR /app
+COPY package.json yarn.lock /app/
+COPY src /app/src/
+COPY scripts /app/scripts
+COPY public /app/public
+COPY vite.config.js index.html embed.html /app/
 
-# needed to compile translations
-RUN apt-get update && apt-get install -y jq
-
-EXPOSE 8080
-WORKDIR /app/
-COPY scripts/ ./scripts/
-ADD package.json yarn.lock  ./
 RUN yarn install
+RUN yarn build:deployment
 
-COPY . .
+FROM nginx:1.21.6-alpine as final
-
+COPY --from=builder /app/dist /usr/share/nginx/html
-CMD ["yarn", "serve"]
+COPY docker/funkwhale.template /etc/nginx/conf.d/funkwhale.template
+COPY docker/funkwhale_proxy.conf /etc/nginx/funkwhale_proxy.conf

front/docker/funkwhale.template

@@ -21,12 +21,12 @@ server {
     # have a look here for let's encrypt configuration:
     # https://certbot.eff.org/all-instructions/#debian-9-stretch-nginx
 
-    root /frontend;
+    root /usr/share/nginx/html;
 
     # If you are using S3 to host your files, remember to add your S3 URL to the
     # media-src and img-src headers (e.g. img-src 'self' https://<your-S3-URL> data:)
 
-    add_header Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self' data:; object-src 'none'; media-src 'self' data:";
+    add_header Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' ${AWS_S3_ENDPOINT_URL} data:; font-src 'self' data:; object-src 'none'; media-src ${AWS_S3_ENDPOINT_URL} 'self' data:";
     add_header Referrer-Policy "strict-origin-when-cross-origin";
     add_header X-Frame-Options "SAMEORIGIN" always;
 
@@ -38,10 +38,10 @@ server {
     }
 
     location /front/ {
-        add_header Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self' data:; object-src 'none'; media-src 'self' data:";
+        add_header Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' ${AWS_S3_ENDPOINT_URL} data:; font-src 'self' data:; object-src 'none'; media-src ${AWS_S3_ENDPOINT_URL} 'self' data:";
         add_header Referrer-Policy "strict-origin-when-cross-origin";
         add_header Service-Worker-Allowed "/";
-        alias /frontend/;
+        alias /usr/share/nginx/html/;
         expires 30d;
         add_header Pragma public;
         add_header Cache-Control "public, must-revalidate, proxy-revalidate";
@@ -52,7 +52,7 @@ server {
         add_header Referrer-Policy "strict-origin-when-cross-origin";
 
         add_header X-Frame-Options "" always;
-        alias /frontend/embed.html;
+        alias /usr/share/nginx/html/embed.html;
         expires 30d;
         add_header Pragma public;
         add_header Cache-Control "public, must-revalidate, proxy-revalidate";

front/package.json

@@ -6,7 +6,7 @@
   "author": "Funkwhale Collective <contact@funkwhale.audio>",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "vite build --mode development",
     "build:deployment": "vite build --base /front/",
     "serve": "vite preview",
     "test:unit": "jest",

front/public/settings.json

@@ -1,6 +1,6 @@
 {
   "additionalStylesheets": [
-    "/front/custom.css"
+    "/custom.css"
   ],
   "defaultServerUrl": null
 }

front/src/store/instance.js

@@ -165,7 +165,7 @@ export default {
       })
     },
     fetchFrontSettings ({ commit }) {
-      return axios.get('/front/settings.json').then(response => {
+      return axios.get('/settings.json').then(response => {
         commit('frontSettings', response.data)
       }, response => {
         logger.default.error('Error when fetching front-end configuration (or no customization available)')

front/vite.config.js

@@ -21,6 +21,7 @@ if (process.env.GITPOD_WORKSPACE_URL) {
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  envPrefix: "VUE_",
   plugins: [
     vue(),
     {