目次
まえがき
この本をお手に取っていただき、ありがとうございます。
近年ではさまざまな方法でアプリケーションを管理運用することが多くなりました。従来のサーバーに直接デプロイして運用する方法や、仮想化やコンテナといった技術を利用してマイクロサービス的に運用する方法、そしてサーバーレスとしてコードのみをデプロイし、細かい運用はプラットフォーム側にやってもらう方法などがあります。
今回本書では、Cloudflare1にあるサービスを利用し、簡単なAPIとそのAPIを利用するフロント側の構築や運用を進めます。もともとCloudflareはCDNやDNS、ネットワーク攻撃からの防御といったサービスを提供している企業ですが、近年ではそれらで利用されているリソースを活用し、さまざまなサービスを提供するようになりました。その中でも今回は、APIの運用にCloudflare Workersというエッジサーバーで各種スクリプトを動作させるサービスを、TypeScriptを利用して進めます。また、リソースの保存先として、データの保存にWorkers KV、画像の保存にR2を利用します。フロント側は、今回は旅行先のメモを保存するアプリケーション、というコンセプトのアプリケーションを構築します。デプロイ先にはCloudflare Pagesを利用し、構築にはVue.jsとTypeScriptを利用します。また、それらの応用編として、R2のパブリックバケットを利用したり、QueuesやD1といった、ベータ版ではあるものの最近利用できるようになったサービスを利用して拡張してみたいと思います。
本書を通して実践的な内容となっていますので、Cloudflareを利用したサービスの構築例としての参考になるかと思います。本書の内容やコードを照らし合わせながら、ぜひトライしてみてください。
想定読者
この本は次の読者を想定しています。
・Cloudflareの開発者向けサービスに興味がある
・Cloudflareのサービスを利用したAPIやサイトを構築運用したい
・Cloudflareのサービスの利用例を知りたい
ゴール
この本の内容に沿って進めることでたどり着く、最終的なゴールは次のとおりです。
・Workersを用いてAPIを構築できる
・KVやR2を用いて、リソースを保存できる
・Pagesを用いてサイトを運用できる
・D1やQueuesを用いて、サービスを拡張できる
ソースコード
この本の中で使用している各種コードは、次のリポジトリーに公開しています。
https://github.com/taiko19xx/cloudflare_book
連絡先
質問や誤字脱字、誤った内容などがありましたら、次の連絡先へご連絡ください。
・メール: hello@taiko19xx.net
・Twitter: @taiko19xx
いただいた情報は確認の上、Twitterや著者のブログにて適時公開します。
・ブログ: https://blog.taiko19xx.net/
免責事項
本書に記載された内容は情報の提供のみを目的としています。したがって、本書を用いた開発および運用は、必ずご自身の責任と判断によって行ってください。これらの情報による開発および運用の結果について、著者はいかなる責任も負いません。
表記関係
本書に記載された会社名や製品名などは、各社の登録商標または商標、商品名です。本文中では©、®、™マークなどは表示していません。
第1章 環境構築
まずは環境構築を行います。必要なサービスのサインアップや初期設定、ローカルへのツールの追加などを行います。
1.1 Cloudflare
最初に必要なのはもちろん、Cloudflareのアカウントです。トップページ1からサインアップを選択し、画面の指示にしたがって作成します。
ダッシュボードが表示されるようになれば完了です。二段階認証も設定しておくと安心です。
1.1.1 Workers
次にWorkersの初期設定を行います。サイドバーからWorkersを選択します。
すると、サブドメインの設定画面になります。作成したWorkerは「<サービス名>.<サブドメイン>.workers.dev」でアクセスできるようになるため、サブドメインに好きな文字列を設定して「Set up」を選択します。
次に、プランの設定になります。FreeとPaidの2種類があり、Paidの方が実行時間やリクエスト数などが比較的緩和されています2が、現時点ではFreeで十分なため、「Continue with Free」を選択します。もし利用するにあたり制限に達してしまう場合は、後ほどアップグレードも可能です。
Workersの画面になれば完了です。KVの設定はWorkersに含まれるため、これでKVも利用可能になりました。
1.1.2 R2
次はR2です。サイドバーからR2を選択します。
こちらもプランの設定画面になります。とはいえ選択肢はひとつしかないため、「Pay-as-you-go」の「Purchase R2 Plan」を選択します。
すると、オーダー画面になります。R2には無料枠こそありますが、それを超えてしまうと課金が発生するため、支払い情報の登録が必要となります。画面の指示にしたがって登録します。
R2の画面になれば完了です。
1.2 Google Maps Platform
次に、Google MapsのAPIを利用するための設定です。登録した位置情報のGoogle Mapsを利用した位置情報の埋め込み表示と、近くのスポットの検索に利用します。API自体は有償ですが、毎月200ドル分まで無料で利用可能です。今回利用する技術のうち埋め込み表示は無料ですが、スポットの検索（Nearby Search）は呼び出し毎に0.032USDかかります。ただ、先に書いたように無料枠があるため、単純計算で約6000回までの呼び出しは無料で利用可能です。
Google Maps Platformのサイト3にアクセスし、右上の「使ってみる」を選択します。
選択すると、Google Cloudのサイトに推移します。画面の指示にしたがって支払い情報などを設定すると、Google Maps Platformの設定画面になるので、サイドバーの「認証情報」を選択します。もし表示してすぐAPIキーが発行された場合は、それを利用します。
画面上部にある、「認証情報を作成（Create Credentials）」から「APIキー」を選択します。
しばらく待つとAPIキーが発行されるので、これメモします。これで、Google Maps APIを利用できるようになりました。
1.3 ローカル環境
1.3.1 Node.js
続けて、ローカル完了の設定を行います。まずはNode.jsの導入です。この後紹介するwranglerやvue-cliのインストールや実行、フロント側の構築や設定に必要なため、追加します。
今回利用するNode.jsのバージョンはv18です。対応するバージョンを公式サイト4から各種パッケージをダウンロードしたり、各種パッケージマネージャーから追加、もしくはnvm5などのバージョンマネージャーから追加します。
node -vを実行し、v18以上になっていれば完了です。
$ node -v
v18.14.2
1.3.2 wrangler
続けて、wrangler6をインストールします。wranglerはCloudflare Workersのコマンドラインツールです。Workersのローカル実行やデプロイはもちろん、Pagesのデプロイや、R2やKVといったWorkersに付随するサービスの操作も行うことができます。
wranglerのインストールは簡単です。npm経由でインストールするため、次のコマンドを実行します。-gをつけることでグローバルにインストールされるため、この時点で作業用ディレクトリーにいる必要はありません。
$ npm install -g wrangler
インストール後、wrangler -vを実行し、バージョン情報が返ってくれば7インストールは成功です。今回はversion 2以降を利用します。
$ wrangler -v
wrangler 2.12.2
--------------------
続けて、ログインします。wrangler loginを実行すると、自動でブラウザーが開きます。まだログインしていない場合はCloudflareのログイン画面になるため、ログインします。もし自動でブラウザーは開かない場合は、コンソールに表示されているURLを開きます。
$ wrangler login
wrangler 2.12.2
--------------------
Attempting to login via OAuth...
Opening a link in your default browser: https://dash.cloudflare.com/(略)
ログインする、もしくはログイン済みの場合は認可画面になるため、下部のAllowを選択します。
コンソールにSuccessfully logged inと表示され、ブラウザーも「You have granted authorization to Wrangler!」と表示されていれば成功です。その後メトリクスの送信有無を聞かれますので、任意の項目を選択して設定を完了します。ちなみに、ここまでの動作に時間がかかってしまうとwrangler側でタイムアウトしてしまうため、その場合は最初からやり直す必要があります。
$ wrangler login
wrangler 2.12.2
--------------------
Attempting to login via OAuth...
Opening a link in your default browser: https://dash.cloudflare.com/(略)
Successfully logged in.
最後に、wrangler whoamiを実行して、自身のアカウントでログインしていることが確認できれば完了です。
$ wrangler whoami
wrangler 2.0.25
--------------------
Getting User settings...
You are logged in with an OAuth Token, associated with the email 'xxxxx@xxxx.xxx'!
┌──────────┬──────────┐
│ Account Name │ Account ID │
├──────────┼──────────┤
│ xxxxxx's Account│ xxxxxxxxxxxxxx │
└──────────┴──────────┘
Token Permissions: If scopes are missing, you may need to logout and re-login.
Scope (Access)
- account (read)
- user (read)
- workers (write)
- workers_kv (write)
- workers_routes (write)
- workers_scripts (write)
- workers_tail (read)
- pages (write)
- zone (read)
- offline_access
1.3.3 vue-cli
次は、vue-cli8をインストールします。vue-cliはVue.jsのコマンドラインツールです。これを利用し、プロジェクトの初期設定やコンポーネントの追加を行います。
これも、追加は簡単です。npm経由でインストールするため、次のコマンドを実行します。
$ npm install -g @vue/cli
インストール後、vue -Vを実行して、バージョン情報が取得できれば成功です。
$ vue -V
@vue/cli 5.0.8
1.3.4 作業用ディレクトリーの作成
最後に、作業用ディレクトリーを作成します。macOSやLinuxの場合は任意の場所に作成すればよいのですが、Windowsの場合は少し注意が必要です。今回、Vue.jsで開発するにあたり、WSL29を利用し、かつマウントしたディスクドライブ（/mnt/c/以下など）で作成した場合に、ホットリロードが効かなかったりビルドが遅い10という現象を確認しています。もしWSL2を利用して開発を進める場合は、4章の部分についてはマウントしたドライブで作業をしない（/home/user以下など）か、Windows上で作業を進めることを推奨します。