[Nuxt.js]Firebase Hostingにデプロイしてみよう!

Firebaseの学習を始めたので、どうせならHostingもDatabaseもAuthenticationも使ってみたい!というわけでまずはHostingの記事です。

フロントのフレームワークはNuxt.jsを使っていきたいと思います。

参考:[https://razokulover.hateblo.jp/entry/2018/05/02/175235]

それでは早速やっていきます。

Nuxt.jsのプロジェクトを作成

SPAなのですがどうせgenerateするのでUniversalで開発していきます。

$ npm install -g create-nuxt-app
$ create-nuxt-app sample-firebase-nuxt
? Project name sample-firebase-nuxt
? Project description Sample App
? Use a custom server framework none
? Use a custom UI framework buefy
? Choose rendering mode Universal
? Use axios module yes
? Use eslint no
? Use prettier no
? Author name <your name>
? Choose a package manager npm

Firebaseのセッティング

Firebase consoleにアクセスしてプロジェクトを作成!

それではターミナルの方に戻りましょう。

$ npm install -g firebase-tools
$ firebase login
$ firebase use --add <your project>

これでFirebaseと繋げれました。

デプロイ

プロジェクト直下にfirebase.jsonを作成します。

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

そして、ターミナル上で以下を実行。

$ npm run generate
$ firebase deploy

これでターミナルに表示されるHostingのURLにアクセスできたらOKですね!