Nuxt.js x Firebase事始め
この記事は、Nuxt.js #2 Advent Calendar 2018 の１日目の記事です。
２日目は @amishiro さんの 「nuxt.js(v2)でSEOに必要なmeta(OGP含む)を最低限コントロール」です。
せっかくのアドベントカレンダーが空いていたので、サクッと事始め的なものを書いておきます。
TL;DR
- 完全初心者向け
- Nuxtで作成した静的ウェブページをFirebaseにホスティング。
- 必要なインストール物は
Nodeとfirebase-toolsだけ。 - この記事を書くのを含めて、１時間で静的ページをホスティングできた。
環境
こんな感じ。
npx は npm が 5.2.0 以降であれば何もせず使えます。
$ node -v v10.5.0
$ npm -v 6.4.1
$ npx -v 6.4.1
create-nuxt-appで雛形を作成
npx create-nuxt-app omiend_nuxt_advent_calendar_2018_2_day_one と言った感じでコマンドを実行。
$ npx create-nuxt-app omiend_nuxt_advent_calendar_2018_2_day_one
npx: 402個のパッケージを12.956秒でインストールしました。
> Generating Nuxt.js project in /Users/omiend/omiend_nuxt_advent_calendar_2018_2_day_one
? Project name omiend_nuxt_advent_calendar_2018_2_day_one
? Project description My glorious Nuxt.js project
? Use a custom server framework none
? Use a custom UI framework none
? Choose rendering mode Universal
? Use axios module no
? Use eslint no
? Use prettier no
? Author name omiend
? Choose a package manager npm
Initialized empty Git repository in /Users/omiend/omiend_nuxt_advent_calendar_2018_2_day_one/.git/
> fsevents@1.2.4 install /Users/omiend/omiend_nuxt_advent_calendar_2018_2_day_one/node_modules/fsevents
> node install
[fsevents] Success: "/Users/omiend/omiend_nuxt_advent_calendar_2018_2_day_one/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile
> nodemon@1.18.7 postinstall /Users/omiend/omiend_nuxt_advent_calendar_2018_2_day_one/node_modules/nodemon
> node bin/postinstall || exit 0
> nuxt@2.3.4 postinstall /Users/omiend/omiend_nuxt_advent_calendar_2018_2_day_one/node_modules/nuxt
> opencollective || exit 0
:=.
-=+=: :-
.-=+++=: :++=.
.-+++++++=++++=.
.=+++++++****++++.
:=+++++++******++*+:
:=+++++++********++*+:
:=+++++++**********++*+-
-=+++++++*************+*+-.
.-=======+**************++++=.
.........::::::::::::::::::::.
Thanks for installing nuxtjs 🙏
Please consider donating to our open collective
to help us maintain this package.
Number of contributors: 156
Number of backers: 134
Annual budget: $31,883
Current balance: $6,225
👉 Donate: https://opencollective.com/nuxtjs/donate
npm notice created a lockfile as package-lock.json. You should commit this file.
added 1011 packages from 497 contributors and audited 13706 packages in 45.881s
found 0 vulnerabilities
To get started:
cd omiend_nuxt_advent_calendar_2018_2_day_one
npm run dev
To build & start for production:
cd omiend_nuxt_advent_calendar_2018_2_day_one
npm run build
npm start
何かいろいろ聞かれますが、今回はnuxtで作った静的サイトをサクッとfirebaseにホスティングさせるだけの目的なので、全てそのままエンターで大丈夫です。
ローカルで立ち上げ
$ cd omiend_nuxt_advent_calendar_2018_2_day_one
$ npm run dev > omiend_nuxt_advent_calendar_2018_2_day_one@1.0.0 dev /Users/omiend/omiend_nuxt_advent_calendar_2018_2_day_one > nuxt ℹ Preparing project for development 11:36:53 ℹ Initial build may take a while 11:36:53 ✔ Builder initialized 11:36:53 ✔ Nuxt files generated 11:36:54 ✔ Client Compiled successfully in 9.56s ✔ Server Compiled successfully in 8.37s ℹ Waiting for file changes 11:37:09 ╭─────────────────────────────────────────────╮ │ │ │ Nuxt.js v2.3.4 │ │ Running in development mode (universal) │ │ Memory usage: 142 MB (RSS: 218 MB) │ │ │ │ Listening on: http://localhost:3000 │ │ │ ╰─────────────────────────────────────────────╯
こんな画面が出ればOK!
firebase-toolsのインストール
firebaseの設定やデプロイに利用するのでインストールしていきましょう。
$ npm install -g firebase-tools
Firebaseの設定
下記ページに移動（Googleのアカウントが必要）
https://console.firebase.google.com/u/0/?hl=ja
プロジェクトを追加
プロジェクト名に omiend-nuxt-ac-2-2018-day-1 などと入力（30文字以内、かつ全体で一意な値が必要）
準備中・・・
準備完了！
アプリにfirebaseの設定
アプリのルートディレクトリなんかで。
下記コマンドでfirebaseにログイン。
$ firebase login
firebaseアプリとしての初期化。
とりあえずホスティングするだけなので、Hostingだけチェック。
$ firebase init
######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########
You're about to initialize a Firebase project in this directory:
/Users/omiend/omiend_nuxt_advent_calendar_2018_2_day_one
? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices.
◯ 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
先程作成したアプリを選択。
（あれ、もしかしてここでプロジェクト作れるっぽいですね・・・）
First, let's associate this project directory with a Firebase project. You can create multiple project aliases by running firebase use --add, but for now we'll just set up a default project. ? Select a default Firebase project for this directory: [don't setup a default project] ❯ omiend-nuxt-ac-2-2018-day-1 (omiend-nuxt-ac-2-2018-day-1) [create a new project]
nuxtの静的ページが成果物として吐き出されるディレクトリがデフォルトで dist となっているので、ここでは dist と入力。
Your public directory is the folder (relative to your project directory) that will contain Hosting assets to be uploaded with firebase deploy. If you have a build process for your assets, use your build's output directory. ? What do you want to use as your public directory? (public) dist
こちらはどちらでも。
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)
すると、firebase標準のファイルが dist/ に書き込まれます。
$ tree dist dist ├── 404.html └── index.html
また、 .firebaserc と firebase.json が作成されます。
中身を軽く確認しておきましょう。
{
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
nuxtの静的ページを作成する
下記コマンドで、 dist/ に静的ページを吐き出してくれます。
$ npm run generate
> omiend_nuxt_advent_calendar_2018_2_day_one@1.0.0 generate /Users/omiend/omiend_nuxt_advent_calendar_2018_2_day_one
> nuxt generate
ℹ Production build 12:02:39
✔ Builder initialized 12:02:39
✔ Nuxt files generated 12:02:39
✔ Client
Compiled successfully in 11.46s
✔ Server
Compiled successfully in 1.06s
Hash: e0659d0d10dfa2256b37
Version: webpack 4.26.1
Time: 11466ms
Built at: 2018/12/01 12:02:57
Asset Size Chunks Chunk Names
14c95cbe138218495c1c.js 134 KiB 1 [emitted] commons.app
49b161f7000b548f9edc.js 3.72 KiB 2 [emitted] pages/index
LICENSES 426 bytes [emitted]
e32c00ed64980e8a41cb.js 2.18 KiB 3 [emitted] runtime
ef7aa52f949e4d319068.js 31.6 KiB 0 [emitted] app
+ 3 hidden assets
Entrypoint app = e32c00ed64980e8a41cb.js 14c95cbe138218495c1c.js ef7aa52f949e4d319068.js
Hash: 134f36df68087978ceee
Version: webpack 4.26.1
Time: 1061ms
Built at: 2018/12/01 12:02:58
Asset Size Chunks Chunk Names
server-bundle.json 195 KiB [emitted]
Entrypoint app = server-bundle.js
ℹ Generating pages 12:02:58
✔ Generated /
ここで吐き出されたファイル群を、firebaseにホスティングします。
firebaseにデプロイ
下記コマンドで、firebaseにデプロイします。
$ firebase deploy === Deploying to 'omiend-nuxt-ac-2-2018-day-1'... i deploying hosting i hosting[omiend-nuxt-ac-2-2018-day-1]: beginning deploy... i hosting[omiend-nuxt-ac-2-2018-day-1]: found 9 files in dist ✔ hosting[omiend-nuxt-ac-2-2018-day-1]: file upload complete i hosting[omiend-nuxt-ac-2-2018-day-1]: finalizing version... ✔ hosting[omiend-nuxt-ac-2-2018-day-1]: version finalized i hosting[omiend-nuxt-ac-2-2018-day-1]: releasing new version... ✔ hosting[omiend-nuxt-ac-2-2018-day-1]: release complete ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/omiend-nuxt-ac-2-2018-day-1/overview Hosting URL: https://omiend-nuxt-ac-2-2018-day-1.firebaseapp.com
アプリの確認
firebaseのアプリを作成する際に入力した一意な値（ omiend-nuxt-ac-2-2018-day-1 ）がそのままホスティングのURLに利用されます。
omiend-nuxt-ac-2-2018-day-1.firebaseapp.com
無事にデプロイが終わったら確認してみましょう。
おわり
たった数コマンド打っただけで、簡単に静的サイトを公開出来るとは、まったくもってすごい時代です。
ステキですね。
