概要

VoltoというReactベースのPlone用(厳密には他でも使える)のSPA実装がある。
以下を参照

Volto というPloneのReactによるフロントエンド実装のインストール方法

手元で簡単に試すために、以下を準備した。

VoltoのDockerイメージ
docker-composeファイル
起動に必要なcfgファイル

準備した物

VoltoのDockerイメージ

docker hub に volto-demo イメージをアップした

docker-composeファイル

Ploneは公式に公開されているイメージを使う。
Voltoは上記のイメージを使う

docker-compose.yml

plone:
  image: plone/plone:5.2.2
  volumes:
    - ./plone-data/filestorage:/data/filestorage
    - ./plone-data/blobstorage:/data/blobstorage
    - ./plone-data/src/:/plone/instance/src/
    - ./custom.cfg:/plone/instance/custom.cfg
  ports:
    - "8080:8080"
  environment:
    ZCML: /plone/instance/custom.cfg
volto:
  image: terapyon/volto-demo
  ports:
    - "3000:3000"
    - "3001:3001"

起動に必要なcfgファイル

custom.cfg

[buildout]
extends = buildout.cfg

develop +=

[instance]
eggs +=
    Plone
    Pillow
    plone.restapi    

zcml-additional =
  <configure xmlns="http://namespaces.zope.org/zope"
             xmlns:plone="http://namespaces.plone.org/plone">
  <plone:CORSPolicy
    allow_origin="http://localhost:3000,http://127.0.0.1:3000"
    allow_methods="DELETE,GET,OPTIONS,PATCH,POST,PUT"
    allow_credentials="true"
    expose_headers="Content-Length,X-My-Header"
    allow_headers="Accept,Authorization,Content-Type,X-Custom-Header"
    max_age="3600"
    />
  </configure>

起動方法

ファイルの設置

適当なフォルダに、上記に書いた2ファイルを置く

docker-compose.yml
custom.cfg

起動コマンド

$ docker-compose up

起動後の作業

重要以下2つの作業

Ploneインスタンスを作る

ブラウザで、 http://localhost:8080 に行き、Ploneインスタンスを作る。
ユーザ名: admin / パスワード: admin
その際に必ず、 Plone というIDで作る必要がある。
(Voltoが接続する先が、 http://localhost:8080/Plone となっているため。(変更には、Voltoの起動コマンドを変更する必要がある。)

plone.restapiを有効化

Ploneの管理画面のアドオンで、 plone.restapi を有効化

以下で動作確認可能

Ploneへのアクセス: http://localhost:8080/Plone
Voltoへのアクセス: http://localhost:3000

データファイル

カレントディレクトリの、 plone-data 以下にPloneのデータが保存される。

TODO

このままだと、Voltoのカスタマイズができないので、カスタマイズ用のフォルダをボリュームとしてマウントするように変更する

更新情報

Voltoのバージョンを 8.9.2 のDocker Imageをアップした (2020年11月11日 )
Plone5.2.2 が使われるようにバージョンの書き換えを行った (2020年11月11日 )