SINKCAPITAL
SINKCAPITAL
Comapny Blog
PWA+SPAのwebアプリ作成にnuxtjs+firebaseがめちゃ便利だった
tech

背景

 PWA+SPAのwebアプリを作る際にnuxt.js+firebaseを合わせて利用すると便利だったので、そこで得た知見をメモとして残しておこうと思います。まだ勉強を進めている途中のため不明点も多々があり、もしおすすめのやり方などをご存知の方がいらっしゃればコメントをいただけると幸いです。記事自体はこちらのQiita記事にも投稿していますが、こちらブログではシステム構成やコードなど詳細について書いていこうと思います。

構成の説明

ディレクトリ構成

 ディレクトリ構成としては以下のように大きく「terraform系・firebase系・nuxt.js系」の3つに分けています。

.
├── ci                              # CI周りのコードを格納するフォルダ
│   ├── deploy.sh                   # Nuxtデプロイシェル
│   ├── terraform_apply.sh          # terraformデプロイシェル
│   └── terraform                   # tfファイル格納フォルダ
│       ├── backend.tf              # terraform設定ファイル
│       ├── firebase.tf             # firebase全般周り
│       ├── firestore.tf            # firestoreのデータ格納ファイル
│       └── variables.tf
├── cloudbuild.yaml             # GCP Cloud Build設定ファイル
├── firebase.json                   # firebase設定ファイル
├── firestore.indexes.json          # firestoreインデックスファイル
├── firestore.rules                 # firestoreインデックスファイル
├── functions                       # firebase cloudfunction設定ファイル
│   └── ...
└── {{ アプリ名 }}                   # nuxt.jsアプリフォルダ
    ├── README.md
    ├── assets
    ├── components
    ├── jsconfig.json
    ├── layouts
    ├── middleware
    ├── node_modules
    ├── nuxt.config.js
    ├── package-lock.json
    ├── package.json
    ├── pages
    ├── plugins
    ├── static
    └── store

全体構成図

システム構成図
  • コード管理:github
  • cicd:GCP Cloud Build
  • ホスティング:firebase hosting
  • データベース:firebase firestore
  • 認証:firebase authentication

デプロイフロー

  1. githubでmasterブランチに対してpull requestをなげる
  2. cloud buildで変更を検知し、cloudbuild.yaml記載の内容を実行開始
  3. cloudbuild.yaml:terraform_apply.shを実行してterraformをデプロイ
  4. cloudbuild.yaml:deploy.shを実行してnuxt.jsをデプロイ
  5. cloudbuild.yaml:firebase deployコマンドを実行し、firebase関連のデプロイ

デプロイ用コードの説明

cloudbuild.yaml

ciにおいても大きく「terraform系・firebase系・nuxt.js系」の3つに分けてそれぞれデプロイしています。

substitutions:
  _TERRAFORM_VERSION_: 0.12.10
steps:
  - id: 'terraform apply'   # terraformのデプロイ
    name: 'hashicorp/terraform:${_TERRAFORM_VERSION_}'
    entrypoint: 'sh'
    args: ['./ci/terraform_apply.sh','dev']
  - id: 'nuxtjs deploy'     # nuxt.jsのデプロイ
    name: 'gcr.io/cloud-builders/npm'
    entrypoint: 'sh'
    args: ['./ci/deploy.sh']
  - id: 'firebase deploy'   # firebaseのデプロイ
    name: gcr.io/${PROJECT_ID}/firebase
    args: [ 'deploy', '--project=${PROJECT_ID}' ]
timeout: 3600s

※ firebaseのデプロイをcloud buildで行う際は、 firebase コミュニティ ビルダー の設定を行っておく必要があります

terraform_apply.sh

WORKSPACE=$1
 
cd ./ci/terraform
 
terraform init -backend-config="prefix=${WORKSPACE}" -reconfigure
 
if [ ! $(terraform workspace list | grep ${WORKSPACE}) ]; then
  # workspaceがない場合は新規作成を行う
  terraform workspace new ${WORKSPACE}
fi
terraform workspace select ${WORKSPACE}
 
echo 'terraform apply'
terraform apply -auto-approve -parallelism=50

deploy.sh

cd {{ アプリ名 }}
npm install
npm run generate

便利だと感じた箇所(コード付)

nuxt.js

静的サイトとして出力できる

以下コマンドを実行することによって静的サイトとしてコードを生成することができる。 (デフォルトだとdistフォルダ配下に作成される)

$ npm run generate

ページ内で利用する部品をコンポーネント化して再利用することができる

例えば以下のようなタイトルがちょっとおしゃれなカードなどをコンポーネントとして作っておけば、どのページからでも再利用することができます。

<template>
  <div>
    <v-card elevation="1" class="mb-5" tile>
      <v-card-title class="justify-center mt-10">
        <v-chip class="primary pl-15 pr-15 mt-n12" x-large>{{
          title
        }}</v-chip></v-card-title
      >
      <v-card-text>
        <slot />
      </v-card-text>
    </v-card>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '',
    },
  },
}
</script>

firebase

firestoreはterraformから利用できるためテストデータが準備しやすい

例えば以下のようなデータを作りたいとします

collectionfield内容
users---
.nameSTRINGユーザー名
.sexSTRING性別(男性
.ageINTEGER年齢

その場合は以下のようなterraformファイルを作っておけば、 dev環境の場合のみ初めからテストデータを準備することができます。 terraformであればランダムな名前や数値で複数生成することができるため、 テストデータを100件作って開発を進めるといったことができます。

resource "google_firestore_document" "users" {
  count = "${terraform.workspace == "dev" ? var.dev_data_count : "0"}"
  project     = google_firebase_project.default.project
  collection  = "users"
  document_id = format("USR-%s-%s", count.index, element(random_id.document_id.*.hex,count.index))
  fields      = templatefile("./user.json",{
    name = element(random_pet.name.*.id,count.index),
    age =  element(random_integer.age.*.result,count.index),,
    sex = element(random_shuffle.sex.*.result,count.index)[0],
    classroom_ref = element(google_firestore_document.classrooms.*.name, count.index)
  })
}

variable "dev_data_count" {
  default = 3
}

////////////////////////////////////////////////////////////////
// random id ランダムなIDを生成する
////////////////////////////////////////////////////////////////
resource "random_id" "document_id" {
  count = var.dev_data_count
  byte_length = 10
}

////////////////////////////////////////////////////////////////
// random pet ランダムな名前(英語)を生成する
////////////////////////////////////////////////////////////////
resource "random_pet" "name" {
  count = var.dev_data_count
  length = 1
}
 
////////////////////////////////////////////////////////////////
// random inteder ランダムな数値を生成する
////////////////////////////////////////////////////////////////
resource "random_integer" "age" {
  count = var.dev_data_count
  min     = 1
  max     = 50
}
 
////////////////////////////////////////////////////////////////
// random shuffle 配列からランダムに数値を取り出す
////////////////////////////////////////////////////////////////
resource "random_shuffle" "sex" {
  count = var.dev_data_count
  input = ["男性", "女性", "その他" ]
  result_count = 1
}

「user.json」

{
    "name": {
        "stringValue":"${name}"
    },
    "age": {
        "integerValue":"${age}"
    },
    "sex": {
        "stringValue":"${sex}"
    }
}

firestoreは複雑な権限管理が行える

firestoreのrule(権限管理)はかなり柔軟性が高く、 例えば上の例で「10才以上のユーザーのみ編集を行える」といった複雑な権限を簡単に設計できる

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /users/{userId} {
      allow read: if request.auth.uid == userId;
      allow create, update, delete: if resource.data.age > 9;
    }
  }
}

難しいと感じた箇所(コード付)

nuxt.js

storeでpromise系が入るとコードが複雑になる

promise系が入ると変更検知を行う必要があるため、 componentなどで分離しても基本的に複雑なコードになってしまいがちでした。 例えばfirestoreからuserのデータを取得する場合、 promiseを返却するかstore内のmutationを監視する必要があります。 個人的にはgetter内でうまく書いてgetterで取得すれば、 いい感じに待ってくれたらなぁって思いながら書いていました。 (もしいいやり方をご存知の方がいらっしゃれば教えていただけるととても助かります!)

promiseを返却する場合(store内)
export const actions = {
fetchTexts({ commit, getters, state }) {
    return new Promise((resolve, reject) => {
      firebase.auth().onAuthStateChanged((user) => {
        if (!user) {
          reject(new Error('not authenticated'))
        }
        db.collection('users')
          .doc({{ ユーザーID }})
          .get()
          .then((res) => {
            commit('setUser', res.data())
            resolve(res.data())
          })
          .catch((error) => {
            reject(new Error('error : ' + error))
          })
      })
    })
  },
}
mutationを監視する場合(page側のvueファイル内)
export default {
  ...
  mounted() {
    this.$store.subscribe((mutations, state) => {
      if (mutations.type === 'setUser') {
        this.userName = state.user.name
      }
    })
  }
}

firebase

firestoreでN対Nが作りにくい

firestoreはreferenceという機能があり便利なのですが、 それでもN対Nを結びつける際はいいやり方が特に思い付かず複雑になりがちでした。 僕の場合は以下のような対応で実施しているのですが正直いいやり方なのかは判断がつかないです。 (例としてuserとteacherを紐付ける場合)

collectionfieldfield内容
users----
.name-STRINGユーザー名
.sex-STRING性別(男性
.age-INTEGER年齢
.foods---
..food_refREFERENCE特定のteacherと紐づくreference
collectionfieldfield内容
foods----
.name-STRINGフード名
.users---
..user_redREFERENCE特定のuserと紐づくreference

感想

「S3の静的ホスティング・cdn版vuejs・uikit」のセットにハマって割と使っていたのですが、 nuxtjsを使うとコンポーネント化など便利な機能が多く自社サイトもnuxtjs+firebaseに切り替えたいなと感じました。 おそらく時間が空いたタイミングで実施すると思うので、 その際は「同じページを別の構成で作った場合どのような差分があるか」についてまとめていきたいと思います。 最後まで読んでいただきありがとうございました。

Nuxt上でのd3を利用した散布図の作成方法
櫻井 裕司
2021/10/29 櫻井 裕司
techdataAnalytics
クリック可能な散布図をNuxtjs上で作成する場合にd3.jsが汎用性が高く便利でした。利用するにあたって難しかった点などを備考録としてまとめています。
アクセスログを可視化しGAのデータを直感的に理解できる型態にする試み(ネットワーク型)
櫻井 裕司
2021/09/05 櫻井 裕司
techdataAnalytics
ビジネスに活きる分析を進める上で弊社では「理解できる」ことを重要と考えており、特に直感的理解は可視化を進める上で特に重要だと考える内容の一つです。弊社では様々なお客様のデータ分析を進める上で常により示唆の大きい可視化を追求しており、今回はその中で最近試みているネットワーク側の可視化についてまとめたいと思います。
代表櫻井による特別講演会が白陵高等学校で開かれました
櫻井 裕司
2021/07/31 櫻井 裕司
eventpersonal
2021年の夏に兵庫県の私立白陵高等学校において、代表櫻井による特別講演会を開催いたしました。今振り返って高校の頃の自分に伝えたいことについてお話しました。
Nuxtで動的ページを随時追加する場合にNot Foundとなる
櫻井 裕司
2021/05/31 櫻井 裕司
tech
Nuxtで動的ページを登録する方法はありますが、登録後に随時コンテンツが追加される際はNot Foundとなってしまうので、そう言った際の対処方法について
GKEをやめてCloud Runを始めてみました
櫻井 裕司
2021/04/19 櫻井 裕司
tech
firebaseで構築したシステムの裏で動かすバッチの負荷が大きく、cloud functionsで終わらなかったためCloud Runを利用してみました。動作確認までの知見等を雑多にまとめてみました。
AWSをやめてfirebaseを使い始めて感じたメリットやデメリットとそれの対応策(LT登壇内容)
櫻井 裕司
2021/03/26 櫻井 裕司
techeventpersonal
みそかつウェブ・GDG Nagoya主催の「around firebase」とCloud Native Nagoya主演の「Cloud Native Nagoya」にてfirebaseのLTをさせていただきました。そこで会話させていただいたfirebaseを使い始めて感じたメリット・デメリットについてまとめています。
s3のhostingでPWAを導入する方法
櫻井 裕司
2020/12/19 櫻井 裕司
tech
アプリ作成時にpwaが比較されることが多かったですが、実際にpwaを実装した経験がなかったため今回自社サイトをPWA化してみました。
dockerでseleniumを動かしてみる(chrome_headless)
櫻井 裕司
2020/12/06 櫻井 裕司
tech
seleniumの相談をいただくことが増えたため、seleniumの勉強もかねてdockerでの実行テストを行いました
THE DECKのイベントにお邪魔させていただきました
本林 秀和
2020/12/05 本林 秀和
eventpersonal
大学コンソーシアム大阪のイベント@The DECK にお邪魔してきました
flutter(dart)を触ってみた感想
櫻井 裕司
2020/11/18 櫻井 裕司
tech
android向けアプリへの対応も考慮してflutter(dart)を触ってみたので、感想をまとめておこうと思います。理解が深まっていく中で定期的にまとめていければと思います。
代表本林による特別講演会が滝高校で開かれました
本林 秀和
2020/11/07 本林 秀和
eventpersonal
2020年11月7日(土)愛知県の私立滝高校において、代表本林による特別講演会を開催いたしました。IT業界やデータサイエンスについてお話しました。
AWS・GCPを選ぶ際の観点
櫻井 裕司
2020/10/28 櫻井 裕司
tech
AWSかGCPを選ぶ際の観点について書き留めておこうと思います
CloudFormationとterraformの比較
櫻井 裕司
2020/10/04 櫻井 裕司
tech
AWS CloudFormationとterraformの両方を使ってみて感じた違いをまとめてみました。
iosのcallkit周りでできること
櫻井 裕司
2020/08/24 櫻井 裕司
tech
新規事業を検討する上でios(swift)の電話周りでできることを調査したため、調査結果をブログとして残しています。
【個人ブログ】CTOの株運用ブログ_順調な滑り出し
櫻井 裕司
2020/07/19 櫻井 裕司
personalstock
長年放置してた株に少し手を出してみました。自分なりに少し情報整理と分析と予想をしたので記事にしてみます。
総務省特定サービス産業実態調査のデータ分析
櫻井 裕司
2020/07/18 櫻井 裕司
techdataAnalytics
総務省がAPIで市場データを公開しており、分析技術向上と市場感を養うことを目的に定期的に分析を行なっていこうと思います。今回は「特定サービス産業実態調査」について見ていこうと思います。
「お絵かきつみ木バトル」をリリースしました
櫻井 裕司
2020/07/12 櫻井 裕司
techapp
タスク管理を二次元的に行うアプリ「お絵かきつみ木バトル」をリリースしました。SinkCapitalはデータコンサルですが、知見蓄積のため様々な媒体での実験的開発を行っています
総務省工業統計調査のデータ分析
櫻井 裕司
2020/07/11 櫻井 裕司
techdataAnalytics
総務省がAPIで市場データを公開しており、分析技術向上と市場感を養うことを目的に定期的に分析を行なっていこうと思います。今回は「工業統計調査」について見ていこうと思います。
【個人ブログ】CTOが個人的に株をはじめました
櫻井 裕司
2020/07/08 櫻井 裕司
personalstock
長年放置してた株に少し手を出してみました。自分なりに少し情報整理と分析と予想をしたので記事にしてみます。
総務省サービス産業動向調査のデータ分析
櫻井 裕司
2020/07/08 櫻井 裕司
techdataAnalytics
総務省がAPIで市場データを公開しており、分析技術向上と市場感を養うことを目的に定期的に分析を行なっていこうと思います。初回は「サービス産業動向調査」について見ていこうと思います。
タスク管理アプリ「タスククロス」をリリースしました
櫻井 裕司
2020/04/08 櫻井 裕司
techapp
タスク管理を二次元的に行うアプリ「タスククロス」をリリースしました。SinkCapitalはデータコンサルですが、知見蓄積のため様々な媒体での実験的開発を行っています
【terraform】gcpでcicd環境を構築する方法
櫻井 裕司
2020/01/04 櫻井 裕司
tech
企業サイトはAWSを利用しているのですが、要件によってはGCPの方が適している場合もあるため、GCPでのcicd構築も行いました。AWSと比較しつつ説明しているため是非ご参考にしてみてください。
【合格体験記】GCP_Cloud_Archtectに受かりました
櫻井 裕司
2019/12/23 櫻井 裕司
personalqualification
Google Professional Cloud Architectに合格したので、勉強法別のコスパをまとめてみました。
AWSでサブドメインなし(wwwなし)からサブドメインあり(wwwあり)へのリダイレクト設定
櫻井 裕司
2019/12/23 櫻井 裕司
tech
もともと企業サイトがサブドメインありで公開していたが、サブドメインなしでもエラーなく接続できるように設計。terraformで作成しているので是非ご参考ください。
マークダウンで記事を書けるようにしてみた
櫻井 裕司
2019/12/16 櫻井 裕司
tech
ホームページのブログをマークダウンを使用してかけるようにしました。gatsbyなどもありますが、今回はお手製cicd+pythonを使用してライトに作成しました。