Cloudflareで社内向けのデモやプロトタイプのWebアプリを開発する
最近社内の勉強会にて簡単な静的サイトとAPIが必要となりCloudflareを利用して開発・公開してみました。
今回はその時得た知見"PagesとWorkers"の違いや公開までの流れを紹介します。
Cloudflareとは
Cloudflareは、Webパフォーマンスとセキュリティを向上させるためのクラウドベースのサービスプロバイダーです。
Cloudflareは、パフォーマンス向上、セキリティ、サーバーレス、開発者向けなど多岐にわたるサービスを提供していますが、今回はPagesとWorkersを利用しました。
（様々なサービスについて詳しくは公式サイトへ）
PagesとWorkersの違い
Pagesは、主に静的なWebサイトなどのホスティングサービスです。生成されたHTML、CSS、JavaScriptファイルを効率的に配信することができます。
Pagesの便利な機能の一つとして、GitHubやGitLabなどのリポジトリと連携して、コードのプッシュ時に自動的にビルドとデプロイが行うことが可能です。
一方Workersは、Cloudflareのエッジネットワーク上でサーバーレスアプリを作成することが出来ます。JavaScriptやRustなどを使って、リクエストごとに実行されるコードを記述し、動的な処理やAPIを提供します。Workersは、グローバルなエッジネットワーク上でリクエストを処理するため、低レイテンシかつ高パフォーマンスなサーバーレスアプリを構築可能です。
PagesとWorkersは機能的にも似通っていてややこしいのですが、ざっくりとPagesは静的コンテンツ向けのホスティングサービスで、シンプルなデプロイや配信に最適で、Workersは動的な処理やサーバーレスアプリに特化した、より高度なカスタマイズが可能なサービスです。
静的サイトの公開
お試しでHelloWorldサイトを公開してみました。
コードは以下の通りで最低限の記述です。
<html>
<head>
<title>Hello World from Pages</title>
</head>
<body>
<h1>Hello World from Pages</h1>
</body>
</html>記述したコードをgithubに上げて、CloudflareのConsoleでPagesと連携させると指定のブランチにpushするたびに公開してくれます。
若干分かりづらいですが公開したページは以下のように表示されます。
ドメインもgithubのプロジェクト名から割り当ててくれるので、コードを書いてgithubを連携したらすぐにサイトが見れるようになります。
かなりお手軽で便利です。
APIの公開
Workerを利用してHelloWorldと返すAPIを公開してみました。
ConsoleでWorkerのアプリケーションを作成します。雛形もいくつか選べるので最適なテンプレートで開発を始められます。
アプリケーションを作成した時点でランダムなエンドポイントが与えられるのでこの時点でアクセスして表示を確認できます。
コードの記述は今回はconsoleで直接編集します。
以下のようにJsonを直接記述して返すだけの内容です。
保存して公開し割り当てられたエンドポイントにアクセスするとAPIのレスポンスが返ってくることを確認できます。
まとめ
今回はCloudflareのPagesとWorkersを利用してごく簡単な静的ページとAPIを開発・公開してみました。
かなりお手軽に開発から公開まで行えて、また、無料で利用できる内容もとても充実しているため、社内でのデモやプロトタイプの開発には最適ではないかと思います。
弊社ではPOCやデモ版のサービス開発も承っておりますのでお気軽に問い合わせフォームよりご相談ください。