Edited at

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

More than 1 year has passed since last update.


Nuxt


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

参考

$ vue init nuxt-community/starter-template <project-name>

$ cd <project-name>
$ npm install
$ npm run dev

nuxt project.png

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


FireBaseプロダクトの作成

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

Firebase console.png

プロジェクト名とリージョンを選択します。

この時に生成される プロジェクトIDがaliasとなっています。

この後のfirebase initでプロジェクトIDを選択するので確認しといてください。

Firebase console (1).png


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完了。

nuxt project.png


備考

上記に付随して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