🧠

Remix + Cloudflare Pages = 簡単Webサイト

2024/02/22に公開

とりあえずCloudflare Pageで自分のサイトを作ってみる

Note

普通に公式のドキュメントを読めばいい気もする。

とりあえずCreate-Cloudflare CLI(C3)でプロジェクトを作成する

c3でプロジェクトを作る.

npm create cloudflare@latest <your-site-name> -- --framework=remix

凄そうなのだが、内部で公式のテンプレートが呼び出されるだけである。

C3というかwranglarというコマンドライン・ツールを使うと, テキストベースでデプロイできるのだが、以下のような注意がきがあった。

Cloudflare Pages are currently only deployable through their Git provider integrations.

まぁやり方がいっぱいないので迷うこともない。

とりあえずプロジェクトをGitHubにホスティングする。

VSCodeからGitHubのプライベート・リポジトリを作った。 mainブランチに変更しておく。

git branch -M main
git push -u origin main

私は以下を参考にした。

Git(GitHub)のデフォルトブランチを改名する

とりあえずDevサーバーを起動する.

おもむろにdevelopmentモードで起動する。十中八九起動できるはず。

npm run dev

プロジェクト直下に.wranglarというのができる。これはコミットするべきなのだろうか?

とりあえずデプロイする

Cloudflares Dashboardは以下のようになっている.

Connect to Gitで上で作成したホスト先を指定できる.

Connect GitHubからリポジトリを選択します。後は自分のリポジトリを個別に選択しました。

Framework presetにRemixを選んでおけばいうことはないと思う。以下のようにSuccessになればデプロイ完了です。

とりあえずドメイン

何もしないと<project-name>.pages.devというドメインで公開されます. 変更したい場合はドメインを買って変更しましょう. 私はcloudflarezで.comを買いました。

同じサービスだから選択肢から選べるのかと思ったが、予想外に手入力だった。

とりあえずまとめ

非常に簡単にデプロイできた。テンプレ・サイトなのでloaderとかでデータをページと結合と貸し出すとエラーが出てくるのかもしれない。Next.jsで良かったのではと思ったし, GitHub Pagesでも良かったのではと思ったが、別の選択肢を取った場合Cloudflare Pagesで良かったのではと思ったに違いない。

終わり。

Discussion