モバイル/Webアプリ開発向けに「Firebase」で公開する
「Firebase」は、Googleが提供する、モバイルアプリ・Webアプリ向け開発プラットフォームです。プッシュ通知やアクセス解析(Analytics)などの機能を提供しますが、この中で静的Webページをホストする「Firebase Hosting」と、JavaScriptで記述した関数をサーバーレスで実行する「Firebase Functions」を組み合わせて利用すると、Nuxt.jsのプロジェクトを実行できます。
以下では、Firebaseのアカウント(Googleアカウント)は取得済みで、コマンドラインツール「Firebase CLI」をインストールし、CLIでアカウントにログイン済みの状態を想定します。FirebaseおよびFirebase CLIの基本的な利用方法は、公式ドキュメントを参照してください。
FirebaseのWebページで新規プロジェクトを作成します。最初のページでプロジェクト名(例えば「p004-firebase」)を入力します。次に要求されるGoogle Analyticsの設定は無効にしてプロジェクト作成を完了します。
![図8:Firebaseに新規プロジェクトを作成](http://cz-cdn.shoeisha.jp/static/images/article/13422/13422_8.png)
Nuxt.jsのプロジェクトフォルダーで、Firebase CLIの「firebase init」コマンドを実行します。使用するサービスを選択する画面が表示されるので、「Functions」と「Hosting」を選択します(図9)。また、プロジェクトの選択が要求される画面では、先ほど作成したプロジェクトを選択します。それ以外の選択肢はデフォルトを受け入れます。
![図9:Firebase CLIで使用するサービスを選択(P004-firebase)](http://cz-cdn.shoeisha.jp/static/images/article/13422/13422_9.png)
Firebaseの設定ファイルfirebase.jsonを、リスト8の通り編集します。
{ // Hostingの設定 ...(1) "hosting": { "public": "static", // 公開フォルダー ...(1a) "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ], "rewrites": [ // リクエストを関数に転送する設定 ...(1b) { "source": "**", "function": "nuxtFunc" } ] }, // Functionsの設定 ...(2) "functions": { "functions": { "source": "functions" } } }
(1)はHostingの設定で、デフォルト設定からの変更点は(1a)と(1b)です。(1a)は公開ファイルの設定で、ここではアイコンファイル(favicon.ico)が配置されているstaticフォルダーを指定します。(1b)はリクエストを関数に転送する設定で、sourceが「**」の(つまりすべての)HTTPリクエストを、nuxtFuncという関数に転送するよう設定します(nuxtFuncの詳細は後述)。(2)はFunctionsの設定で、関数のソースコードがfunctionsフォルダーにあることを表しています。
次に、リクエストが転送される関数を実装します。まずfunctionsフォルダーで「npm install nuxt」コマンドを実行して、Nuxt.jsのライブラリーをダウンロードします。次に、package.jsonの記述をリスト9の通り変更して、Node.jsのバージョン8を利用するようにします。これは、Firebaseの無料アカウントでFunctionsを動作させるためです(後述の補足を参照)。
{ (略) "engines": { "node": "8" // デフォルトでは「12」が設定されている }, (略) }
関数の処理に対応するfunctions/index.jsを、リスト10の通り実装します。
const functions = require('firebase-functions'); // loadNuxtをインポート ...(1) const { loadNuxt } = require('nuxt'); // Function「nuxtFunc」の定義 ...(2) exports.nuxtFunc = functions.https.onRequest(async (req, res) => { // loadNuxtでNuxtインスタンスを取得 ...(2a) const nuxt = await loadNuxt('start'); // NuxtインスタンスでFunctionのリクエストを処理 ...(2b) return nuxt.render(req, res); });
(1)で、Nuxt.jsのオブジェクトを取得するloadNuxtメソッドをインポートします。(2)のexport.nuxtFuncメソッドで、リスト8(1b)でリクエストの転送先に設定したnuxtFunc関数を実装します。(2a)のloadNuxtメソッドの戻り値で取得できるnuxtは、Nuxt.jsの機能を実行できるオブジェクトです。loadNuxtメソッド引数の「start」は本番(production)モードを表します。取得したnuxt変数のrenderメソッド(2b)にHTTPリクエストとレスポンスを渡して実行すると、すべてのHTTP処理をNuxt.jsで行うようにできます。
リスト10の関数は、functions/.nuxtフォルダーに配置されたNuxt.jsのビルド成果物を実行するので、functions/.nuxtフォルダーにビルド成果物をコピーする必要があります。このコピーを行うため、プロジェクトルートのpackage.jsonでビルドコマンドをリスト11の通り修正します。
{ (略) "scripts": { "dev": "nuxt", "build": "nuxt build && npm run copyfunc", // ...(1) "copyfunc": "rimraf functions/.nuxt && cpx .nuxt/dist/**/* functions/.nuxt/dist", // ...(2) "start": "nuxt start", "generate": "nuxt generate" }, (略) "devDependencies": { // ...(3) "cpx": "^1.5.0", "rimraf": "^3.0.2" } }
ビルドコマンド(1)で、プロジェクトのビルド(nuxt build)を行った後、(2)で定義したcopyfuncを実行するようにします。copyfuncでは既存のfunctions/.nuxtを削除後、Nuxt.jsのビルド成果物をfunctions/.nuxtにコピーします。なお、copyfuncで使用しているrimraf(ファイル/フォルダーを階層的に削除)とcpx(ファイル/フォルダーを階層的にコピー)コマンドは、「npm install --save-dev <パッケージ名>」コマンドで、開発に必要なパッケージとしてインストールします。インストール後、package.jsonに(3)が追記されます。
「npm run build」コマンドを実行してビルド後、「firebase serve」コマンドを実行してWebブラウザーで「http://localhost:5000/」を開けばローカルで実行を確認できます。また、「firebase deploy」コマンドでFirebaseにNuxt.jsを反映でき、「https://<プロジェクト名>.web.app/」で、Firebaseに反映されたWebページを表示できます。
[補足]Firebase FunctionsでNode.js 10/12を利用するには従量課金プランが必要
Firebase Functionsの現行バージョンでは、Node.jsのバージョン10と12がサポートされていますが、これらを利用するには従量課金制プランへの登録が必要です。バージョン8は従量課金制プランへ登録せず利用できますが、すでに非推奨になっており、2021年2月に新規登録ができなくなり、3月に完全に廃止されます。
![図10:Firebase FunctionsのNode.jsバージョン(公式ドキュメント(https://firebase.google.com/docs/functions/manage-functions#set_nodejs_version)より)](http://cz-cdn.shoeisha.jp/static/images/article/13422/13422_10.png)
本記事のサンプル(004-firebase)は、リスト9のNode.jsバージョン設定を変更して、Firebaseの従量課金制プランに登録すれば、バージョン10や12でも動作します。
まとめ
本記事では、Nuxt.jsのプロジェクトをインターネット上に公開する方法を説明しました。静的ファイルを生成することで、Node.jsを実行できないWebサーバーでもWebページを公開できます。また、Node.jsを実行できるHerokuやFirebaseのサービスに公開すれば、Nuxt.jsのサーバーサイドレンダリングを動作させることができます。
本連載では、環境を構築してWebページを作成し、インターネットへ公開するまでの手順を通して、Nuxt.jsの要点を紹介してきました。Nuxt.jsは、Webページ開発に必要なものをまとめて提供してくれるので、比較的手軽にスタートできる環境といえます。本連載を通して興味を持っていただけたなら、単純なサンプルページを表示するところからでも、Nuxt.jsにチャレンジしてみてはいかがでしょうか。