Firebase

【Nuxt.js×Firebase】プロジェクト作成からデプロイまでを解説

開発環境構築

Firebaseにプロジェクトをデプロイ

ローカルにプロジェクト作成

Nuxt.jsのプロジェクトをローカルで生成するだけです。下の2つのコマンドを実行し、ローカルで動作確認できればOKです。

$ npx create-nuxt-app typing-app

$ npm install
$ npm run dev

buildコマンドでコンパイルを実行し、.nuxtディレクトリを生成します。

$ npm run build

次にgenerateコマンドで、デプロイ(公開)のためのdistディレクトリを作成します。

後述しますが、Firebaseにデプロイする際にこのdistディレクトリを指定してデプロイします。

$ npm run generate

Firebaseの設定

webサイトでプロジェクト作成

プロジェクト名を指定して作成します。

いざ、デプロイ

Firebase APIをインストール

HTMLなどのサイトだったらFirebaseのコンソール画面から<script>を コピーして貼り付ける方法もあるのですが、今回はnpmを使ったNodeプロジェクトなので、Firebase APIをインストールして使います。

$ npm install firebase

Firebaseサービスにログイン

firebaseコマンドを使えるようにするため、firebase-toolsをインストールします。

$ npm install -g firebase-tools
$ firebase login

Already logged in as abc.zzz@gmail.com

コマンドラインからデプロイ

initコマンドで設定を決めていきます。

Firebaseには、Hosting, Database, Storageなど様々なサービスが用意されていますが、コマンドラインからはHostingの設定のみを行い、その他はwebサイトのコンソール画面で行います。

$ firebase init

どのサービスと関連づけるか?→Hostingのみ選択(他はコンソール画面で設定する)
? Which Firebase CLI features do you want to set up for this folder? .........(Press  to select, ...........) :
 ◯ Database: Deploy Firebase Realtime Database Rules
 ◯ Firestore: Deploy rules and create indexes for Firestore
 ◯ Functions: Configure and deploy Cloud Functions
 ◯ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules
 ◯ Emulators: Set up local emulators for Firebase features
プロジェクトはどうするか?
? Please select an option :
   Use an existing project 
   Create a new project 
   Add Firebase to an existing Google Cloud Platform project 
   Don't set up a default project
publicディレクトリは?→distと入力してください!
? What do you want to use as your public directory?
→Nを選択
? Configure as a single-page app (rewrite all urls to /index.html)?

.firebasercfirebase.jsonというファイルがプロジェクト直下に生成されます。

これで設定は終了で、次のコマンドでデプロイしましょう。

$ firebase deploy

・・・・・・ ✔  Deploy complete! Project Console: 
https://console.firebase.google.com/project/typing-app/overview  
Hosting URL: https://typing-app.web.app

.firebaseディレクトリが生成され、上記のように表示されたら、Hosting URLにアクセスしましょう。
表示されればデプロイ完了です!

Firebaseの機能については以下のサイトがわかりやすいです。
Google の mBaaS 「 Firebase 」とは?

プロジェクト設定

ここからは、実際にプロジェクトの設定に入っていきます。内容は、Nuxtプロジェクトのディレクトリ構造を修正したり、Bootstrapをインストール・Sassを使えるようにしたりしていきます。

ディレクトリ構造を変更

以下の記事を参考にプロジェクト内を良い感じにします。シェルスクリプトで自動化もしてるので、ぜひ一読を!
Nuxt.jsでプロジェクトを作成した際に僕がやること

nuxtApp
│   ├── assets
│   │   ├── images // 追加
│   │   └── sass // 追加
│   ├── components
│   ├── layouts
│   │   └── default.vue
│   ├── pages
│   │   └── index.vue
│   ├── middleware
│   ├── plugins
│   ├── static
│   └── store
├── README.md
├── nuxt.config.js
├── package-lock.json
├── package.json
├── src
└── tsconfig.json

Sassを使えるようにする

$ npm install node-sass sass-loader

以下の構成で、scssファイルを作成していきます。

└── sass
    ├── app.scss
    ├── colors.scss
    ├── customs.scss
    └── reset.scss

app.scssは読み込み専用(ルートファイル)として使用します。以下のように、記述することで、別のscssファイルを読み込みます。

@import './reset';
@import './colors';
@import './customs';

最後に、nuxt.config.jsのcssの部分にファイルを記述することでHTMLの<head>内で読み込むことができます。

  css: [
    './src/assets/sass/app.scss'
  ],

Bootstrapを使えるようにする

$ npm install bootstrap-vue

nuxt.config.jsに追加します。

  modules: [
    ['bootstrap-vue/nuxt', {css: false}]
  ],

app.scssに追加します。

@import '~bootstrap/scss/bootstrap';

@import './reset';
@import './colors';
@import './customs';

index.vueを編集して確認

サンプルとして以下のコードを試してみてください。

<template>
  <div class="row justify-content-around bg-dark">
    <h1 class="py-5">Bootstrapインストール成功</h1>
  </div>
</template>

<script>

export default {
}
</script>

<style lang="scss" scoped>
h1{
  font-size: 24px;
  color: #fff;
}
</style>

下記の画像のようになればBootstrapの読み込み完了です。

COMMENT

メールアドレスが公開されることはありません。