Yu Blog

Cloudflare Pagesに手動でページをアップロードする

はじめに

このBlogはCloudflare Pagesを使用して公開しています。

Cloudflare Pagesは無料からWebサイトをホスティングできるサービスです。

サイトのデプロイにはGitHub連携を使用して、基本的には自動で行うことができます。サポートしているFrameworkも非常に多く、ほとんど設定をせずにサイトの公開ができます。

この記事ではあえてそのGithub連携を使用しないページの公開を試してみます。Direct Uploadsを参考に、wranglerコマンドを使用したアップロードを試してみます。

環境

  • Node.js v18.16.0
  • wrangler 3.0.1

手順

準備

まずは、wranglerをインストールし、Cloudflare Pagesにログインします。ブラウザでログインできるので簡単です。

npm install -D wrangler
npx wrangler login

ログインできたらCloudflare Pagesの新規プロジェクトを作成します。ここでは、sandboxというプロジェクトを作成します。

❯ npx wrangler pages project create

✔ Enter the name of your new project: … sandbox
✔ Enter the production branch name: … main
✨ Successfully created the 'sandbox' project. It will be available at https://sandbox-bcv.pages.dev/ once you create your first deployment.
To deploy a folder of assets, run 'wrangler pages deploy [directory]'.

これで準備は完了です。

index.htmlのアップロード

アップロードする簡単なページを作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Sample Site</title>
</head>
<body>
  <h1>Sample Page</h1>
</body>
</html>

上記をindex.htmlとして保存します。ディレクトリ構造は以下のような感じです。

❯ tree -I node_modules
.
├── package-lock.json
├── package.json
└── src
    └── index.html

wranglerコマンドを使ってアップロードします。2023年6月4日現在、ドキュメントにはwrangler pages publishを使うように記載がありますが、3.0.1ではdeprecatedになっているようです。新しいコマンドとして、wrangler pages deployが準備されているようなので、それを使用します。

❯ npx wrangler pages deploy src
🌍  Uploading... (1/1)

✨ Success! Uploaded 0 files (1 already uploaded) (0.27 sec)

✨ Deployment complete! Take a peek over at https://*****.sandbox-***.pages.dev

これでデプロイ完了です。表示されたURLにアクセスするとページが表示されているのが確認できます。

❯ curl https://sandbox-***.pages.dev
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Sample Site</title>
</head>
<body>
  <h1>Sample Page</h1>
</body>
</html>

Functionsの使用

CloudflareにはFunctionsと呼ばれるサーバーでコードを実行できる仕組みも準備されています。この機能を使うと認証機能やフォーム機能などサーバーでの処理が必要な機能も実装することができます。

CloudflareのCloudflare Workersというサービスが利用されているようです。

ここでは、Functionsの機能を使って新しいエンドポイントを作成してみます。rootディレクトリにfunctionsというフォルダを作成し、その中にJavaScriptのファイルを作成していきます。作成したファイル1つ１つがエンドポイントとなります。

❯ tree -I node_modules
.
├── functions
├── package-lock.json
├── package.json
└── src
    └── index.html

注意としては、必ずwranglerコマンドを実行するカレントディレクトリにfunctionsを作成してください。

次に、/functions/helloworld.jsを作成します。

export function onRequest(context) {
  return new Response("Hello, world!")
}

アップロードし、確認をします。

❯ npx wrangler pages deploy src
✨ Compiled Worker successfully
🌍  Uploading... (1/1)

✨ Success! Uploaded 0 files (1 already uploaded) (0.40 sec)

✨ Uploading Functions bundle
✨ Deployment complete! Take a peek over at https://5b0b4e73.sandbox-bcv.pages.dev

❯ curl  https://sandbox-bcv.pages.dev/helloworld
Hello, world!

無事にエンドポイントが作成されました。functions配下にディレクトリを作成すると、URLのパスにセグメントを追加していくことができます。

おわりに

今回の記事では、Cloudflare PagesでGitHub連携を使用せずに直接アップロード操作をしてみました。次回は、このブログでも使っているSveltkitをCloudflare Pagesと一緒に使った場合、どのようなプロセスでアップロードされるかを追っていきたいと思います。