自社コーポレートサイトをWordpressからNuxt.js&Firebaseに移行したお話

こんにちは、キャメルスタジオのフロントエンドエンジニアの谷口です。
今回は弊社キャメルスタジオのコーポレートサイトを、長年続けていたWordPress運用からNuxt.jsとFirebaseの運用へ移行したお話をさせて頂きます。

移行した経緯

2010年からWordPressによる運用を始めていたこともあり、このあたりの負債がかなり積み上がっておりました。

具体的には、
・当時から利用していたプラグインの更新が数年前で止まっている
・様々なプラグインが水面下で動いているので表示が遅い
・WordPress5.0以降に実装された新エディタ（Gutenberg）用に記事の記述を変更しなければならない

またサイトの構成自体の問題もありました。
・WORKS（実績紹介）が画像1枚とポップアップ表示のみ、といった領域に制限があるレイアウト
・お問い合わせがメールアドレス（<a href="mailto:***">〜）のみの記載しかなく、連絡する側にはハードルが高い

こうした問題があり、リニューアルを行うのなら今後はアップデートの考慮をせずに済み、SPAを組み合わた表示速度の改善が行えるツールの選定をすることにしました。

ツールの選定

フロントエンド界隈でよく耳にしていたVue.jsのフレームワーク「Nuxt.js」とGoogleが提供している「Firebase」を利用しSPAサイトを作成いたしました。

また社員から「NEWS（お知らせ）やWORKS（実績紹介）の更新を手軽に行いたい」との要望がありましたので、wordpressのような管理画面もNuxt.jsで作成いたしました。
ページの紐付けであったりログイン周り、セキュリティなども考える必要がありましたので結構大変でしたね。

FirebaseとNuxt.jsのフォローに関して

SPAの実装によりサーバー側のnode.jsが使用できなかったので代わりとしてPHPを使用しました。
主にログイン周りやAPI、管理画面で登録した画像の保存、お問い合わせなどに使用しています。

管理画面の実装方法に関して

ログインに関しては Firebase Authentication を使用し、登録しているユーザーのみ管理画面の閲覧・変更を可能としました。

ログイン認証はFirebase、自動ログアウトなどに関してはPHPを使用しました。
新規登録した際の確認メールを送るプログラムなども自作していたのですが、FIrebaseにはデフォルトでそういった機能を簡単に実装できる記述があります。

下記の記述で簡単に実装ができます。
※ 別記事で詳しく説明する予定です。

firebase.auth().sendEmailVerification()

データベースに関しては、データ構造がJSONツリーで取り扱いやすい Firebase Realtime Database を採用いたしました。
データベースにはセキュリティルールを設定する箇所があり、開発時はテストモード（読み書きすべて可能）の状態で開発を進めていっても問題ないのですが、本番公開する際はロックモードにしセキュリティを強化する必要があります。

これは実際にあった問題なのですが、2018年6月にFirebase利用企業の62 %が、データベースのセキュリティルールに問題があり、機密情報などが公開されていたとセキュリティ会社の調査によって判明しています。

合計1億件以上の個人情報がFirebaseの脆弱性によって公開状態に

恐らくですが、テストモードの記述（読み書きが全ユーザー可能）という状態で公開してしまっているのだと思われます。

{
    "rules": {
        "read": true,
        "write": true
    }
}

このreadとwriteをfalseにしそれぞれ作成したテーブルに対してセキュリティを設定していきます。
値をfalseにすることで「テーブルを新たに作成される」などといったことが無くなるので、公開する際はセキュリティルールの設定を忘れないようにする必要があります。

サイトについて

Nuxt.jsを導入したことにより、vuex や vue-router がデフォルトで入っているのでコーディングがスムーズに行えました。
pagesディレクトリにページを作成すると自動でrouteのパスを設定してくれるのはとてもありがたいですね。

ギミックに関して

トップページのファーストビューのアニメーションに関しては WebGL を手軽に扱える three.js を採用いたしました。
更新するたびに切り替わる仕様となっており、

１つ目は交差した線がたくさんありダイナミックに動くアニメーション

２つ目はいろんな図形のグラデーションがぐるぐる回るアニメーション

３つ目は煙がゆっくり動く幻想的なアニメーション

となっております。
サイトの看板になる部分でもあるため目を惹くようなアニメーションにいたしました。

以上、Nuxt.jsとFirebaseに移行したお話でした！
今後も技術的な記事などあげる予定なのでぜひご覧ください！
最後までお読みいただきありがとうございました。