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

Voltoとは

Volto は、Plone.Reactという名前で開発が進められていました、2018年秋にVoltoという名前に変更になりました。
これは、VoltoはPloneだけの物ではないという意思表示だと言われています。

PloneはPythonでできているオープンソースCMSです。エンタープライズ向けに適用可能な高機能なCMSです。Ploneは標準でRestfull APIを提供しています。この機能の実装としてVoltoは存在しています。

Voltoは、Ploneの持つ機能のすべてをReactベースのフロントエンド実装となっており、一般の閲覧はもちろんのこと、コンテンツの編集はユーザ管理などのCMSの管理画面まですべての機能を提供しようとしています。
また、Pastanaga UI という新しいユーザインターフェースの考え方で実装されています。

インストール方法

このドキュメントは、 Plone Conference 2018 Tokyo で行われた チュートリアルのドキュメント に基づいて 2019年2月現在の情報を元に書いています。

概要

Voltoを導入するには、以下の要素が必要です。

• Plone
  • 4.3 以降 (ここでは5.1がインストールされている事を前提にしています)
  • Plone REST.API の設定
  • Ploneの CORS 設定
• npm関係のツール
  • nvm
  • npm
  • yarn
• Volto

Plone関係の設定

Plone 5.1のインストールは、公式ドキュメントなどを見てください。(必要なら改めてエントリーを書きます)

REST.API

PloneのWeb管理画面で、「アドオン」へ行き、 plone.restapi を導入(適用)する

CORS設定

buildout.cfg の instanceセクションに以下を追記し、buildoutを実行
(localhost 3000ポートで、Voltoを立ち上げる場合)

[instance]
recipe = plone.recipe.zope2instance
...
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>

Note: instanceセクションが見つからない場合 recipe = plone.recipe.zope2instance が書かれているセクションを探してください。そのセクション( [] で始まるブロック) の後半に記述してください。

$ ./bin/buildout -N
$ ./bin/instance restart

npm関係のツール

すでにインストール済みの方は読み飛ばしてください

nvm

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
$ source ~/.nvm/nvm.sh

npm

$ nvm install v8.11.3

yarn

$ npm install -g yarn

Voltoのインストール

コマンドラインツールの導入

$ yarn global add @plone/create-volto-app

Note: 公式ドキュメントによると create-volto-app が実行可能とあります。しかし、.yarn以下にPATHが通っておらずコマンド実行ができました。

PATHを通す

PATH="$HOME/.yarn/bin:$PATH"

プロジェクトファイル群を

$ create-volto-app my-volto-app

以下の様のフォルダができあがります

my-volto-app
├── README.md
├── node_modules
├── package.json
├── .babelrc
├── .eslintrc
├── .gitignore
├── .yarnrc
├── locales
├── public
│   ├── favicon.ico
│   └── robots.txt
├── theme
│   └── theme.config
└── src
    ├── actions
    ├── components
    ├── constants
    ├── customizations
    ├── helpers
    ├── reducers
    ├── client.js
    ├── config.js
    ├── index.js
    └── routes.js

Voltoの起動

$ cd my-volto-app
$ yarn start

Note: kou式ドキュメントには、 3000番ポート が使われるとありますが、管理用ポートとして 3001番ポート も使われます。仮想環境で試す場合には、以下のポートへの接続ができることを確認してください。

• 3000 (Volto)
• 3001 (Voltoの開発モードでjsを読み込む)
• 8080 (Plone)