たくさんの自由帳

Cloudflare Pages と Next.js(静的書き出し)

投稿日 : | 0 日前

文字数(だいたい) : 3435

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

本題

どうやら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

あとは push すれば動くはずです。以下のように

Imgur

ドメイン

Apexドメイン(サブドメイン以外)を使う場合はCloudflare DNS ???とか言うやつに登録しないといけないらしい。
レジストラではなく、ネームサーバーが変わるだけなのでそこまで大変じゃなさそうな気はする。(何もわからない)

今回はサブドメインを使ってみます。サブドメインの場合はネームサーバーの変更は必要ないらしいです。

Imgur

こんな感じにドメインを入力して

Imgur

自分の DNS プロバイダー を選べば良さそうです。

Imgur

私は Google Domains を使っているので、 DNS の設定を開き、Cloudflare Pagesの指示通りに入力します。

Imgur

ボタンを押した、多分これで待ってれば完了するはず。楽ですね

Imgur

歯磨きから戻ってきたら開けるようになってました!ちゃんと https です!

Imgur

終わりに

よさそう!!!
全然関係ないけど GitHub Actions 失敗したらメールで教えてくれるのね。