Seeking guidance getting simple Volto-frontend install working behind nginx TLS/SSL

Development Plone 6 UI (Volto)
, ,
6

Thanks for the explanation! Evidently RAZZLE_INTERNAL_API_PATH specifies how the frontend connects with the backend for that initial step that you describe. I looked back at the frontend docker run command on the Containers overview page and the value used there for RAZZLE_INTERNAL_API_PATH, http://backend:8080/Plone, was the solution. (Setting RAZZLE_API_PATH according to that comand breaks things, however.) My bare-bones Plone 6 installation, using the Volto frontend, is now fully operational behind TLS. Yay!!

I'm going to reiterate the configuration, with that setting corrected.

This configuration directly descends from nginx, Frontend, Backend container example, with the addition of LetsEncrypt certs established in the host file system and brought to the docker-composed nginx instance using data volumes. I also use data volumes for the backend storage for easy external access, for persistence and migration.

Note that the configuration depends on backend and frontend being defined as the host where the backend and frontend ports are established. I set them in my hosts file, so the localhost line in my /etc/hosts file looks like: 127.0.0.1 localhost backend frontend

  1. Here's my docker-compose.yml file:

    version: "3"
services:

  webserver:
    image: nginx
    volumes:
      - ./default.conf:/etc/nginx/conf.d/default.conf
      - /etc/letsencrypt:/etc/letsencrypt
    depends_on:
      - backend
      - frontend
    ports:
      - "80:80"
      - "443:443"

  frontend:
    image: plone/plone-frontend:latest
    environment:
      RAZZLE_INTERNAL_API_PATH: <http://backend:8080/Plone>
      CORS_ALLOW_ORIGIN: "*"
      CORS_ALLOW_CREDENTIALS: "true"
    ports:
      - "3000:3000"
    depends_on:
      - backend

  backend:
    image: plone/plone-backend:6.0.0rc1
    environment:
      SITE: Plone
    volumes:
      - /var/local/data/trial/filestorage:/data/filestorage
      - /var/local/data/trial/blobstorage:/data/blobstorage
    ports:
      - "8080:8080"

volumes:
  data: {}

  2. Here’s my adapted nginx default.conf, implementing ssl and forwarding port 80 access to ssl (it’s unchanged from my previous message):

    upstream backend {
  server backend:8080;
}
upstream frontend {
  server frontend:3000;
}

server {
  server_name www.example.com;

  listen 443 ssl; # managed by Certbot
  ssl_certificate /etc/letsencrypt/live/www.example.com/fullchain.pem; # managed by Certbot
  ssl_certificate_key /etc/letsencrypt/live/www.example.com/privkey.pem; # managed by Certbot
  include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
  ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

  location ~ /\\+\\+api\\+\\+($|/.*) {
      #error_log /home/klm/scratch/myrerrlog notice;
      rewrite ^/(\\+\\+api\\+\\+\\/?)+($|/.*) /VirtualHostBase/https/$server_name/Plone/++api++/VirtualHostRoot/$2 break;
      proxy_pass <http://backend>;
  }

  location ~ / {
      location ~* \\.(js|jsx|css|less|swf|eot|ttf|otf|woff|woff2)$ {
          add_header Cache-Control "public";
          expires +1y;
          proxy_pass <http://frontend>;
      }
      location ~* static.*\\.(ico|jpg|jpeg|png|gif|svg)$ {
          add_header Cache-Control "public";
          expires +1y;
          proxy_pass <http://frontend>;
      }
      proxy_set_header        Host $host;
      proxy_set_header        X-Real-IP $remote_addr;
      proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header        X-Forwarded-Proto $scheme;
      proxy_redirect http:// https://;
      proxy_pass <http://frontend>;
  }
}

server {

  listen 80 default_server;
  server_name www.example.com;
  location ~ /\\+\\+api\\+\\+($|/.*) {
      rewrite ^/(\\+\\+api\\+\\+\\/?)+($|/.*) /VirtualHostBase/http/$server_name/Plone/++api++/VirtualHostRoot/$2 break;
      proxy_pass <http://backend>;
      }
   if ($host = www.example.com) {
       return 301 https://$host$request_uri;
   } # managed by Certbot
   return 404; # managed by Certbot
}

Some further details worth noting:

  • I’m using data volumes to share the LetsEncrypt installed and updated certs with the containerized nginx install. I will need to tweak the LetsEncrypt renewed-cert procedure to restart that containerized nginx install, using something like cd dockercompose-dir && docker compose restart webserver.
  • Alternatively, there’s a very promising repository offering a containerized packaging of the LetsEncrypt + nginx facilities: evgeniy-khist/letsencrypt-docker-compose: Nginx and Let’s Encrypt with Docker Compose in less than 3 minutes (github.com)
  • During initial docker composition of the “Plone Volto site: Plone” a banner message includes “THIS IS NOT MEANT TO BE USED IN PRODUCTION”. I would like to know more about why that is, and whether I should rethink basing my site’s install on all this. The page referenced with a link includes this warning: We advise against using this feature on production environments., (in reference to a docker run command), but isn’t particularly illuminating.
3 Likes