はじめに
色々詰まったので解決までかかった内容を全て書いておきます。Cloudflare C3を使ってプロジェクトを構築し、あとからGitHubを挟んだデプロイに変更してみます。
詳しくは理解していないので間違っている点あるかもしれないです。
環境
- Ubuntu 22.04
- VirtualBox
（PC自体はWindows 11を使用）
まず最初にPowershellを試して、次にWSLを使ってみたがどちらも失敗してしまった。WSLについてはUbuntuを使ったが、npm createを行うとCMD.exeが起動してしまい、なんやかんやよくわからなかった。
ということでVirtualBoxにした。関連するエラーは以下のリンクに示す。
Ubuntuを入れる
VirtualBoxをインストールして、UbuntuのISOでインストール。
環境構築
apt
suでroot権限を得て、諸々インストールする。
su
sudo apt update
sudo apt upgrade
sudo apt install nodejs
sudo apt install npm
nodeのバージョンアップ
nodeはv12.22.9、npmは8.5.1と古いのでこれで実行するとエラーを吐くので更新を行う。
sudo apt install nodejs npm
sudo npm install n -g
sudo n lts
exit
プロジェクトを作ってみる
npm create cloudflare@latest my-next-app -- --framework=next
後は画面の指示通りに、とりあえずEnterでOK。
deployするか聞かれたときはyesにすると、GitHubを使わずCloudflare C3でダイレクトでデプロイが行われる。一度これでやってみて動作するかを見てみると初めての時はやりやすい気がする。
最初からGitHubでやるという方はNoにしてもできるかも。
てかなんならC3を使わなくてもいけそうな気もするが試していない。C3を使わなくていいならそもそもPowershellで完結できる（はじめにの項で書いた通りのエラーを回避できる）のでやってみたい。
エラーが出る場合
Cannot find module 'semver'というエラーが出たので、以下の記事をもとに解決した。
hash -r
GitHubに変える
リポジトリを作る
先ほど作成したプロジェクトはすでにGitで管理されているのでこれをプッシュする。
git branch -M main
git remote add origin https://github.com/<your-gh-username>/<repository-name>
git push -u origin main
ちなみにプッシュは認証を行う必要があるが、GitHubへのログインはパスワード認証は推奨されていないし多分弾かれる。
初心者だとghを使うと分かりやすい。本当は他の方法も理解しておいた方がいい気がする、SSHとか。
su
sudo apt install gh
exit
gh auth login
後は画面の指示に従うとできる。ブラウザを起動して認証、を選ぶと楽にできる。
Cloudflare Pagesの設定
まずPagesでプロジェクトを作成する。「Pages > プロジェクトを作成 > Gitに接続」。プッシュした先ほどのリポジトリを選択。
次の画面で以下の設定を行う。
| キー | 値 |
|---|---|
| Production branch | main |
| Build command | npx @cloudflare/next-on-pages@1 |
| Build directory | .vercel/output/static |
これでプロジェクトを作るが、この時点ではデプロイは行われてもページの表示は失敗してしまう。nodejs_compat。これについては以下のページで述べられていた。
Pagesのプロジェクトから、「設定 > Functions > 互換性フラグ」にてnodejs_compatを追加して保存します。
まさにこれが抜けていた。追加したらデプロイの再試行。これで表示に成功した。
雑記です。これからまた書き足りない部分を追加しようと思います。