最速で最強のCloudflare Pages/Workers

Webページやブログをホストしたいとき、あなたはどうしますか？

家でサーバーを用意する？

ホスティングサービスを探して契約する？

Cloudflareなら無料でWebページを全世界に公開できます。 しかも縛りがほとんどありません。簡単にメリットを挙げると:

• 商用利用OK
• リクエスト数/データ転送量なし(Workersの場合は10万リクエスト/日)
• いくつ作成してもOK
• プロジェクトは全てCFのエッジサーバーにデプロイ(どのロケーションからも爆速でアクセス可能)
• (Pages)Githubとの連携が可能(プッシュに応じて自動デプロイ)

などなど… Workersの場合リクエスト数に制限はありますが、よっぽどのことがない限り1日に10万リクエストが来る事はありません。縛りが極めて少ないです。これが無料で出来るのだからやばい…

Cloudflare PagesとCloudflare Workersは最近だと結構似ている箇所が増えつつあって、統合もされ始めていますが、今回はCF Pagesに焦点を当ててお話します。

この記事の目標は「簡単なページを全世界に爆速でデプロイする」です。やってみましょう！

準備

始める前に準備しておきましょう。

今回はコマンドラインで進めていくので、Node.jsが必要になります。無い場合は入れておきましょう。

まずは適当にディレクトリ(フォルダ)を作りましょう。

作成したディレクトリ内で、以下のコマンドを実行してwranglerを導入します。

Wranglerとは、CloudflareのCLIツールです。主にWorkers向けに開発されたものですが、Pagesでも利用できます。

npm i wrangler --save-dev

npm i -g wranglerでグローバルにインストールしても構いません。お好きな方でどうぞ。

ログインも済ませておきましょう。npx wrangler loginで出来ます。

ringoxd\example> npx wrangler login
 ⛅️ wrangler 3.45.0
Attempting to login via OAuth...
Opening a link in your default browser: https://dash.cloudflare.com/oauth2/auth?...

URLが出てくる(もしくは自動でブラウザのウィンドウが開かれる)ので、ログインしましょう。

Successfully logged in.とターミナルに表示されれば成功です!

プロジェクトを作成する

プロジェクトを作成しましょう。対話式で作成できるので簡単に扱えます。

ringoxd\example> npx wrangler pages project create
√ Enter the name of your new project: ... ringoxd-project //プロジェクト名.pages.devになります。
√ Enter the production branch name: ... production //ブランチ名
To deploy a folder of assets, run 'wrangler pages deploy [directory]'.

これだけです。超簡単!

デプロイする

src/index.htmlを用意しました。

中身:

<h1>Hello Sekai!</h1>

npx wrangler pages deploy ディレクトリでデプロイできます。やってみましょう。

ringoxd\example> npx wrangler pages deploy src 
🌍  Uploading... (1/1)

✨ Success! Uploaded 1 files (1.31 sec)

✨ Deployment complete! Take a peek over at https://2a5ac602.example-for-blog-ringoxd.pages.dev

ブラウザでプロジェクト名.pages.devにアクセスすると…

ちゃんと反映されています。ファイルが少ないのもありますが、このデプロイにはたったの数秒しか要していません。

ちなみに、5000枚以上のページがあっても1分程度しかかからないとの事。すげぇぇ..!

画像: ゆーすけべー日記

おまけ(packages.jsonを編集して楽にする)

npx wrangler paegs deploy...なんて長すぎて面倒です。npm run deployでサクッとデプロイ可能にしましょう。

"scripts": {
    "deploy": "wrangler pages deploy src"
}

これでsrc/ディレクトリの内容をnpm run deployでサクッとデプロイできます。

おわり!

実は私のWebページはほとんどCloudflare Pagesで動いています。(このブログもそうです)

そして、費用は一切かかっていません。サーバーレスでここまで出来る時代がやってきています。素晴らしい！

興味があるなら、試してみる価値は十分にあります。ぜひやってみてください！