Nuxt.jsのWebページをfirebaseでホスティングする時の注意

FireBase と Vue の連携ついて

FireBaseでデプロイしたものをホスティングするのに苦戦したのでまとめようと思います

ホスティングについて

ホスティングについて最初は何か分からなかったのですが簡単に言うとサーバを借りることだそうです。

今回のホスティングはFireBase を活用してNuxtjsで作成したプロジェクトをFireBaseのアカウントごとに作成できるWebページとしてインターネットに掲載出来るというものでした。

ホスティングするまでには大きく２つの工程がありました。

１. プロジェクトをビルド

npm run build

または

set NITRO_FIREBASE_GEN=2
npm nuxt generate

または

npx nuxt generate

色々と試しながらエラー起きながら気づいたら上手く行っていたのでちゃんとした正解は分からないですがこの３つのコマンドは試しました。

２. FireBaseのコマンドでデプロイを実行する

このコマンドでエラーが起きなければホスティングが成功ではあるのですが、最初はページが正しく表示されなくてあれ？となりました。

firebase deploy

3. FireBaseのホスティングの手順について

firebase.json

firebase.json

{
  "hosting": [
    {
      "target": "ホスティングの名前",
      "public": "dist",
      "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    }
  ]
}

firebase deploy --only hosting:ホスティング先