既存の Nuxt.js サービスを新規 Firebase プロジェクトにデプロイする手順

Firebase の Hosting に既にデプロイしている Webサービスを新規プロジェクトにデプロイする必要があったので備忘録として手順をメモしておく。 理由としては、本番と開発で環境を分けたくなったため。

初期設定はこちらに記載している。

• Nuxt.js で Firebase と Cloud Firestore を使えるように初期設定を行う

前提

• Nuxt.js で作った Webサービスをデプロイする(クライアントのみの機能)
• dotenv で環境変数を管理している
• Google認証を使っている
• Cloud Firestore を使っている
• Storage を使っている

概要

• プロジェクトを追加
• Google認証を有効化
• Cloud Firestore のデータベースを作成
• Storage は特にやることなし
• デプロイ

手順

• プロジェクトを追加

• プロジェクトの情報を取得

• .env に記述する

---

• Authentication を選択

• Googleを有効にする

---

• Cloud Firestore を選択

• テストモードで開始する

---

• Fireabese CLI でログイン

$ firebase login

• Firebase Hosting の設定
  • directory は dist を選択

$ firebase init hosting

• ２つ目以降のプロジェクトの場合は .firebaserc にプロジェクトを追加 (firebase use --add でも可)

{
  "projects": {
    "default": "hoge-dev",
    "production": "hoge-prod"
  }
}

• プロジェクトを選択し、デプロイ

$ firebase use production
Now using alias production (hoge-prod)

$ yarn run build
$ firebase deploy

プロジェクトの上限は５つほどらしいが、リクエストフォームで増やしたい理由を伝えれば増やせるとのこと。