Zenn
🗂

Wix Headlessを試す（1）最小構成のテンプレをデプロイしてみる

2023/07/31に公開
Node.js
Headless CMS
wix
Wix Headless
tech

はじめに

Wix Headlessを試してみました。
今回はテンプレートをそのままデプロイして、Wix側からコレクションの値が取れることを確認しただけです。
フォームも動作しないので、本当にとっかかりだけ作っています。
細かい説明や調査は次回以降で予定しています。

ざっくりとした流れとしては

  • ある程度土台が作成されたテンプレートをダウンロード
  • Wixのサイトをセットアップしソースコードと紐付ける（Client ID)
  • Githubにリポジトリを作成、push
  • NetlifyとGithubを連携
  • GithubにpushするとNetlifyでデプロイされることを確認
  • Netlifyが用意したURLで試用
    といった感じです。

前提

Wix Headlessについては以下を参考にしてください。
Wix Headless

Wixのサイトを１つ作っておく

新規で作る場合は Wix Headless と WixWebsite が選べるようになっています（いつの間に！）
今回は後者にしておきます。
多分前者でも問題ないと思いますが、まだ詳しく試せていません。
Wix Headlessから新規作成するとサイトエディッタが非表示になるなど、従来のページからHeadlessへの移行は想定していても、併用は想定していない印象を受けました。

少し話がそれましたが、「設定」から「Headless設定」に進みます。

OAuthアプリの作成ができるので、Client IDを控えておきます。
IDという名称かつ、値が伏字にもなっていませんが、実質Secretキーのようなもののようです。
適切に管理しましょう。

テンプレートを選択しローカル開発環境を作る

Wix Headlessのページ内のテンプレート一覧からテンプレート選びます。

Wix Headless テンプレート

今回は一番単純そうな非営利組織（NGO）を選択します。

ここで「デプロイ」を押すと簡単にインストールできそうですが、私はハマってしまい諦めました。
かなり時間を無駄にしたので、滔々と苦心した内容を語りたいところですが、それこそ時間の無駄なのでやめておきます。

エンジニアなのでソースコードとReadmeを読む方が楽ということもあり、「リポジトリを見る」からリポジトリに移動し、git cloneして手動？作業することにしました。

リポジトリ関連作業

cloneしたら、.env.templateから、ローカル用のenvを作成し、Client IDを保存します。

git clone https://github.com/wix/wix-cms-nextjs-template.git
cd wix-cms-nextjs-template
cp .env.template .env.local

.envではない点に注意してください。
本番はNetlifyの環境変数で後ほど設定します。
.env.localは gitignoreされており、ローカルでの作業で利用されます。
NEXT_PUBLIC_WIX_CLIENT_IDという定数にCLIENT IDを設定します。

.env.local
# this is a template, copy to .env.local with proper values for local development (do not store API Key in git)
NEXT_PUBLIC_WIX_CLIENT_ID=

GitHubのリポジトリを作成し、pushします。

ローカル環境で動作確認

yarn
yarn dev

これでlocalで動作確認可能になりました。
localhost:3000
でアクセス可能です。

エラーを確認

実際に動かしてみるといくつかエラーが出ます。
私がざっと動かして見ることができたのは以下のようなコレクションに関するエラーです。

動的にコンテンツを表示するため、Wixに接続し取得しようとしたコレクションが作成されていません。
当然です、作っていないので。
特にマイグレーションのようなものが見つからないので、手作業で作成することにしました。

Wixのダッシュボード→CRMから

コレクションを作成で次の項で列挙するコレクションを作成していきます。
（「複数のアイテム」を選択してください）

コレクションの作成

作成するのは以下のコレクションです。
Newsだけフィールド情報を参考程度に記載しましたが、残りは必要であればご自身でソースコードを見ながら調べてください。

  • News
    • title（テキスト）
    • slug（テキスト）
    • short_description(テキスト）
    • long_description（リッチテキスト）
    • image（画像）
    • date （日付、時間フィールドを含む）
  • Our-Team（略）
  • Volunteers（省略）
  • Our-Projects（省略）

フィールドなしで、コレクションだけあれば、とりあえずエラーは消えて一通りのページは確認できるようになります。

また、下記のフィールド名を使う場合、コード側も少し修正が必要です。
long_description → longDescription
short_description→shortDescription
に変更しました。
どうもコレクションのフィールドの値は、ソースコード上ではローアーキャメルケースっぽく変換されてしまうようです。。。

正解ご存知な方教えてください。。。

また、カラムの型については以下を参考にしてください。
コンテンツマネージャー：コレクション内でサポートされているフィールドタイプと制限

Netlify

ここまでで一旦本番にデプロイしてみましょう。

Netlifyの管理画面からサイトを追加します。
Import from Git を選択します。

次にDeploy with Githubを選択します。

先ほど作成し、pushしたリポジトリを選択します。

細かい設定の確認画面が表示されますが、特になければ、Environment variablesだけ
キー名：NEXT_PUBLIC_WIX_CLIENT_ID
値: Client IDで追加してください。
他は必要なければ変更しないでそのまま保存します。
（Environment variablesは後からでも追加変更可能です）

それではローカル作業環境に戻って、変更したコードをcommitし、pushしてみましょう。
少し時間がかかりますが、自動的にdeployされます。

みづらいですが、Site configurationページの２行目位にURLがあるのでサイトをチェックしてみましょう。

動作確認

デプロイ先でもローカル環境同様の動作が確認できました。

次回

今回動かすだけだったので、次回はソースコードを読みながら、仕組みについて詳細を確認したり、ユーザー認証かアプリの機能あたりを１〜２つ検証できればと思います。

現時点ではコレクションの値をとって動的サイトにしただけなので、Supabaseとかと変わりないので、どこら辺メリットがありそうかチェックしたいと思います。

Discussion