SaaS CMS って言った人いますか?

Optimizely の新しい SaaS CMS を使い始める準備はできていますか? その方法の 1 つを次に示します。

目次

どうしたんだ？

エンタープライズ CMS の分野を少しでも監視している方であれば、Optimizely (念のため言っておきますが、私が勤務している会社です) が最新の SaaS CMS をリリースしたことをご存知でしょう。(「最新の」というのは、CMS の SaaS 版という意味です。これは、長年業界をリードしてきた当社の PaaS CMS と同じ基本コードです。)

これについては役に立つ記事やブログがたくさんあります。いくつかチェックしてみてください。 オプティマイズリーワールドこのブログ投稿は、Optimizely の SaaS CMS サービスや新機能 (まったく新しい Visual Builder など) の利点を説明するものではありません。テスト コンテンツや Web サイトのフロントエンドを含む新しい SaaS インスタンスを起動して実行するためのクイックスタート ガイドです。

前提条件

主な前提条件は SaaS インスタンスです。Optimizely Graph インスタンス (Cloudflare Edge 経由でホストされる GraphQL API) も付属します。

このセットアップには、次のものも必要です:

• GitHub アカウント
• Vercelアカウント

バックエンドのセットアップ（別名 CMS セットアップ）

インスタンスを作成したら、初期セットアップは次のようになります。 https://github.com/episerver/cms-saas-vercel-demo/blob/main/docs/cms-config.md (注: この記事の執筆時点では、サンプル サイトのリポジトリは、新しい Visual Builder に対応するためにまだ更新中です)。

1. コンテンツ パックをインポートします。コンテンツ ファイル「MoseyBank.episerverdata」をダウンロードします。 私のSaaSインスタンスから

2. ファイルをCMSにインポートします: CMS > 設定 > インポート

   • コンテンツの保存先: ルート
   • すべての言語を含める

あなたの結果は私の結果と似ているはずです:

3. フロントエンドで使用するAPIクライアントを設定します: CMS > 設定 > APIクライアント

   • クライアントID： フロントエンド [note: you can use anything you want here]
   • クライアントシークレット: 自動生成されます
   • クライアントがユーザーになりすますことを許可する: TRUE

   次に、「作成」をクリックします。クライアント シークレットを必ずコピーして保存してください。二度と表示されません。

フロントエンド – 初期設定

1. Githubにログイン

2. 既存のリポジトリに移動します: https://github.com/episerver/cms-visual-builder-vercel-beta

3. 右上の「フォーク」ボタンをクリックして、リポジトリを自分のアカウントにフォークします。

4. README に詳細が記載されているプロパティを使用して、コンピューター上に新しいテキスト ファイルを作成します。いくつかの注意事項:

   • いくつかの値は、CMS インスタンス > ダッシュボードから取得されます。
   • 「OPTIMIZELY_GRAPH_GATEWAY」は次のようになります。 出典：https://www.optimizely.com/ (ベータ版の URL ではありません)
   • 「OPTIMIZELY_CMS_URL」 – CMSインスタンスのURL（「https://」を含み、末尾のスラッシュは含まない）
   • 「OPTIMIZELY_CMS_CLIENT_ID」と「OPTIMIZELY_CMS_CLIENT_SECRET」は、上記のバックエンド設定時に作成したAPIクライアントの詳細です。

   注意: このファイルには個人情報が含まれているため、Github リポジトリにチェックインしないでください。

Vercelでフロントエンドを設定する

1. Vercelにログイン
2. 新しいプロジェクトを作成 > 元のソリューションのフォーク用の Github リポジトリを選択
3. 上記の手順 4 で作成したファイルをテキスト エディターで開き、すべてのコンテンツを選択してコピーします (Ctrl + C)
4. Vercel で、「環境変数」セクションを展開し、最初のボックスにカーソルを置いて貼り付け (Ctrl + V) を押します。これですべての環境変数が入力されます。
5. Vercel デプロイの SITE_DOMAIN 変数を更新します。
   • SITE_DOMAIN は “$NEXT_PUBLIC_VERCEL_PROJECT_PRODUCTION_URL” である必要があります (引用符なし)
6. 「デプロイ」をクリック
7. ビルドが成功したことを確認する
8. プロジェクト用の Vercel ドメインが作成されたので、CMS でアプリケーションとホスト名を設定します。
   • ドメインを取得するには、Vercel のプロジェクト ページにアクセスしてください。必ず「デプロイメント」ドメインではなく、通常のドメインを使用してください。
   • CMSで、「設定」>「アプリケーション」>「作成」に移動します。
     • アプリケーション名: MoseyBank
     • スタートページ: 先ほどインポートした「Mosey Bank」のホームページを選択します
     • 
   • アプリケーションを作成したら、ホスト名を設定します。
     • vercel からのホスト名
     • ロケール: “en” (これがない場合は、URL に “/en” を含める必要があります)
9. グラフのインデックス作成ジョブを実行します: CMS > 設定 > スケジュールされたジョブ > 「Optimizely Graph Full Synchronization」 — 「開始」をクリックします
10. ジョブが完了したら、Vercel でフロントエンドを再デプロイします。

ならどうしよう？

これで完了です。ページ上のプレビューや、Optimizely の CMS に期待されるその他の優れた機能に加えて、最新の Visual Builder 機能を備えた SaaS CMS サイトが完成しました。

正直に言うと、誕生日ビールを何杯か飲んだ後にこれを書きました（余談ですが、15年間の勤続を認めない会社です おそらく また、誕生日のようなくだらないことは認識しませんが、手順は完全かつ正確であるはずです。私は複数の Github および Vercel アカウントで実行しましたが、毎回成功しました。

とはいえ、セットアップに問題がありますか？ここにコメントを残すか、私または製品チーム、Optimizely OMVPに連絡してください。 Slackで。