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-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 にアクセスできたら完了。
Firebase Hosting のプロジェクトを作成
下記 URL からアクセス。GCPコンソールにリンクはなかった。
- https://console.firebase.google.com/ へアクセス
- スタートガイド
- プロジェクトを追加
- プロジェクト名を入力、規約に同意
- プロジェクトの作成
- 完了画面で「次へ」を押す
- 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 へアクセスすると、公開されてる。
コメント