たくさんの自由帳

Cloudflare Pages と Next.js（静的書き出し）

投稿日 : 2023/5/4 | 0 日前

文字数(だいたい) : 4370

どうもこんばんわ。
目次のところの見た目を若干変えてみました（色変えただけ）

本題

どうやらNetlifyと違って、日本にCDNがあるらしく、（日本からも）読み込みが早いらしい。
このブログはNetlifyにあるわけですが（記述時時点）、もし良さそうなら移行しても良いかも？

適当に Next.js でサイトを作る

作りました。
カラーコードのRGBをぞれぞれ取り出して、明るさを掛け算(0.0~1.0)することで簡易的にちょっと暗い色と明るい色を出すことができるサイトです。
カラーコード明るさとかで調べたらこれが一番早そうだったので...

https://github.com/takusan23/color-code-brightness

Imgur

アカウントを作る

はい。言語設定から日本語が選べます。

Imgur

アカウントを作るとすぐにダッシュボードみたいな画面が開きます。

Imgur

Pages を押す

新しいプロジェクトを押すとこんなのが出る

Imgur

今回はGitHubにあるNext.jsプロジェクトをホスティングしようと思います。
他にもローカルで開発したindex.html / index.css / index.jsをアップロードして公開する方法もあります。お手軽ですね

Imgur

Next.jsを選んだらいい感じにビルドコマンドとかが埋まりました。楽だね

Imgur

ビルドが始まりました！こんな感じ

Imgur

そしたらなんかコケた

SyntaxError: Unexpected token '?'

Node.jsのバージョンが足りない？合ってないらしいので、合わせます。

https://developers.cloudflare.com/pages/platform/language-support-and-tools/

環境変数に入れる方法と、.nvmrcをリポジトリに置く方法（package.jsonと同じフォルダに入れる）がありますが、とりあえず後者でいきます。

手元の開発環境でnode -vしたらv18.13.0だったのでそうしました。

Imgur

これでコミットしてプッシュすると自動でビルドが試行されるはずです。無事ホスティングに成功しました。

Imgur

確かに早い気がする

Netlifyでも同じサイトをホスティングしてみたけど、ちょっとだけCloudflare Pagesのほうが読み込み早い気がする。
良さそう！！！

Imgur

PageSpeed Insights（何使えばいいか知らないのでとりあえず）で測ってみましたが、やっぱCloudflareのほうがSpeed Indexの数値が良いですね。

Imgur

GitHub Actions からホスティングできるか確認

別にCloudflare Pagesのビルド機能で十分なのですが、GitHub Actionsを使ってたのを辞めるのは寂しいので（？？？）（なんか動いてたほうがおもろい←？？？）

https://developers.cloudflare.com/pages/how-to/use-direct-upload-with-continuous-integration/#use-github-actions

ちょうどいい action があった

こちらを使わせてもらいましょう。thx!

https://github.com/cloudflare/pages-action

必要な環境変数を用意する

GitHub Actions で使う機密情報を作りに行きます。
多分2ついる

CLOUDFLARE_API_TOKEN

アカウントページ？を開いた後、APIトークンから作成できます。

Imgur

多分これで良いはず。トークンは一度しか表示されないのでメモ帳とかにすぐにメモしておきましょう。

Imgur

CLOUDFLARE_ACCOUNT_ID

ダッシュボードにログインしたときの、ドメインから後のURLについている(dash.cloudflare.com/ から)値のことらしい。ドキュメントみるとなんか複雑なこと書いてあるけど
（↓ちょうど塗りつぶしたところ）

Imgur

GitHub に登録

ここからできます。
New repositroy secretで追加することが出来ます。

Imgur

GitHub Actions を作る

そのまえに、自動デプロイを止めておきます

Imgur

そしたら以下のようなyamlを書きます。
projectName（Cloudflare Pages 上での名前）とdirectory（出力先のパス）は皆さんのプロジェクトごとに合わせて直してください。

# GitHub Actions から Cloudflare Pages へ公開

# 名前
name: Publish Cloudflare Pages

# 起動条件。pushと手動起動
on:
  push:
  workflow_dispatch:

# やらせること
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      
      # Node.js インストール
      - name: Install Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18.13.0

      # 依存関係
      - name: Package install
        run: npm i
      
      # 書き出し
      - name: Build page
        run: npx next build && npx next export 

      # 公開
      - name: Publish to Cloudflare Pages
        uses: cloudflare/pages-action@v1
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          projectName: color-code-brightness
          directory: out