Firebase Hosting に Nuxtプロジェクトをデプロイしてみた
Firebase Hostingとは？
Firebase Hosting はデベロッパー向けの、本番環境レベルのウェブ コンテンツ ホスティングです。1 つのコマンドですばやく簡単にウェブアプリをデプロイすることができ、静的コンテンツと動的コンテンツの両方をグローバル コンテンツ配信ネットワーク（CDN）に配信できます。
引用元: https://firebase.google.com/products/hosting/
NetlifyやGitHub Pagesの競合サービスという感じでしょう。
比較記事なんかもちらほらしています。
- 徹底比較！Firebase vs Netlify (2018年版) - KAYAC engineers' blog
- 静的サイトを公開するならどこがいいの？ #技術書典 - フロントエンドの地獄
- ブログのホスティングを Netlify から Firebase Hosting に変更した | 9mのパソコン日記
Firebase Hostingについての詳細は、公式ドキュメント をご覧ください。
Firebase プロジェクトを作成する
それでは、早速作業を行なっていきます。
Googleアカウントがあれば、2ステップでFirebaseプロジェクトを作成できます。
1: Firebase consoleへアクセス
2: プロジェクトの追加
プロジェクトの追加から、今回は以下のように設定しました。
Nuxt Projectを作成する
続いて、Nuxt.jsのプロジェクトを作成します。
今回は、公式ドキュメントに記載されているcreate-nuxt-appを使用してインストールしました。
$ npx create-nuxt-app sample-app // 設定内容は下記を参照 $ cd sample-app $ npm install
設定内容:
(何も選択せずに、Enterを押し続けると同じようになるかと思います)
Firebase Hostingにデプロイする
デプロイ手順は、こちらの公式ドキュメントに沿って行いました。
1: Firebase CLI をインストールする
$ npm install -g firebase-tools
2: Firebase プロジェクトにアクセスする
$ firebase login
実行後、使用状況の情報収集に協力するかどうかを聞かれるので[Y/n]で答えます。 その後、Googleアカウントの認証を行い、無事に終わると以下のような画面が表示されます。
3: サイトを初期化する
$ cd sample-app // Nuxt.jsのディレクトリに移動しておいてください $ firebase init
実行後、どのように初期化をするのか質問されるので答えていきます。
? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices. > Hosting
? Select a default Firebase project for this directory: > 上記で作成したFirebase プロジェクトを選択。なければ、[create a new project]を選択。
? What do you want to use as your public directory? > dist 補足: Nuxtは'nuxt generate'コマンドで公開ファイルを作成します。その出力先ディレクトリのdefaultの設定がdistディレクトリなため、distを指定しています。
? Configure as a single-page app (rewrite all urls to /index.html)? > N
質問に答え終えると、Nuxtをインストールしたルートディレクトリに以下が作成されます。
4: デプロイする
それでは、Firebase Hostingにデプロイします。
$ firebase deploy
上記実行後、Errorメッセージが表示された場合は以下を試してみてください。
作成したFirebaseプロジェクトと紐づけられていない可能性があります。
Errorメッセージが出ていない場合はここをskip。
$ firebase use --add ? Which project do you want to add? > Firebaseで作成下プロジェクトを選択 ? What alias do you want to use for this project? (e.g. staging) > default 上記を終えたら再度デプロイコマンドを実行してください。 $ firebase deploy
成功した場合は、以下のようなメッセージが表示されます。
✔ Deploy complete! Project Console: https://console.firebase.google.com/project/sample-app-38968/overview Hosting URL: https://sample-app-38968.firebaseapp.com
[Hosting URL] にアクセスすると、このような画面が表示されます。
これで、デプロイの動作確認は完了です。
Nuxt Projectをデプロイする
最後にNuxt.jsのデプロイを行います。
1: 公開用ファイルを生成する
$ npm run generate
2: デプロイする
$ firebase deploy
すると、先ほどデプロイした画面から、見覚えのあるNuxt.jsの画面が表示されるかと思います。
以上、おしまい。
