ビルド高速化機能の検証に参加する方法

[otoyo]

ビルド高速化機能の検証に参加する方法

[otoyo]

@midnight480 検証ありがとうございます！
環境変数 CACHE_CONCURRENCY のエラーを調べようとしたところ、Notion DB側で列を編集すると全てのページの最終更新日が更新されてキャッシュが切れてしまうことがわかったので、危ないので機能からは外そうと思います（キャッシュがないとNotion APIにリクエストするため）。

その他コメントいただいた点を手順に反映しました！

[midnight480]

（個人的注意ポイント）
自分は、Cloudflareのステージング環境を使っているので、
otoyoさんのRepositoryをrootとして登録しているため、

git fetch root
git checkout -b speedup-build root/feature-speedup-build

で、ブランチを作成しました。

11. で

export NOTION_API_SECRET=hogehoge
echo ${NOTION_API_SECRET}

16. で
    Cloudflareの環境変数 NX_CLOUD_ACCESS_TOKEN

---

（追記７）
環境変数 CACHE_CONCURRENCY を追加したら、次のエラーにハマりました。

00:07:10.091 | > [email protected] cache:fetch
-- | --
00:07:10.091 | > node scripts/blog-contents-cache.cjs
00:07:10.091 |  
00:07:55.343 | exec error: Error: Command failed: NX_BRANCH=main npx nx run astro-notion-blog:_fetch-notion-blocks 33219958-6104-4e79-b5ef-41514c31bf74 2023-01-28T05:10:00.000Z
00:07:55.344 |  
00:07:55.347 | /opt/buildhome/repo/scripts/blog-contents-cache.cjs:74
00:07:55.348 | throw err;
00:07:55.351 | ^
00:07:55.351 |  
00:07:55.351 | Error: Command failed: NX_BRANCH=main npx nx run astro-notion-blog:_fetch-notion-blocks 33219958-6104-4e79-b5ef-41514c31bf74 2023-01-28T05:10:00.000Z
00:07:55.351 |  
00:07:55.352 | at ChildProcess.exithandler (node:child_process:397:12)
00:07:55.352 | at ChildProcess.emit (node:events:390:28)
00:07:55.352 | at maybeClose (node:internal/child_process:1064:16)
00:07:55.352 | at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5) {
00:07:55.352 | killed: false,
00:07:55.352 | code: 1,
00:07:55.353 | signal: null,
00:07:55.353 | cmd: 'NX_BRANCH=main npx nx run astro-notion-blog:_fetch-notion-blocks 33219958-6104-4e79-b5ef-41514c31bf74 2023-01-28T05:10:00.000Z'
00:07:55.353 | }
00:07:55.407 | Failed: build command exited with code: 1
00:07:56.371 | Failed: an internal error occurred

（追記６）
ビルドはステージング環境（ブランチもmainではなく）
環境変数 NX_CLOUD_ACCESS_TOKEN を追加して実施

23:48:31.929 | Cloning repository...
...
23:58:49.323 | ✨ Success! Uploaded 137 files (5 already uploaded) (237.25 sec)
23:58:49.323 |  
23:58:50.051 | ✨ Upload complete!
23:58:51.507 | Success: Assets published!
23:58:52.053 | Success: Your site was deployed!

（追記５）

% yarn build:cached
yarn run v1.22.19
$ npm run cache:fetch && astro build

> [email protected] cache:fetch
> node scripts/blog-contents-cache.cjs

 ████████████████████████████████████████ 100% | ETA: 0s | 85/85
23:28:01 [build] output target: static
23:28:01 [build] Collecting build info...
23:28:01 [build] Completed in 34ms.
23:28:01 [build] Building static entrypoints...
23:28:01 [build] Completed in 694ms.

 building client 

(!) Some chunks are larger than 500 KiB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
Completed in 2.11s.


 generating static routes 
▶ src/pages/index.astro
  └─ /index.html (+16ms)
▶ src/pages/blog/index.astro
  └─ /blog/index.html (+2.84s)
▶ src/pages/blog/page/[page].astro
....
λ src/pages/feed.ts
  └─ /feed (+3ms)
Completed in 166.78s.

23:30:50 [build] 133 page(s) built in 169.63s
23:30:50 [build] Complete!
✨  Done in 234.48s.
% 

---

（追記４）

% yarn cache:fetch
yarn run v1.22.19
$ node scripts/blog-contents-cache.cjs
 ████████████████████████████████████████ 100% | ETA: 0s | 85/85
✨  Done in 72.67s.
% 

---

（追記３）

% yarn cache:fetch                                                           
yarn run v1.22.19
$ node scripts/blog-contents-cache.cjs
 ████████████████████████████████████████ 100% | ETA: 0s | 85/85
✨  Done in 527.18s.
% 

---

（追記２）

export NOTION_API_SECRET　をしていませんでしたmm

---

（追記１）
■確認状況

% echo $DATABASE_ID          
% 
% echo $NX_CLOUD_ACCESS_TOKEN
% 

DATABASE_IDは、ビルド対象のNotionのデータベースID、
NX_CLOUD_ACCESS_TOKENは、Workspace Option > Manage Access Tokens で表示されるIDと一致しているところまでは再度確認しました。

---

12. でエラーになりました。
    NxCloud上ではAPI Token自体は読み込めているのですが、
    ローカルでそのAPI Tokenを使おうとすると認証が通らない... ?

■エラーログ

% yarn cache:fetch           
yarn run v1.22.19
$ node scripts/blog-contents-cache.cjs
@notionhq/client warn: request fail { code: 'unauthorized', message: 'API token is invalid.' }
/Users/tetsuya/Documents/astro-notion-blog/node_modules/@notionhq/client/build/src/errors.js:162
        return new APIResponseError({
               ^

APIResponseError: API token is invalid.
    at buildRequestError (/Users/tetsuya/Documents/astro-notion-blog/node_modules/@notionhq/client/build/src/errors.js:162:16)
    at Client.request (/Users/tetsuya/Documents/astro-notion-blog/node_modules/@notionhq/client/build/src/Client.js:347:54)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async getAllPages (/Users/tetsuya/Documents/astro-notion-blog/scripts/blog-contents-cache.cjs:31:17)
    at async /Users/tetsuya/Documents/astro-notion-blog/scripts/blog-contents-cache.cjs:55:17 {
  code: 'unauthorized',
  status: 401,
  headers: Headers {
    [Symbol(map)]: [Object: null prototype] {
      date: [ 'Mon, 30 Jan 2023 13:40:34 GMT' ],
      'content-type': [ 'application/json; charset=utf-8' ],
      'content-length': [ '87' ],
      connection: [ 'close' ],
      'set-cookie': [
        'notion_browser_id=29168cba-9089-4767-9980-3883cabf99d8; Domain=www.notion.so; Path=/; Expires=Tue, 30 Jan 2024 13:40:34 GMT; Secure',
        'notion_check_cookie_consent=false; Domain=www.notion.so; Path=/; Expires=Tue, 31 Jan 2023 13:40:34 GMT; Secure',
        '__cf_bm=tzUGXX9v.kgjyqA5uvmX6xV7G3fH4iTfxrbl9Wbc_Ms-1675086034-0-AS7kaquvTfcFcWJV4p4TFECNHkjA5oIHztVTHujfryc1ViKRp+SYxQm+NRzA+JvBBMNqrO40T5XydC9CpCJRFe8=; path=/; expires=Mon, 30-Jan-23 14:10:34 GMT; domain=.notion.com; HttpOnly; Secure; SameSite=None'
      ],
      'content-security-policy': [
        "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://gist.github.com https://apis.google.com https://www.google.com https://www.gstatic.com https://cdn.amplitude.com https://api.amplitude.com http://dev-embed.notion.co https://widget.intercom.io https://js.intercomcdn.com https://static.zdassets.com https://api.smooch.io\t https://logs-01.loggly.com https://http-inputs-notion.splunkcloud.com https://cdn.segment.com https://analytics.pgncs.notion.so https://o324374.ingest.sentry.io https://checkout.stripe.com https://js.stripe.com https://embed.typeform.com https://admin.typeform.com https://public.profitwell.com https://static.profitwell.com js.sentry-cdn.com https://js.chilipiper.com https://platform.twitter.com https://cdn.syndication.twimg.com https://accounts.google.com https://www.googletagmanager.com https://www.googleadservices.com https://googleads.g.doubleclick.net https://api-v2.mutinyhq.io https://client-registry.mutinycdn.com https://client.mutinycdn.com https://user-data.mutinycdn.com https://cdn.metadata.io https://platformapi.metadata.io https://d2hrivdxn8ekm8.cloudfront.net https://d1lu3pmaz2ilpx.cloudfront.net https://dvqigh9b7wa32.cloudfront.net https://d330aiyvva2oww.cloudfront.net https://cdn.transcend.io https://cdn01.boxcdn.net https://cdn.sprig.com;connect-src 'self' data: blob: https://msgstore.www.notion.so wss://msgstore.www.notion.so ws://localhost:* ws://127.0.0.1:* https://notion-emojis.s3-us-west-2.amazonaws.com https://s3-us-west-2.amazonaws.com https://s3.us-west-2.amazonaws.com https://notion-production-snapshots-2.s3.us-west-2.amazonaws.com https://cdn.amplitude.com https://api.amplitude.com https://www.notion.so https://api.embed.ly http://dev-embed.notion.co https://js.intercomcdn.com https://api-iam.intercom.io https://uploads.intercomcdn.com wss://nexus-websocket-a.intercom.io https://ekr.zdassets.com https://ekr.zendesk.com\t https://makenotion.zendesk.com\t https://api.smooch.io\t wss://api.smooch.io\t https://logs-01.loggly.com https://http-inputs-notion.splunkcloud.com https://cdn.segment.com https://api.segment.io https://analytics.pgncs.notion.so https://api.pgncs.notion.so https://o324374.ingest.sentry.io https://checkout.stripe.com https://js.stripe.com https://cdn.contentful.com https://preview.contentful.com https://images.ctfassets.net https://www2.profitwell.com https://tracking.chilipiper.com https://api.chilipiper.com https://api.unsplash.com https://boards-api.greenhouse.io https://accounts.google.com https://oauth2.googleapis.com https://www.googletagmanager.com https://analytics.google.com https://www.googleadservices.com https://googleads.g.doubleclick.net https://region1.google-analytics.com https://region1.analytics.google.com https://www.google-analytics.com https://api-v2.mutinyhq.io https://client-registry.mutinycdn.com https://client.mutinycdn.com https://user-data.mutinycdn.com https://cdn.metadata.io https://platformapi.metadata.io https://d2hrivdxn8ekm8.cloudfront.net https://d1lu3pmaz2ilpx.cloudfront.net https://dvqigh9b7wa32.cloudfront.net https://d330aiyvva2oww.cloudfront.net https://cdn.transcend.io https://telemetry.transcend.io https://api.statuspage.io https://pgncd.notion.so https://api.statsig.com https://statsigapi.net https://exp.notion.so https://file.notion.so notion://file.notion.so https://api.box.com https://*.mux.com https://api.sprig.com https://storage.googleapis.com https://cdn.sprig.com https://cdn.userleap.com;font-src 'self' data: https://cdnjs.cloudflare.com https://js.intercomcdn.com https://cdn01.boxcdn.net;img-src 'self' data: blob: https: https://platform.twitter.com https://syndication.twitter.com https://pbs.twimg.com https://ton.twimg.com https://region1.google-analytics.com https://region1.analytics.google.com https://*.mux.com;style-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com https://github.githubassets.com https://js.chilipiper.com https://platform.twitter.com https://ton.twimg.com https://accounts.google.com https://cdn.transcend.io https://cdn01.boxcdn.net;media-src blob: https: http: https://file.notion.so notion://file.notion.so https://*.mux.com;worker-src blob:;frame-src https: http: https://accounts.google.com"
      ],
      'x-dns-prefetch-control': [ 'off' ],
      'x-frame-options': [ 'SAMEORIGIN' ],
      'strict-transport-security': [ 'max-age=5184000; includeSubDomains' ],
      'x-download-options': [ 'noopen' ],
      'x-content-type-options': [ 'nosniff' ],
      'x-permitted-cross-domain-policies': [ 'none' ],
      'referrer-policy': [ 'strict-origin-when-cross-origin' ],
      'x-xss-protection': [ '0' ],
      etag: [ 'W/"57-QCRLT3IovYEW+CkwyJQlFtiXiG8"' ],
      vary: [ 'Accept-Encoding' ],
      'cf-cache-status': [ 'DYNAMIC' ],
      server: [ 'cloudflare' ],
      'cf-ray': [ '791a9ebdca968d18-KIX' ]
    }
  },
  body: '{"object":"error","status":401,"code":"unauthorized","message":"API token is invalid."}'
}

Node.js v18.10.0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[otoyo]

memo:
ハッシュ値が変わってしまうケースがあるので調査する。

ドットファイルが除外されてなさそう。

[otoyo]

👆対応済み 533407c

[nuovotaka]

• キャッシュ生成時間（１回目と２回目）

• ローカルビルド時間

• リモートビルド時間（Vercelを使用）
• Nx Cloud でキャッシュの結果が "Remote Cache Hit" になっていること確認しましたがローカルでのみ上手く動作していましたがリモートは動作していないようでした。
• ちなみにVercelでデプロイすると平均で４−５分でのデプロイになります。(キャッシュロジック無しで)

[otoyo]

検証ありがとうございます。

Nx Cloud でキャッシュの結果が "Remote Cache Hit" になっていること確認しましたがローカルでのみ上手く動作していましたがリモートは動作していないようでした。

これはローカルで cache:fetch を実行した際に "Remote Cache Hit" になっていたということでしょうか？
ローカルで cache:fetch を実行した後に再度 cache:fetch を行ったり build:cached を行った場合には "Local Cache Hit" になるかと思います。
リモートで動作していないというのは何を根拠に判断されたのでしょうか？

ちなみにVercelでデプロイすると平均で４−５分でのデプロイになります。(キャッシュロジック無しで)

それだけ速ければVercelで運用する場合はキャッシュは不要そうですね。

[nuovotaka]

ローカルで cache:fetch を実行した際は 'Local Cache Hit' になりました。
githubにプッシュしデプロイした後 Nx Cloud を確認したところ"Remote Cache Hit"になっていませんでした。

リモートで動作していないというのは何を根拠に判断されたのでしょうか？
Nx Cloud の Workspace を開きキャッシュの結果を確認したところ

[otoyo]

githubにプッシュしデプロイした後 Nx Cloud を確認したところ"Remote Cache Hit"になっていませんでした。

念のため確認ですが、デプロイ後最新のRunで確認されてますか？

[nuovotaka]

リロードして最新のものを利用しましたが、ローカルで行った結果ですね。
今も、githubにプッシュしたブランチを削除してCloudflareで試しましたがNx Cloudの結果がローカルで行った結果以降変わっていません。３時間前のままですね。

[nuovotaka]

ちなみにCloudflareでの結果は。。。

[otoyo]

今も、githubにプッシュしたブランチを削除してCloudflareで試しましたがNx Cloudの結果がローカルで行った結果以降変わっていません。３時間前のままですね。

これはおそらくVercelで環境変数NX_CLOUD_ACCESS_TOKEN が正しく設定されていなさそうです。ご確認いただけますか？

[nuovotaka]

NX_CLOUD_ACCESS_TOKEN トークンの設定していなかったです。
今、CloudflareおよびVercelそれぞれでやり直しを行っているところです。少々お待ちください。

[nuovotaka]

アクセストークンを設定して再度やり直した結果です。

• Vercel デプロイ時間

• Cloudflare デプロイ時間

[nuovotaka]

1. ビルドの成否　＞　成功
2. エラーの場合はエラーメッセージの内容　＞　エラーはなし
3. デバッグに協力いただけるか否か　＞　時間が合えば協力します。
4. ビルドしたブログの記事数とビルドにかかった時間　＞　記事数 : 236
5. 手順でわかりにくかったところ　＞　Vercel, Cloudflare それぞれで環境変数(Nx Cloudのアクセストークン設定の抜け落ち)

以上

[otoyo]

@nuovotaka ご確認ありがとうございます。
やはりVercelのビルドめちゃくちゃ速いですね。見た感じ独自にビルドをキャッシュしてるみたいですね。

手順でわかりにくかったところ　＞　Vercel, Cloudflare それぞれで環境変数(Nx Cloudのアクセストークン設定の抜け落ち)

ここはごもっともですので手順に追加しました。

[otoyo]

みなさまご協力ありがとうございました！