ビルドの高速化(記事数が多い人向け)

記事数が多い人向けにビルドを高速化する方法を説明します。

追加の必要要件

• Nx Cloud

ステップ

1. 下記コマンドを実行し Nx Cloud のアクセストークンを生成します

npm install && npx nx g @nrwl/nx-cloud:init

2. プロジェクトルートにある nx.json を開き accessToken の値をメモします
3. 下記コマンドを実行して nx.json から accessToken を削除します

git checkout -- nx.json

4. ブラウザで Nx Cloud を開いてアカウントを作成しサインインします
5. "Connect a Workspace" を選択します

6. "01 Check for Nx Cloud package" で "Yes, I'm using @nrwl/nx-cloud" を選択します

7. "03 Setup The Access Token" でメモした accessToken を入力し "Connect The Workspace" を選択します

8. "View Your Workspace" を選択したら一度ターミナルに戻ります
9. NOTION_API_SECRET が正しくセットされていることを確認します

echo $NOTION_API_SECRET

設定されていなければ下記のように設定します。

export NOTION_API_SECRET=<YOUR_NOTION_API_SECRET>

10. DATABASE_ID が Cloudflare Pages のビルド環境と同じであることを確認します

echo $DATABASE_ID

異なる場合は同じ値を設定します。

export DATABASE_ID=<YOUR_DATABASE_ID>

11. メモした accessToken を環境変数 NX_CLOUD_ACCESS_TOKEN にセットし、正しくセットされていることを確認します

export NX_CLOUD_ACCESS_TOKEN=<メモしたaccessToken>
echo $NX_CLOUD_ACCESS_TOKEN

12. 下記コマンドを実行してキャッシュを生成します

npm run cache:fetch

13. 再度コマンドを実行しキャッシュが生成されていることを確認します(正常にキャッシュが生成されていると今回は実行が速くなります)

• キャッシュは Notion Page の last_edited_time を見て以降は自動で更新されるため、この操作は再度行う必要はありません

npm run cache:fetch

14. ブラウザで Nx Cloud の Workspace を開きキャッシュの結果が "Local Cache Hit" になっていることを確認します

15. Cloudflare Pages のダッシュボードから環境変数を開き、メモしたアクセストークンを NX_CLOUD_ACCESS_TOKEN として Production と Preview の両方に追加します

16. ビルド設定を開きます

17. "Build command" を下記に変更して保存します

npm run build:cached

18. ブランチを GitHub に push してデプロイし、Nx Cloud でキャッシュの結果が "Remote Cache Hit" になっていることを確認します