目次
開発環境構築
Firebaseにプロジェクトをデプロイ
ローカルにプロジェクト作成
Nuxt.jsのプロジェクトをローカルで生成するだけです。下の２つのコマンドを実行し、ローカルで動作確認できれば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)?
.firebasercとfirebase.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.jsonSassを使えるようにする
$ npm install node-sass sass-loader
以下の構成で、scssファイルを作成していきます。
└── sass
├── app.scss
├── colors.scss
├── customs.scss
└── reset.scssapp.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の読み込み完了です。
