Starter ではじめる
このドキュメントはCMSやWebサイトの開発者向けガイドです。開発者コンソールから新しいプロジェクトを立ち上げ、CMSとWebサイトをOrizmに接続する手順を説明します。
以降の作業には開発者コンソールへのログインが必要です。 サポートチームに連絡するか、サインアップ済みのメンバーから招待を受けてください。
プロジェクトの作成
ブラウザで 開発者コンソール にアクセスします。
ログインすると現在のプロジェクト一覧が表示されます。
New project をクリックしてプロジェクトを作成します。
Nameはプロジェクトの識別子です。すべてのOrizmプロジェクトで一意となり、作成後は変更できません。
Create をクリックしてプロジェクトを作成します。
Starterのセットアップ
プロジェクトのホームにStarterをダウンロードする手順が記載されています。この手順に従ってStarterをダウンロードします。ダウンロードしたZIPファイルを任意のディレクトリに展開します。
次にStarterに必要な依存パッケージをインストールします。
pnpm install --frozen-lockfileプロジェクトの設定
作成したプロジェクトの設定を行います。
- プロジェクトページのSettingsタブを開く
- GeneralセクションのCMS SettingsのCMS URLに
http://localhost:3000を設定 - 続けてAllow Originsに
http://localhost:3000を追加 - Saveをクリックして設定を保存
環境変数の設定
Starterに環境変数を設定し、プロジェクトに接続します。
Orizm CLI
Orizm CLIはプロジェクトのデータベースやバケット、認可ルールなどの設定を適用するために使用します。
packages/orizm/.env.x.local ファイルを作成し、以下の内容を設定します。
ORIZM_BASE_URL=https://app.orizm.com
ORIZM_API_KEY=<Developer API Key>
ORIZM_PROJECT=<あなたのプロジェクト名>API キー
CLI が使う Developer API Key を生成します。
開発者コンソールでプロジェクトを開き Settings から Developer Keys を開くことでキーの管理ができます。新しい Developer API Key を作成して環境変数にセットしてください。
プロジェクト名
開発者コンソールでプロジェクトを開き Settings の Project Name セクションを確認します。ここに正確なプロジェクト名が表示されています。
CMS
apps/cms/.env.local ファイルを以下の内容で作成します。
NEXT_PUBLIC_ORIZM_PROJECT=<あなたのプロジェクト名>
ORIZM_CLIENT_ID=<Orizm Console から OAuth Client ID を取得>
ORIZM_CLIENT_SECRET=<Orizm Console から OAuth Client Secret を取得>
NEXTAUTH_SECRET=<ランダムな文字列を設定>ORIZM_CONSUMER_CMS_COMMUNICATION_KEY に関する注意事項
この環境変数はCMSとConsumerの両方で設定します。どちらも必ず同じ値を設定してください。デフォルトでは consumer_cms_communication_key という値が使用されます。本番環境にデプロイする際はデフォルト値ではなくランダムな文字列を使用してください。
openssl rand -base64 32このほかにどのような環境変数があるのか知りたい場合は apps/cms/src/env.ts を参照してください。
OAuth Client の設定
CMSにログインするために必要な設定をします。
開発者コンソールでプロジェクトを開き Settings の OAuth Clients を開きます。ここで OAuth2.0 クライアントの管理ができます。
クライアント Default OAuth2.0 Client を開き Client ID と Client Secret をそれぞれ環境変数 ORIZM_CLIENT_ID と ORIZM_CLIENT_SECRET にセットしてください。
Redirect URIs のセクションにOAuth2認証後に呼び出されるコールバックURLを記述して Save で保存してください。ローカル開発環境の場合は http://localhost:3000/api/auth/callback/Orizm のように指定します。
Consumer
Webサイトのための環境変数を設定します。
OrizmではWebサイトのように、CMSからコンテンツを取得するアプリケーションやAPIを Consumer と呼びます。
apps/consumer/.env.local ファイルを以下の内容で作成します。
NEXT_PUBLIC_ORIZM_PROJECT=<あなたのプロジェクト名>
ORIZM_CONSUMER_KEY=<Consumer API Key>
ORIZM_BASIC_AUTH_USER=<ベーシック認証を使う場合設定>
ORIZM_BASIC_AUTH_PASS=<ベーシック認証を使う場合設定>このほかにどのような環境変数があるのか知りたい場合は apps/consumer/src/env.ts を参照してください。
Consumer API Key を取得
WebサイトからOrizmに保存されたコンテンツにアクセスするには Consumer API Key が必要です。
開発者コンソールでプロジェクトを開き API Keys から Orizm Keys を開くことでキーの管理ができます。
新しい Consumer API Key を作成します。作成前に Allow reading draft content with this key にチェックを入れます。このオプションが有効なAPI Keyは下書きコンテンツにアクセスできます。
作成したAPI Keyを環境変数 ORIZM_CONSUMER_KEY にセットしてください。
Allow reading draft content with this key
が有効なキーはサーバーサイドで使用してください。クライアントサイドで使用するとブラウザの開発者ツールなどを通してWebサイトの閲覧者にキーが漏洩します。クライアントサイドからコンテンツへアクセスする場合は下書きコンテンツへのアクセス権が無効なキーを使用してください。
プロジェクトにスキーマを適用
CMSやWebサイトを立ち上げる前に、プロジェクト上にデータベースやバケット、アクセス権限を適用します。
Orizmでは特別な設定ファイル orizm.config.ts でデータベースのテーブルやデータ構造などのスキーマを定義します。CLIでそれらの設定をプロジェクトに適用します。
以下のコマンドを実行して、プロジェクトにスキーマを適用します。
pnpm run orizm:update成功するとStarterの動作に必要なデータベースが作成されます。開発者コンソールの Tables を開くとテーブルを確認できます。
同時に先ほどのコマンドでスキーマに基づいてTypeScriptの型定義やクライアントコードが生成されます。このコードを使用することでタイプセーフな開発が可能です。
スキーマの適用はせずにコード生成のみ実行する方法もあります。
pnpm run orizm:genStarter では packages/orizm ディレクトリに配置されたサブパッケージ @repo/orizm でプロジェクトのスキーマを管理しています。モノレポの仕組みを通じてCMSやConsumerからこれらを参照します。
Starterを起動
Starterを起動します。以下のコマンドで開発サーバーを実行します。
pnpm run dev起動するとポート 3000 でCMSに、3001 でConsumerにアクセスできるようになります。
| Apps | URL |
|---|---|
| CMS | http://localhost:3000 |
| Consumer | http://localhost:3001 |
招待とログイン
CMSにログインするにはアカウントが必要です。
開発者コンソールでプロジェクトを開き Users タブに移動します。CMSにログインするためのアカウントを管理できます。
あなたのメールアドレスで新しいユーザーを作成してください。
Orizmでは開発者コンソールにログインできる開発者アカウントと、CMSにログインできるユーザーアカウントを別のアカウントとして管理しています。 詳しくは ユーザーモデル についてのページを参照してください。
次は
Orizmを利用した開発の準備が整いました。
CMSやWebサイトをさらにカスタマイズしたり、好きなホスティング環境にデプロイしてください。