Zenn
🐥

はじめての Pages: Cloudflare Pages で チュートリアルの Static な HTML ホスティングをやってみる

2023/03/02に公開
Cloudflare
tech

今までWorkersで様々なストレージと連携するオプションのサンプルコードを中心とした記事を書いてきましたが、今日はPagesの簡単な内容です。題して「はじめてのPages」

Cloudflare Pagesはフロントエンド開発者が協力してウェブサイトをデプロイするためのJAMstackプラットフォームです。Gitとの簡単な統合やCloudflareのエッジネットワークへのDeployが簡単に行えることが特徴です。

Cloudflare Workersは、Node.jsをネイティブでサポートしていませんが、Pagesは異なり、Node.jsをサポートし、React,Next.js,Nuxt.js,Vue,Vite,Honoなど著名なフレームワークを実行できます。

Cloudflare 公式ドキュメントに簡単な手順がありますが、英語なのと少し慣れていないと難しいと思いますので以下にStep-by-Stepの手順を書きます。Cloudflareが準備するデフォルトドメイン(pages.dev)であれば無償で試せますので、興味がある方は試してみてください。

それではやってみます。

１．GitHubの設定
GitHubにまずはレポジトリを作ります。作成方法等GitHubの使い方はこの記事では対象外とします。
以下の内容でindex.htmlを作ってレポジトリ直下にアップロードしておいてください。

<html>
<head>
<title>Hello World from Pages</title>
</head>
<body>
<h1>Hello World from Pages</h1>
</body>
</html>

以下の例ではPagesというレポジトリを作成しアップロードしています。

  1. PagesのInit




    Pagesは、GitHub連携のほかにファイルの直接アップロードやWrangler経由でもコンテンツをPagesへアップロードすることは可能ですが、ここではGitHub連携を行います。
    まず、"Create a project"を押します。
    "Connect to git"を押しましょう。

ブラウザでGitHubにログインしていれば以下の画面が出るはずです。出てこない場合、先にGitHubにログインしてやり直してみてください。

これでアカウントがセットされたので、先ほど作成したレポジトリを選択し"Begin Setup"を押します。

適当なプロジェクト名を付けブランチをmainとして"Save and Deploy"を押します。

実行環境フレームワークなど配下のように選択可能ですが、今回はStaticなHTMLを使いますので、"None"のままで大丈夫です。

余談：GitHub関連ではMasterを使うケースとMainを使うケースがありますが、技術的に特に違いがあるわけではありません。Masterは数年前に発生した人種差別に根差す問題に起因する言葉（Master - Slave (つまり、奴隷））であり利用がよろしくないという事で今は新規の場合Mainを使うことがデフォルトとなっています。

実はこれだけで本番環境へのデプロイが完了します。簡単ですね。

勿論いきなり本番環境へのデプロイを行いたくないケースもあります。そういう時は、Settingsタブの"Branch Deployments"機能で設定変更することが可能で、Preview環境へのデプロイなどをコントロールすることが可能です。それについてはまた別の記事でご紹介したいと思います。

デプロイが完了すると、URLが表示されますので、クリックすると"Hello World"が表示されます。

3.Workersとの連携
Pagesは勿論Workersと連携することが様々な処理を実装することが可能です。公式のサンプルをやってみましょう。HTMLベースで簡単な申し込みフォームをPagesでホスティングし、その内容をWorkersがJSON化して出力します。

以下の手順はgitコマンドが入っている前提です。
まず以下のgitコマンドを実行します。

mkdir new-project
cd new-project
git init
git remote add origin git@github.com:<username>/<repo>.git
git branch -M main

"<username>/<repo>"は私の作業環境だと"harunobukameda/Pages"になります。

新しくできた"new-project"フォルダに以下のファイルを"public/index.html"で作成します。

<html lang="en">
  <head>
    <meta charset="utf8" />
    <title>Form Demo</title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
  </head>
  <body>
    <form method="POST" action="/api/submit">
      <div class="input">
        <label for="name">Full Name</label>
        <input id="name" name="name" type="text" />
      </div>

      <div class="input">
        <label for="email">Email Address</label>
        <input id="email" name="email" type="email" />
      </div>

      <div class="input">
        <label for="referers">How did you hear about us?</label>
        <select id="referers" name="referers">
          <option hidden disabled selected value></option>
          <option value="Facebook">Facebook</option>
          <option value="Twitter">Twitter</option>
          <option value="Google">Google</option>
          <option value="Bing">Bing</option>
          <option value="Friends">Friends</option>
        </select>
      </div>

      <div class="checklist">
        <label>What are your favorite movies?</label>
        <ul>
          <li>
            <input id="m1" type="checkbox" name="movies" value="Space Jam" />
            <label for="m1">Space Jam</label>
          </li>
          <li>
            <input id="m2" type="checkbox" name="movies" value="Little Rascals" />
            <label for="m2">Little Rascals</label>
          </li>
          <li>
            <input id="m3" type="checkbox" name="movies" value="Frozen" />
            <label for="m3">Frozen</label>
          </li>
          <li>
            <input id="m4" type="checkbox" name="movies" value="Home Alone" />
            <label for="m4">Home Alone</label>
          </li>
        </ul>
      </div>

      <button type="submit">Submit</button>
    </form>
  </body>
</html>

このHTMLでは

<form method="POST" action="/api/submit">

によりフォームに入力されたの内容が"/api/submit"にPOSTされます。
次にこれを受け取る部分をWorkersで作りますが、PagesのWorkersは今まで作業を行った環境ではなく、Pagesの中で設定を行います。

Pagesは"functions"というフォルダにスクリプトを配置することでWorkresが動作します。"functions"フォルダの下に"api/submit.js"を作成し以下の内容で保存します。

/**
 * POST /api/submit
 */
export async function onRequestPost(context) {
  try {
    let input = await context.request.formData();
    let pretty = JSON.stringify([...input], null, 2);
    return new Response(pretty, {
      headers: {
        'Content-Type': 'application/json;charset=utf-8',
      },
    });
  } catch (err) {
    return new Response('Error parsing JSON content', { status: 400 });
  }
}

VSCodeだとこのように表示されていれば大丈夫です。

このスクリプトでは単純にformで入力された値をJSON.stringifyでJSON可化させ、画面に出力します。

4.Deploy
いよいろGitHubへアップロードし、デプロイを行います。先ほどのHello Worldと同様にデプロイした時点で自動でデプロイが行われます。
以下のコマンドを実行してください。

git add -A
git commit -m "working example"
git push -u origin main

 ! [rejected]        main -> main (non-fast-forward)

こんなエラーが出た方はpushコマンドに -fオプションを付けて再度実行してみて下さい。

普段gitを使っていない方は認証関連のエラーが出ると思います。

これは正しい認証がGitレポジトリに対して行われていないため、ローカルで作ったものをアップロードできないためです。
以下の手順を行えば解決します。
GitのSettings(右上の以下の部分）をクリックします。


"SSH and GPG keys"をクリックします。

"New SSH Key"を押します。
タイトルに適当な名前を入れます。
ローカルのターミナルで以下のコマンドを実行します。

ssh-keygen

以下を参考にして値を設定します。名前は何でもOKです。この例ではパスフレーズを空欄にしていますが、商用環境ではもちろん進められませんので注意してください。

"id_rsa.pub"というファイルを開いてその中身をCloudflareマネージメントコンソールにコピーします。(この例だと/newproject/と同じ位置に./sshというフォルダができていてそこに存在しているはずです。）

"Add SSH key"を押します。
次に

git push -u origin main -f

を実行します。-fオプションですが、Git上には冒頭使ったindex.htmlが存在しており、手元の環境との差異が発生するためエラーが出るところを、差異を気にせず強制上書きするオプションです。

こんなメッセージが出れば完了です。
先ほどテストしたドメイン＋/public/にアクセスするとフォームが出てきます。

適当な値をSubmitするとJSONが出力されます。

いかがでしたでしょうか?とても簡単にサイトが立ち上がることを感じてもらえましたでしょうか？
Workersと同様にこれからいろんな機能についてを記事を順次上げていきたいと思います。

Discussion