さしぐめのブログ

Web / Meme / 海外アニメコミュニティ等の雑記。IDがモンテネグロドメインを内包してるって最高。

Vercelでゲームメディアを作ろう

この記事では、Vercelを使ったゲームメディアの運営について解説します。

例えば「ナポアンのマイクラNEXT」は、ナポクラで初のサーバーレス形式での公開がされています。

vercelについて

具体的には、「vercel」というサービスを使っているのですが、特筆すべき点としては

  • レンタルサーバー代が全く必要ない
  • FTPソフトも全く必要ない
  • レポジトリさえあれば公開ができる

という点です。このセクションでは、主にこの「vercel」にデプロイ(公開)しているサイトを運営・メンテナンス方法を解説します。

必要なもの

  • gitの経験
  • JSONの理解
  • PostmanやREST APIの理解
  • TypeScriptの経験

Firebaseを用意する

ナポアンのマイクラNEXTでは、これには以下が含まれます。

  • Firestore
    • 評価・コメントを記録する
    • ユーザーのガチャデータを記録する
  • Cloud Functions for Firebase
    • 記事を取得・ツイート数を取得する
    • エンティティガチャを回す
    • 定期的にFirestoreをバックアップする

それでは、FIirebaseを用意しましょう。

Firebaseプロジェクトの作成

こちらからFirebaseのプロジェクトを作成します。

https://firebase.com

Firestoreを用意する

  • 評価・コメントを記録する
  • ユーザーのガチャデータを記録する

これらの処理では、FirebaseのCloud Firestoreを使っています。

プロジェクトの地域を設定する

私はasia-northeast1を使っています。

Firestoreを有効化する

Firebaseのサイドメニューから、Firestoreを開いて、有効化してください。

Cloud functionsのセットアップ

レポジトリ上での作業

firebase init
cd ./functions

からの

firebase functions:config:set twitter.bearer="キー"
firebase functions:config:set twitter.secret="キー"
firebase functions:config:set contentful.public="キー"
firebase functions:config:set contentful.space="キー"
firebase functions:config:set contentful.limit="キー"
firebase functions:config:set contentful.manage="キー"
firebase functions:config:set contentful.preview="キー"
firebase functions:config:set contentful.maxage="キー"
firebase functions:config:set contentful.auth="キー"

でキーをセット。

データインポート

./firestore_import/firestore_sync.sh を自分のバケットに書き換えて、

firebase functions:config:get > .runtimeconfig.json
sh ./firestore_import/firestore_sync.sh

を実行してください。Firestore のデータがローカルにコピーされます。

emu

npm run dev

deploy

npm run deploy

Contentfulとは

Contentfulは、記事の公開や編集に使っている「CMS(コンテンツマネージメントシステム)」です。

そういえば、「ナポアンのマイクラ通常版」で使っているWordPressも「CMS」でした。

しかしContentfulはWordPressと決定的に違う点があります。

ContentfulはHeadless CMS

ContentfulはWordPressと違い、「ヘッドレスCMS」なのです。

https://en.wikipedia.org/wiki/Headless_content_management_system

Wikipediaには英語版のみ記事ができていますね。「それ自体がWebサイトを持たないが、記事の編集などができる場所」だと思ってください。日本製なら「microCMS」などがあります。

なんとこれ、記事を書いただけではブログは作れません。なんとサイト側は自分で用意する必要があるのです。

ナポアンのマイクラNEXTでContentfulを採用した理由

なぜ「ナポアンのマイクラNEXT」はこんなややこしいサービスを使っているかというと、クライアントにWordPressを使いたくなかったからです。

というか、Next.jsでプロトタイプの「PAWAA.APP」を作った時点で、これしかほぼ選択肢がありませんでした。

受験勉強をサボって最初に始めたのが「Next.jsでブログ作り」なんですが、その時に触ったNext.jsのexampleがContentfulを使っていたんです。

では、次のセクションからContentfulについて詳しく見ていきましょう。

(以下、準備中)


記事を投稿する (Posting article)

ログイン

Contentfulにログインしてください。

Copyright © 2021 Ryo Ando. Built w/ Love & Hatena Blog.