CloudflareにNuxtアプリをデプロイできるNuxtHubを触ってみる
- 投稿した日
- 更新した日
- 書いたひと
- ひらたけ
このウェブサイトでも使っている Vue.js のフレームワーク Nuxt のウェブサイト を見ていたら NuxtHub というサービスが増えていた ので、触ってみました。Cloudflare の Cloudflare D1 とか Cloudflare Workers KV とかのサービスを Nuxt から簡単に利用できるようにする機能が用意されていたり、デプロイした Nuxt アプリを管理するダッシュボードが提供されていたりするっぽい。
Cloudflare 含め、AWS とか GCP とかサーバレスなサービスについて全然経験がなくて詳しくないので、そのあたりも実際に触ってみながら、初心者の勉強の履歴というか備忘録的な感じで書いていきます。
インストール
NuxtHub のウェブサイトにある ドキュメント に従ってインストールを進めます。
GitHub 上に「NuxtHub Starter Template」というテンプレートが用意されており、このリポジトリのページにある「Use this template」から テンプレートを使用して新しいリポジトリを作成 します。
このテンプレートでは pnpm を使用しているようなので、pnpm install で必要なパッケージをインストールします。その後、pnpm dev で開発サーバを起動しブラウザから localhost:3000 にアクセスすると、画面が表示されました。
画面を様子を見るに、Starter Template では 「画像のアップロード機能」と「サーバリダイレクトの設定を保存する機能」と「チャットのメッセージを保存する機能」が実装されている みたい。これらの機能は、
- 画像のアップロード → Cloudflare R2
- サーバリダイレクト設定の保存 → Cloudflare Workers KV
- チャットメッセージの保存 → Cloudflare D1
という Cloudflare のサービスを使用するようです。
それぞれ調べてみると、Cloudflare R2 は任意のファイルを保存できるオブジェクトストレージ、Cloudflare Workers KV はキーとそれに対応する値を保存できるシンプルな構造のデータベースのようなもの、Cloudflare D1 は SQLite によるデータベースっぽい。
これらのサービスには無料枠があり、個人で ちょっと触ってみる程度であれば余裕で無料での利用が可能 そう。
デプロイしてみる
NuxtHub Starter Template で作成した Nuxt アプリをデプロイしてみます。NuxtHub Admin というサービスに GitHub アカウントでログインし、管理画面に入ります。
ログインすると、使用している Cloudflare のアカウントと連携するための API トークンを入力する画面が表示されます。入力欄の下にある「Create a token with required permissions」ボタンを押すと、Cloudflare の API トークンを作成する画面が、必要な権限が選択された状態で表示されました。すごい親切。
作成した API トークンを入力し、NuxtHub と Cloudflare のアカウントをリンクします。
NuxtHub Admin で Cloudflare のアカウントを紐づけした後の画面で「Cloudflare R2 のサブスクリプションが無いよ」的な案内が表示されたので、Cloudflare のダッシュボードから Cloudfalre R2 のサブスクリプションを追加 します。支払い情報の登録が必要っぽいですが、
毎月の上限を超えた場合にのみ請求されます。
とあるので、無料で使える枠を超えない限りは請求されることは無さそう。
Cloudflare Workers に関しての案内も表示されていましたが、こちらは無料版だとファイルのサイズとかに制限があるから有料版にしたほうが良いよ、というものっぽい。今回はちょっと試しに触ってみるだけなのでそのまま置いておきます。
準備が出来たので、さっそく Nuxt アプリをデプロイしてみます。まだ何も無いプロジェクトの一覧画面に表示された「Import a Git repository」を押して、先ほど作成したリポジトリを選択します。このとき、対象のリポジトリに「Cloudflare Pages」の GitHub Apps をインストールしておかないと、一覧に表示されないので注意が必要です。
リポジトリを選択してプロジェクトの名前やサーバのリージョンなどを選択して続行すると、自動でデプロイが開始されます。素晴らしい✨️
無事デプロイが完了したので、pages.dev のサブドメインとしてデプロイされた Nuxt アプリをブラウザで表示します。試しに画像をアップロードしてみると Cloudflare R2 にファイルが追加されている ことが確認できました。すごい。
今回は NuxtHub Starter Template をそのままデプロイしてみただけでしたが、テンプレートのコードはそれほど複雑ではないので、比較的簡単に Cloudflare のサービスを利用したウェブサービスの開発ができそうです。（ちゃんとやるとなると、セキュリティ周りとか費用とか考えないとだと思いますが…）
テンプレートの一覧 に Todo リストのテンプレートや画像のギャラリーサービス的なもののテンプレートがあったり、ドキュメントにユーザ認証を実装するための @nuxthub/auth というパッケージを近日中に公開するという記載があったりと、色々気になります。
まだベータ版サービスのようなので、随時情報をチェックしつつ、時間のあるときに触ってみようと思います。