モバイル／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の設定は無効にしてプロジェクト作成を完了します。
Nuxt.jsのプロジェクトフォルダーで、Firebase CLIの「firebase init」コマンドを実行します。使用するサービスを選択する画面が表示されるので、「Functions」と「Hosting」を選択します（図9）。また、プロジェクトの選択が要求される画面では、先ほど作成したプロジェクトを選択します。それ以外の選択肢はデフォルトを受け入れます。
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月に完全に廃止されます。
本記事のサンプル（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にチャレンジしてみてはいかがでしょうか。
