Nuxt.js + Firebase チュートリアル

Nuxt.js と Firebase で Single Page Application を作成するチュートリアル。

ツール

Nuxt.js

サーバーサイドレンダリングする Vue.js アプリケーションを簡単に作ることができるフレームワーク。

Vue.js を直接使うよりNuxt.js で開発したほうが、短時間でパフォーマンスの高いサイトが作れるとのこと。

Firebase

Firebase Hosting は静的ファイルのホスティングサービス。

無料枠に Spark プランというのがあり、下記の条件までなら無料で使える。

  • データ容量 : 5G
  • データ転送量 : 1G/日
  • アップロード操作 : 20,000回/日
  • ダウンロード操作 : 50,000回/日

チュートリアル

Nuxt.jsとFirebaseを使って簡単なWebサービスを作る<導入編>を参考に。

準備

npm パッケージマネージャーをインストール。 JS 系はこいつで管理する。

$ brew install npm

$ npm -v
6.4.1

Vue CLI をインストール。

$ npm install -g @vue/cli @vue/cli-init

$ vue --version
3.0.4

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

Nuxt.js を使ったスターターテンプレート

Nuxt.js テンプレートを利用する。プロジェクト名は「nuxt-sample」。

$ vue init nuxt-community/starter-template nuxt-sample

中身を見てみる。このままインストールを行えば、 Nuxt の ver2 が入るようだ。

$ cat nuxt-sample/package.json
{
  "name": "nuxt-sample",
  "version": "1.0.0",
  "description": "nuxt-sample",
  "author": "runble1",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  },
  "dependencies": {
    "nuxt": "^2.0.0"
  },
  "devDependencies": {
    "babel-eslint": "^8.2.1",
    "eslint": "^4.15.0",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-vue": "^4.0.0"
  }
}

問題ない場合は、下記コマンドでインストールする。

$ cd nuxt-sample
$ npm install

ローカル PC上でアプリを立ち上げてみる。

$ npm run dev

ここでエラーが発生した。

TypeError: Cannot read property 'eslint' of undefined
    at Object.module.exports (/Users/runble1/work/nuxt-sample/node_modules/eslint-loader/index.js:148:18)

NuxtのESLintのエラー対応 を参考に修正する。

$ vim nuxt.config.js

build: の部分を下記に修正。

build: {
  /*
   ** Run ESLint on save
   */
  extend(config) {
    if (process.server && process.browser) {
      config.module.rules.push({
        enforce: 'pre',
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        exclude: /(node_modules)/
      })
    }
  }
}

再度立ち上げなおす。

$ npm run dev

下記 URL にアクセスできたら完了。

http://localhost:3000

Firebase Hosting のプロジェクトを作成

下記 URL からアクセス。GCPコンソールにリンクはなかった。

  1. https://console.firebase.google.com/ へアクセス
  2. スタートガイド
  3. プロジェクトを追加
  4. プロジェクト名を入力、規約に同意
  5. プロジェクトの作成
  6. 完了画面で「次へ」を押す
  7. Firebase の管理画面に遷移される

Nuxt.js のプロジェクトを Firabase Hosting にデプロイ

Firebase CLI をインストール。

$ cd nuxt-sample
$ npm install -g firebase-tools

ターミナル上で Firebase にログイン。

$ firebase login

ブラウザ側で認証画面が表示されるため、認証する。

Firebase のホスティング初期設定を行う。

$ firebase init hosting

以下の質問されるので答えていく。この質問で答えた値は .firebaserc と firebase.json というファイルに保存されているので、あとで修正が可能。

  • ? Select a default Firebase project for this directory:
    →自分のプロジェクトを選択
  • ? What do you want to use as your public directory?
    →dist
  • ? Configure as a single-page app (rewrite all urls to /index.html)?
    →No

dist ディレクトリは一旦削除。

$ rm -rf dist/

nuxt を spa モードでビルドする。

$ vim nuxt.config.js

mode: ‘spa’ を追記。

module.exports = {
  mode: 'spa',

Nuxt.js のプロジェクトをビルド。

$ npm run build

Firebase にデプロイ。

$ firebase deploy

=== Deploying to 'nuxt-sample-c1f33'...

i deploying hosting
i hosting[nuxt-sample-c1f33]: beginning deploy...
i hosting[nuxt-sample-c1f33]: found 9 files in dist
✔ hosting[nuxt-sample-c1f33]: file upload complete
i hosting[nuxt-sample-c1f33]: finalizing version...
✔ hosting[nuxt-sample-c1f33]: version finalized
i hosting[nuxt-sample-c1f33]: releasing new version...
✔ hosting[nuxt-sample-c1f33]: release complete

✔ Deploy complete!

Project Console: https://console.firebase.google.com/project/nuxt-sample-c1f33/overview
Hosting URL: https://nuxt-sample-c1f33.firebaseapp.com

https://nuxt-sample-c1f33.firebaseapp.com へアクセスすると、公開されてる。

独自ドメインを設定することも可能

参考

Nuxt.jsとFirebaseを使って簡単なWebサービスを作る<導入編>

スポンサーリンク
ad
ad

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
ad