Nuxt.js製のPWAアプリをFirebaseホスティングで公開する

JavaScript

【前提条件】

・node.js (npm)

・yarn

・vue

以上が導入済み

 

Firebaseでプロジェクト作成

Firebaseは、Googleが提供しているサービスのためGoogleアカウントでログインするだけで始めることができるため非常に簡単です。

1. 早速、https://firebase.google.com からFirebaseへ

2. 右上の 「コンソールへ移動」をクリックして、Googleアカウントでログイン(無い方は作りましょう)

3.「プロジェクトを追加」から新しいプロジェクトを作成

※ 以下、プロジェクト名:test で作成したと仮定して解説していきます

 

firebase-toolsをインストール

Firebaseへの操作をコマンドラインからできるようにするために「firebase-tools」をインストールします。

// windowsの場合sudo不要
$ sudo npm install -g firebase-tools

// バージョン確認(大文字Vにする)
$ firebase -V

// コマンドからログインできるか確認(おまけ)
$ firebase login

[Enter]で実行するとブラウザが立ち上がり、ログインフローが開始される。そのまま、Googleアカウントでログイン。「Firebase CLI Login Successful」が立ち上がったら成功!

 

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

// test-projectというNuxtアプリを作成する
$ vue init nuxt-community/starter-template test-project

// プロジェクトに移動
$ cd test-project

// packageをインストール
$ npm install

// サーバー起動
$ npm run dev

http://localhost:3000でNuxtのデフォルトページが開いたらOK!

 

デプロイする

firebase.jsonを作成

Firebase Hostingにデプロイするためにpackage.jsonと同じ階層にfirebase.jsonを作成する。

{
 "hosting": {
   "public": "dist",
   "ignore": [
     "firebase.json",
     "**/.*",
     "**/node_modules/**"
   ]
 }
}

 

ビルドを行う

するとdistディレクトリが生成される

$ npm run generate

 

firebaseのプロジェクトに登録

注意:Firebaseで作成したプロジェクト名の裏に英数字が追加されることがあるので、その場合は裏の英数字を含めたものがプロジェクト名となる(例:test-rf274)

$ firebase use --add test-rf274

 

デプロイする

$ firebase deploy

 

うまくいくと、こんな感じのURLでアクセスできるようになります。

https://test-project.firebaseapp.com/

 

Lighthouseで測定してみる

Progressive Web Appが54で低いです。これは、PWA化していくことで大幅な改善が見込めます。

 

PWA対応していく

@nuxtjs/pwaを導入

Nuxt.js公式のPWA用のモジュールを使用してお手軽PWA化していきます。

$ yarn add @nuxtjs/pwa

 

nuxt.config.jsにモジュールを追記

build: {
   /*
   ** Run ESLint on save
   */
   extend (config, { isDev, isClient }) {
     if (isDev && isClient) {
       config.module.rules.push({
         enforce: 'pre',
         test: /\.(js|vue)$/,
         loader: 'eslint-loader',
         exclude: /(node_modules)/
       })
     }
   }
 },
// 以下を追記
 modules: [
   '@nuxtjs/pwa',
 ],
  manifest: {  
      name: "test-project", 
      lang: 'ja'  
  },

 

PWAで使用するアイコンを設定

static直下にてきとうなアイコン(512×512以上)を追加しましょう。

static/icon.png

 

.gitignoreに下記を追記

# Service Worker
sw.*

 

ビルド+デプロイ

// ビルド
$ npm run generate

// デプロイ
$ firebase deploy

 

Lighthouseで測定すると、素晴らしい結果が!

 

 

以下の記事も合わせてご覧ください!

Nuxt × Firebaseでデータベース(firestore)を扱う
この記事は、Nuxt+firebase環境が用意されている前提の記事です。まだの方は以下の記事で、Nuxt+firebase環境を用意してください。 「Nuxt.js × FirebaseでPWAアプリを公開する」 Vuex...