Step

【2023年】これからブログを始める人へおすすめの書籍

Kissy

Cloudflare Pagesの始め方

作成: 更新:
アイキャッチ

この記事ではCloudflare Pagesにアプリをデプロイする方法を記載しています。

Cloudflare Pagesとは

Cloudflare Pagesは最近人気の静的サイトのホスティングサービスです。無料プランでも十分過ぎる内容で人気が出ています。

Free - 同時に1つのビルド - 月に500回のビルド - 無制限のサイト - 無制限のリクエスト - 無制限の帯域幅

サポートしているフレームワークも豊富です。 - Gatsby - Hugo - Jekyll - Next.js - React - Vue - Angular - Nuxt.js - など (Framework guides)[https://developers.cloudflare.com/pages/framework-guides]

前提

Cloudflare PagesはGitHubリポジトリと連携してアプリをデプロイします。GitHubにプッシュが行われると自動的にビルドが実行され、Cloudflare Pagesにデプロイされます。そのためGitHubアカウントも取得しておく必要があります。

  • Cloudflareアカウント
  • GitHubアカウント

手順

ここでは、Next.jsのジェネレータで作成したアプリをそのままCloudflare Pagesにデプロイする方法を記載します。

  1. [[コマンドプロンプトを開く

  2. プロジェクトを保存するフォルダを作成して移動する

    mkdir MyProject
cd MyProject

  3. アプリのプロジェクトを作成する ジェネレータでアプリを作成します。

    npx create-next-app

  4. VSCodeでプロジェクトフォルダを開く

    cd <プロジェクト名>
code .

    以降はVSCode上で操作します。

  5. ローカルリポジトリを作成する ターミナルで以下のコマンドを実行します。 git init

  6. ローカルリポジトリにコミットする

  7. GitHubリポジトリを作成する GitHubのサイト上でリポジトリを作成します。

  8. GitHubと連携する git remote add origin <リポジトリURL>

  9. アプリをGitHubにプッシュする git branch -M main git push -u origin main

  10. Cloudflare Pagesへアクセスする

  11. [プロジェクトを作成する]をクリックする プロジェクトを作成

  12. [GitHubに接続]をクリックする GitHubに接続

  13. デプロイするリポジトリを選択し、[Install & Authorize]をクリックする リポジトリを選択

  14. GitHubのパスワードを入力し認証する GitHubの認証

  15. デプロイするリポジトリを選択肢、[セットアップの開始]をクリックする セットアップの開始

  16. ビルドとデプロイの設定を行い、[保存してデプロイ]をクリックする ビルドとデプロイの設定

    ・プロジェクト名は任意の名前を入力します。 ・本番環境のブランチは通常「main」を入力します。 ここで入力したブランチにプッシュが行われるとビルドと本番環境へのデプロイが実行されることになります。ここで入力したブランチ以外にプッシュが行われた場合は、プレビュー環境へのデプロイが実行されます。 ・フレームワークにはアプリのフレームワークを入力します。 ・ビルドコマンドとビルド出力ディレクトリは必要に応じて修正します。

  17. デプロイが実行されます デプロイ成功

  18. 完了

エラー時の対処方法

ビルドが失敗すると以下のような画面になります。ビルドログが出力されているのでエラーの内容を確認して対処していきます。

ビルド失敗

Error: Image Optimization using Next.js’ default loader is not compatible with next export.

原因

ジェネレータで作ったNext.jsのアプリはnext/image(<image>タグ)を使用しています。静的HTMLでは画像の最適化(next/image)はサポートしていないためエラーとなります。 ((Basic Features: Image Optimization | Next.js)[https://nextjs.org/docs/basic-features/image-optimization])

対策

<image>を使用せず<img>に変更することで対応します。具体的にはpages/index.jsに以下の２つの修正を行います。

  • next/imageのimportを削除する。 import Image from 'next/image'
  • 以下の<Image>タグを<img>タグに変更する。 <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} /> ↓ <img src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />

最後まで読んでいただきありがとうございます。 また読んでくださいませ。 そんじゃーね。

関連記事

SPONSORED LINK
SPONSORED LINK