collective / training-deploy-project

Plone 6 Deployment Example repository

Plone Deployment Training Example Repo

Initial Setup

• Fork this repo into your Github account
• git clone [email protected]:MYUSER/training-deploy-project.git
• Open in your favorite text editor. ie: cd training-deploy-project && code ./
• Find all occurences of DOCKER_HUB_USER_CHANGE_ME and replace it with your Docker Hub user name

Setup backend

Create a Python virtual environment, install Plone 6.0.0a3 and one addon.

cd backend
make build

Run the Plone Backend instance

make start

In a browser, go to [http://localhost:8080/@@plone-addsite?site_id=Plone&advanced=1](http://localhost:8080/@@plone-addsite?site_id=Plone&advanced=1 and create a new site:

Stop the process

Setup a new frontend project

On the root of this project

npm init yo @plone/volto

Answer the questions:

Project name (e.g. my-volto-project) frontend
Would you like to add addons? True
Addon name, plus extra loaders, like: volto-addon:loadExtra,loadAnotherExtra volto-slate:asDefault
Would you like to add another addon? false

Edit frontend/package.json and change "@plone/volto": "13.15.1", to "@plone/volto": "14.0.0-node16",

And run cd frontend && yarn

Start it with

yarn start

Running everything with docker

make start-images

training-deploy-project's Issues

SSL HTTPS Rewrites

The Nginx Reverse proxy rules doesn't work for classic plone login and downloads(Files,Images, calendar).

training-deploy-project/ansible/files/nginx/default

Line 32 in 86b2aed

rewrite ^(.*) /VirtualHostBase/http/$server_name/Plone/VirtualHostRoot$1 break;

Makefile Conflict in Frontend

Volto project added a Makefile and it would overwrite the frontend Makefile

$ yo @plone/volto 
Getting latest Volto version
Using latest released Volto version: 14.10.0
Retrieving Volto's yarn.lock
? Project name (e.g. my-volto-project) frontend
? Would you like to add addons? false
   create frontend/package.json
   create frontend/yarn.lock
   create frontend/.eslintignore
   create frontend/.eslintrc.js
   create frontend/.yarnrc
 conflict frontend/Makefile
? Overwrite frontend/Makefile? do not overwrite

Enhancement: Ngnix Templates

Newer version Nginix (1.9 or later) allow use of variable substitution using nginux templates

Docker-compose web service

  webserver:
    image: nginx:latest
    volumes:
      - ./files/nginx/templates:/etc/nginx/templates
    depends_on:
      - backend
      - frontend
    ports:
      - "80:80"
    environment:
      - NGINX_HOST=example.com 

Nginx Template

/files/nginx/templates/default.conf.template

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


server {
  listen 80  default_server;
  server_name  ${NGINX_HOST};

  location ~ /\+\+api\+\+($|/.*) {
      rewrite ^/\+\+api\+\+($|/.*) /VirtualHostBase/http/$server_name/Plone/++api++/VirtualHostRoot/$1 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;
  }
}

Docker Compose 2.0 lost --context flag

There is no --context or -c in Docker Compose 2.0. The following still works on Linux and Mac: DOCKER_CONTEXT=contextname docker-compose up -d

training-deploy-project/ansible/Makefile

Line 66 in 9b06106

docker-compose --context vagrant --project-directory project pull

training-deploy-project/ansible/Makefile

Line 70 in 9b06106

docker-compose --context vagrant --project-directory project up -d

Docker: Razzle build 'Webpack' error

Frontend 'make build-image' fails with following build error. It seems webpack is not available in docker builds only. Yarn build successfully completes on local machine. There are no errors.

$ yarn omelette && yarn patches
yarn run v1.22.17
$ ln -sf node_modules/@plone/volto/ omelette
Done in 0.04s.
yarn run v1.22.17
$ /bin/bash patches/patchit.sh > /dev/null 2>&1 ||true
Done in 0.04s.
Done in 238.86s.
Removing intermediate container e1d6cbd070f7
 ---> 37d81c8602db
Step 7/15 : COPY . .
 ---> f1f52f7ed646
Step 8/15 : RUN yarn build
 ---> Running in 20e6291a3aff
yarn run v1.22.17
$ razzle build
internal/modules/cjs/loader.js:905
  throw err;
  ^

Error: Cannot find module 'webpack'
Require stack:
- /usr/src/app/node_modules/mini-css-extract-plugin/dist/index.js
- /usr/src/app/node_modules/mini-css-extract-plugin/dist/cjs.js
- /usr/src/app/node_modules/razzle/config/createConfigAsync.js
- /usr/src/app/node_modules/razzle/scripts/build.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
    at Function.Module._load (internal/modules/cjs/loader.js:746:27)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:101:18)
    at Object.<anonymous> (/usr/src/app/node_modules/mini-css-extract-plugin/dist/index.js:8:39)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/usr/src/app/node_modules/mini-css-extract-plugin/dist/index.js',
    '/usr/src/app/node_modules/mini-css-extract-plugin/dist/cjs.js',
    '/usr/src/app/node_modules/razzle/config/createConfigAsync.js',
    '/usr/src/app/node_modules/razzle/scripts/build.js'
  ]
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
The command '/bin/sh -c yarn build' returned a non-zero code: 1

For PostgreSQL database, restrict remote connections

The default security feature should restrict postgresql remote connections. By default this docker-compose setup will open and allow access from all remote locations.

training-deploy-project/dockerfiles/frontend-backend-postgres.yml

Line 25 in c1726df

db:

Extend Ansible playbook to install prereqs and deploy remotely

Hello all. I attended @ericof training course at Plone Conference 2021 and really enjoyed it! Using docker images to deploy Plone was exactly what I was looking for. Afterwards, I dug deeper into the Ansible implementation and how it could be improved.

1. Installing the prerequisites by hand can be time consuming... so I added a role that does that for you
2. The current ansible playbook only deploys a local vagrantbox... so I added a role that also deploys remotely

I have created a new branch which includes:

3 menu options:

• Build Development Environment
• Deploy Local Staging VM
• Deploy Remote Production VM

4 roles:

• deploy_local
• deploy_remote
• setup_client
• setup_host

Following these steps will now create a 3-tiered Plone solution (dev, staging, production) using Docker images:

• replace DOCKER_HUB_USER_CHANGE_ME with your Docker Hub username
• edit the hosts file to match your desired configuration
• make clean && make setup
• make install + Choose menu option 1 to build the dev environment
• Manually build the backend and frontend, make start-images, make release-images
• make install + Choose option 2 for local deployment
• make install + Choose option 3 for remote deployment

For a training course, it may not be ideal to automate everything, but this new playbook does help get past some hurdles that students can struggle with, as well as freeing up more class time for additional lessons. I built this because I wanted a complete Plone multi-server Docker solution and am submitting it to the collective in hopes it may benefit others as well. Thanks for checking it out!

Prefix http://localhost:3000

After deployment to host with FQDN. All the Volto URLS are constantly prefixed with http://localhost

http://example.org/folder/http://localhost/folder