ゲームのお知らせページをJamstackで構築した

こんにちわ。 システム開発部ネットワーク課のsupercontinueです。

• ゲーム内お知らせやガチャの情報を扱うWebアプリケーションのサーバ側の仕組みを紹介します。
• Jamstack を採用して、低コスト・安全 な仕組みができました。

Jamstackとは

• Jamstackとは、フレームワークなどの具体的なものではなく、Webアプリケーションを対象とした設計パターンです。

• https://qiita.com/ozaki25/items/4075d03278d1fb51cc37 にわかりやすい説明があります。

特徴

• 基本的に、CI(継続的インテグレーション。Jenkinsなど)の利用を前提とした設計パターンです。

• たとえば、Jamstackではない従来型設計の典型であるWordpressに比べると、低コストで安全性も高く、スケール・イン＆アウトもしやすくなります。

  • なぜ、安全性が高いのか？
    • コンテンツが静的配置され、バックエンドでデータベースに接続する必要がなく、サーバの仕組みが単純になり、セキュリティを担保する必要がある機能が最小限になるからです。
  • なぜ、低コストなのか？
    • 高コストになりがちなデータベースサーバが不要になります。
    • サーバ側でレンダリング（ページの生成）が不要になるため、必要なCPUパワーが少なくなります。

• ブログやお知らせ・ガチャ・商品情報など、更新頻度があまり高くない、特定のフォーマット（レコード単位の情報）でページが構成される情報のサービスに向いています。

  • 多数ユーザーが高頻度で書き込みを行うようなサービスには向いていません。

• 複数のシステムで構成され、それぞれは小さいですがスクリプトを記述することが多くなるため、Wordpressのように非エンジニアでも管理できる可用性は失われます。いわゆる「フルスタック・エンジニア」が必要かもしれません。

本案件の構成要素

ヘッドレスCMS

• ヘッドレスCMSとは？
  • Wordpressではレンダリング機能とCMS機能が一体化しています。

• ヘッドレスCMSは、データを編集・アウトプットする機能を、独立して提供します。
  • ヘッドレスCMSを使う場合、ビルド、レンダリング機能を自前で用意する必要があります。

• ヘッドレスCMSとして、Cockpit を使いました。
  • Mongodbにデータをアウトプットします。
  • オンプレ環境のDockerで運用しました。

cockpitでの編集

• 複数ユーザーアカウント、ロールで運用できます。

• collection と singleton 、 asset の概念があります。

  • collection は複数レコードで構成されます。
    • お知らせ、ヘルプなどで使います。
  • singleton は単一レコードで構成されます。
    • ライセンス表示、利用規約などで使います。
  • どちらも、レコードのフィールドをカスタマイズできます。
    • 日付、時間、テキスト、Wysiwyg、数値、真偽値、オプション、、、
  • asset は基本的に画像ファイルです。

トップページ

スクリーンショット:cockpit:トップページ

編集画面の例

スクリーンショット:cockpit:記事編集1

スクリーンショット:cockpit:記事編集2

アセット画面

スクリーンショット:cockpit:アセット一覧

ビルド・スクリプト

• 下記のように、Cockpitの提供するREST APIを使って、jsonデータを持ってきます。

## お知らせ
if [ "${ENV_VERSION}" = ".prod" ]; then
    INFOMATION_FILTER='{"sort":{"releaseDate":-1,"releaseTime":-1},"filter":{"production":true}}'
else
    INFOMATION_FILTER='{"sort":{"releaseDate":-1,"releaseTime":-1}}'
fi
curl -s ${CMS_API}/collections/get/information?token=${COCKPIT_API_TOKEN} \
 -H "Accept: application/json" -H "Content-type: application/json" \
 -d ${INFOMATION_FILTER} \
 | python -m json.tool > gae/collections/information.json

• ゲームのレポジトリから、ゲームのマスターデータ（キャラクターやガチャなど）も参照します。

• 生成する静的データのディレクトリ構成

  • collections 以下には、複数レコードで構成されるjsonデータを置きます。

    例）

    • お知らせ information.json
    • ヘルプ help.json
    • ガチャ gacha.json

  • singletons 以下には、１レコードで構成されるjsonデータを置きます。

    例）

    • ライセンス表記 License.json
    • 利用規約 TermsOfService.json

• 画像などのファイルは、Cockpitの特定の場所にファイルとして保存されています。　デプロイ時に、CDNに同じファイルをコピーします。

サイト構成

• html, js, cssは、CDNに置くことも可能ですが、サイズが小さく更新しやすいのでGAEに置きます。
• 今回は node.js を使いましたが、サーバのスクリプトはとても小さいので、goでもpythonでもなんでもいいと思います。

Webページ

• ページの開発は riot を使いました。
  • vueのようにメジャーではありませんが、覚えることが少なくて楽で、ビルドも早いしサイズも小さいです。

• ブラウザやWebViewから、お知らせなどのデータを取得するには、フィルタなどを指定して、下記のようにAPIで動的に取得します。

      var url = '/api/collections/get/information';

      fetch(url, {
        method: 'post',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          filter: {infoType: self.infoType},
          limit: self.limit,
          skip: self.limit * (self.page - 1),
          sort: {releaseDate:-1, releaseTime:-1},
        })
      })

• サーバ側のスクリプト server.jsは、起動時に静的データを全てメモリに読み込み、リクエストに応じて、データを返します。

    const information = require('./collections/information.json');

    app.post('/api/collections/get/:collection', (req, res) => {
        // 指定した条件で抽出したデータをjsonで返す。
        ...

    app.get('/api/singletons/get/:singletonname', (req, res) => {
        // 指定した条件で抽出したデータをjsonで返す。
        ...

おわりに

• Jamstackは「コストとセキュリティが気になる」、「スクリプトが得意」なエンジニアに向いています。

• ブラックボックスがほとんどないので、問題が発生した時、解決できないリスクが少ないし、セキュリティも担保しやすいです。

  • Wordpressで深めの問題が起こったら、ほとんどの人は自力ではどうしようもないのとは対照的です。

• 導入にあたっては、CMSを使う人やサービスを運用する人の理解や、その人たちへのサポートが必要です。

---

リベル・エンタテインメントでは、このような最新技術などの取り組みに興味のある方を募集しています。もしご興味を持たれましたら下記サイトにアクセスしてみてください。 https://liberent.co.jp/recruit/