今回やること

第２回では、ブログを動かすためのプロジェクトを作成し、Cloudflare Pages にデプロイして公開するまでの概要を説明します。

本来は、WEBページの開発をローカル環境で行った上で、動作テストを行い、本番環境へデプロイすると思います。

今回は、Cloudflare Pages へのデプロイを大まかに理解する為に、あえてテンプレートファイルそのままをデプロイする流れで説明します。

次回以降で、細かいページの作りこみなどテンプレートファイルを編集して行います。

プロジェクトファイルの作成

Remixでプロジェクトファイルを作成する為、npx create-remix@latestでRemixの新規プロジェクトファイルを作成する方法でも良いですが、Remixの公式テンプレートを使うと便利です。

理由は、簡潔に下記の通りです。

• Cloudfrare Pagesでのデプロイには、wranglerというCLIを用いる必要があり、インストールやその環境設定が必要
• RemixサーバーをNode.jsランタイムからPages Functionで動かすことになる為、その設定変更が必要　など

Remix環境で開発したプログラムをCloudflareで動かす為に、元々のRemixフレームワーク内の様々な依存関係をCloudflareで動く様に設定変更するというイメージです。

Remixの新規プロジェクトファイルから行ってみたい or 現在作っているRemixのプロジェクトファイルのデプロイ先をCloudflareにしたいなどで、上記の設定を手動で行う際は、以下のリンクが参考になると思いますので、載せておきます。

私は、いきなり苦労するとすぐ心が折れるタイプなので、以下の公式テンプレートから作成しました(笑)。

コマンド入力

プロジェクトファイルを作成したいディレクトリまで移動した上で、以下のコマンドを入力します。

npx create-react-router@latest --template remix-run/remix/templates/cloudflare　hogehoge-website

"hogehoge-website" 箇所は、好きなテンプレートファイル名を設定してください。

また、私は、create-remix@latestでプロジェクトファイルを作成したのですが、Remix は React Router に統合され、React Router の公式テンプレートを使うのが推奨されているそうなので、create-react-router@latestで記述しております。（詳しく知りたい方は、参考資料を確認ください）

コマンド実行に、以下の質問をされますので、設定したい環境に合わせて回答してください。

 git   Initialize a new git repository? (recommended)
         ● Yes  ○ No

 deps   Install dependencies with npm? (recommended)
         ● Yes  ○ No 

プロジェクトファイル作成のコマンド実行が成功しましたら、プロジェクトファイルの階層まで移動し、依存パッケージのインストールを行います。

依存パッケージのインストール後に、ローカル環境でテンプレートファイルでデフォルトで作成されているページが開くか確認します。

cd hogehoge-website

npm install

npm run dev

npm run devを実行し、viteの開発用サーバーを起動します。ブラウザでhttp://localhost:5173にアクセスし、以下のようなデフォルトページが表示されるか確認します。

参考資料

RemixのReact Router統合についての詳細はこちら

公式テンプレートの詳細はこちら

GitHub リポジトリにプッシュ

次に、ローカル環境で作成したプロジェクトファイルを GitHub リポジトリにプッシュします。

Cloudflare Pages は GitHub リポジトリと連携して、コードを自動的に取得・デプロイしてくれるので、その準備を進めます。

この記事では、Git及びGitHubの詳しい操作は割愛します。

それらについて分からない方及びGitがインストールされていない方は、以下のサイトが参考になりますので、ご参照ください。

ちなみに私は、vscodeの拡張機能のgitを使ってgit管理をしております。

GitHub側でリポジトリを作成

GitHub側でリポジトリを作成します。

GitHubにログインし、新規リポジトリを作成します。

リポジトリ名を入力し、公開／非公開の設定などを行い、「Create repository」をクリックします。

.gitignore及びREADME.mdについては、テンプレートでプロジェクトファイルを作成する際に自動で作成される為、

テンプレートでプロジェクトファイルを作成した方は、不要の設定で構いません。

ローカルでGitを初期化

プロジェクトフォルダの階層まで移動した後に、以下のコマンドをGitで実行します。

git init

「このフォルダをGit管理するよ」という初期化処理になります。

git add.

git commit -m "first commit"

git add.でファイルを追加し、

git commit -m "first commit"でローカルでのコミットを実行します。

GitHubリポジトリと接続

GitHubで作成した新規リポジトリの画面にでるURLをコピーします。

gitで以下のコマンドを実行し、GitHubリポジトリと接続します。

ユーザー名及びリポジトリ名と記載している箇所は、ご自身で設定されたものになります。

git remote add origin https://github.com/ユーザー名/リポジトリ名

接続する際に、認証処理がありますので、認証処理を行います。

https接続で躓く方は、sshでの接続方法もございます。

私は、ssh接続で接続しておりますが、接続する際の設定などに躓いた経験がありますので、https及びssh接続に関する参考資料リンクを載せておきます。

GitHubリポジトリへプッシュ

GitHub リポジトリへの接続が完了したら、git push を実行してローカルの変更を GitHub に送信します。
これでローカルと GitHub のリポジトリが同期され、Cloudflare Pages がこの内容をデプロイできるようになります。

以下のコマンドを実行します。

git branch -M main
git push -u origin main

git branch -M main は、デフォルトブランチを main に変更します。

git push -u origin main は、GitHub に初回プッシュを行います。（次からは git push でOK）

GitHub確認

GitHubのリポジトリを開いて、ファイルがアップされていることを確認します。

Cloudflare Pages プロジェクト作成

Cloudflare Pagesでプロジェクトを作成し、GitHubにプッシュしたリポジトリを連携して、デプロイしていきます。

まず、Cloudflareのアカウント設定が必要です。私は、Googleアカウントと連携させて使っております。

プロジェクト作成

Cloudflareダッシュボードにアクセスし、ログインします。

左サイドバーのWorkers & Pagesを選択します。

Pagesタブを選択し、既存の Git リポジトリをインポートするの始めるをクリックします。

GitHubに接続をクリックし、GitHubとの認証処理を行います。

ボタンを押すと、GitHubとの認証画面に行くので、パスワードなどを入力し、認証処理を進めます。

GitHubの認証後、以下の画面でリポジトリを選択し、セットアップを開始をクリックします。

セットアップ開始ボタンを押すと、以下の画面に進みます。

フレームワークプリセットでRemixを選択すると、自動でビルド用のコマンドが入力されます。

その他内容に変更が無ければ、保存してデプロイを押します。

ボタンを押すと、ビルド処理が実行され、Cloudflare Pages上にデプロイする処理が実行されます。

デプロイに成功すると、以下の画面が表示されます。

また、今回の記事では、独自ドメインを設定せずに進めましたが、

独自ドメインを設定することも可能です。詳細は、別記事で紹介する予定としています。

独自ドメインを設定しない場合、Cloudflare側で自動でドメインが設定されます。

プロジェクトに進むボタンを押すと、プロジェクトページに進みます。

以後、Cloudflareにログインした際は、本ページからデプロイ済のサイトへアクセスしたり、

デプロイ履歴を確認したりすることができます。

今回テストでGitHubリポジトリ名cloudflare-remix-templateをデプロイしました。

自動でhttps://cloudflare-remix-template.pages.devというドメイン名が付与されていることを確認できます。

初回デプロイ確認

先ほどのプロジェクト画面から実際にデプロイがされているか確認します。

訪問するボタンをクリックします。

以下の様に、https://cloudflare-remix-template.pages.devというドメイン名で、Remixの公式テンプレートで作成したCloudflareのテンプレートプロジェクトファイルで表示されるページが表示されることが確認できます。

まとめ

今回は Cloudflare Pages に GitHub リポジトリを連携し、プロジェクトをデプロイする流れを紹介しました。
GitHub と同期するだけで自動デプロイが行えるのは Cloudflare Pages の大きな魅力です✨

なお、今回はダッシュボードからの操作で進めましたが、wrangler CLI を使ってデプロイする方法もあります。
こちらも今後記事にして紹介していく予定です。

次回以降、テンプレートファイルを活用してブログの各パーツを作り込み、サイトを本格的に仕上げていく工程に入ります。

次回第３回は、ブログページのデザインになるようなUI構成を考えていきます🔥