Vue Nuxt Firebaseでプロジェクトを始める

Nuxt

Vue Cliを使ってNuxtのプロジェクトを作成

参考

$ vue init nuxt-community/starter-template <project-name>
$ cd <project-name>
$ npm install
$ npm run dev

localhost:3000にアクセスして以下の画面を表示

FireBaseプロダクトの作成

Firebase consoleに行き、プロジェクトの作成。

プロジェクト名とリージョンを選択します。
この時に生成される _プロジェクトID_がaliasとなっています。
この後のfirebase initでプロジェクトIDを選択するので確認しといてください。

FireBaseの設定

$ npm install -g firebase-tools
$ firebase --version # 3.19.3 2018.07.08現在
$ cd <project-name>
$ firebase init # とりあえずhostingの設定

今回の設定では、hostingだけ使うので
> ◯ Hostingで SpaceをおしてEnter

 ◯ 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

nuxtの設定でdistファイルが生成されているため、distを入力

 ? What do you want to use as your public directory? (public) dist

Firebase Hostingを使ってdeploy

$ npm run generate
$ firebase deploy

最後にurlが表示されるため、そのurlを開き以下が表示されればHosting完了。

備考

上記に付随してshellファイルを作成

• setup.sh
• firebase-hosting.sh

setup.sh

$ cd <project_path>
$ touch setup.sh
$ chmod 777 setup.sh

setup.sh

#bin/bash

rm -Rf node_modules
npm install

firebase-hosting.sh

$ cd <project_path>
$ touch firebase-hosting.sh
$ chmod 777 firebase-hosting.sh

firebase-hosting.sh

#bin/bash

npm run generate
firebase deploy

できたファイル群(-L 1)

.
├── README.md
├── assets
├── components
├── database.rules.json
├── dist
├── firebase-hosting.sh
├── firebase.json
├── layouts
├── middleware
├── node_modules
├── nuxt.config.js
├── package-lock.json
├── package.json
├── pages
├── plugins
├── public
├── setup.sh
├── static
└── store