Nuxt.js x Firebase事始め

この記事は、Nuxt.js #2 Advent Calendar 2018 の1日目の記事です。

2日目は @amishiro さんの 「nuxt.js(v2)でSEOに必要なmeta(OGP含む)を最低限コントロール」です。

せっかくのアドベントカレンダーが空いていたので、サクッと事始め的なものを書いておきます。

TL;DR

  • 完全初心者向け
  • Nuxtで作成した静的ウェブページをFirebaseにホスティング
  • 必要なインストール物は Nodefirebase-tools だけ。
  • この記事を書くのを含めて、1時間で静的ページをホスティングできた。

環境

こんな感じ。

npxnpm5.2.0 以降であれば何もせず使えます。

$ node -v
v10.5.0
$ npm -v
6.4.1
$ npx -v
6.4.1

create-nuxt-appで雛形を作成

github.com

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!

f:id:omiend:20181201114042p:plain

firebase-toolsのインストール

firebaseの設定やデプロイに利用するのでインストールしていきましょう。

$ npm install -g firebase-tools

Firebaseの設定

下記ページに移動(Googleのアカウントが必要)

https://console.firebase.google.com/u/0/?hl=ja

プロジェクトを追加

f:id:omiend:20181201113940p:plain

プロジェクト名に omiend-nuxt-ac-2-2018-day-1 などと入力(30文字以内、かつ全体で一意な値が必要)

f:id:omiend:20181201114417p:plain

準備中・・・

f:id:omiend:20181201114430p:plain

準備完了!

f:id:omiend:20181201114510p:plain

アプリに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

また、 .firebasercfirebase.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

無事にデプロイが終わったら確認してみましょう。

おわり

たった数コマンド打っただけで、簡単に静的サイトを公開出来るとは、まったくもってすごい時代です。

ステキですね。