GCP無料枠で趣味のWebサービスを作った
結論
GCP無料枠でTCG「ファイアーエムブレムサイファ」の通販価格比較サイト「サイファログ」を最新の技術スタックで作ってみた。
動機
趣味で何かをしているとき、こんなザービスが欲しいなぁ、と思うことがよくあります。例えば、自分はトレーディングカードゲーム「ファイアーエムブレムサイファ」に嵌っているのですが、これがなかなか面白いです。
しかし、TCG あるあるなのですが、カードが一杯入っているボックスを複数買ったところで、欲しいカードは全部必要枚数揃わず、店舗や通販を利用して、カードを指名買いしていく必要があります。その際に、実際にその買おうとしている価格がボッタクリ価格ではなく適正なものなのか？ というのは分かりにくく、感覚的に買うと損をしてしまうことがあります。そこで、通販価格を一覧できるサイトを用意し、参考価格として用いたり、通販が安ければそのまま購入してしまおうと考え実行に移すことにしました。しかも、できればみんなに使って欲しい。
方法
といってもお金をかけたくない。お金がかかるのは基本的にはサーバー等のインフラ費用なんですが、Google Cloud Platform には登録して初年に貰える無料クレジットとは別に、一部サービスにはずっと無料で使い続けられる枠があり、それだけでそれなりのサービスが作れるよ、という情報を聞いたので試してみることにしました。また、アプリケーションの実装には、新しめの技術スタックを用いて、自分のエンジニアとしての勉強をすることにしました。
GCP
今回作るWebサービスは以下の GCP の要素を用いて構築します。
Google Compute Engine (GCE)
Google App Engine (GAE)
- サーバーアプリケーションを動かすために使用
- Kotlin + Springboot の API サーバーをデプロイ
Google Cloud Storage
GCP 無料枠
GCP の無料枠には注意点がいくつかあります。一つにリージョンが US に固定されます。そのため、インスタンス等を作成する際には US のリージョンを指定する必要があります。また、個々のサービスについても以下のような制約があります。
App Engine の方は意外とこの条件が調べても見つからなくて苦労しました。公式ドキュメントのヘルプ辺りを探すと出てきます。
技術
API サーバーとフロントエンドサーバーを分離して実装。深い理由はないですが、個人的に分離する方が好みだから、というぐらい。
API サーバー
- Springboot 2系 + Kotlin
自分の一番得意なサーバーフレームワークである Spring Web MVC を使い、更に Spring 5 系から正式にサポート対象になった Kotlin を用いて全てのサーバーのコードを記述しました。正直、Kotlin で書きにくかった箇所は幾つかありましたが (アノテーションの中でアノテーションを使えない等) 簡潔な記述による可読性は代え難い利便性があります。得意な分野なので、実装で困る事は無かったんですが、通販サイト毎のロジックを書いていくのに心が折れそうになりました。
Web フロントエンドサーバー
- gulp babel webpack vue ...
Web フロントエンド開発のツール群を用いての開発は自分にとっては、ほぼ未知の領域で一番苦労したのは開発環境を理解することです。最新の技術スタックを用いた開発を、上記のようなツール群を用いて一から作ろうと思っても、何から手を付けていいか分からない、という事態が発生するのは至極当たり前です。
そこで自分は上記のような、開発テンプレートを参考に、自分の使用したいライブラリなどに差し替えて、自分なりの開発環境を整えました。フロントエンドの開発は楽しい。iOS のアプリ書いてる時もそうですが、目に見える創意工夫というのは楽しいです。あと、個人的にチャレンジしたかったからという理由で SPA でサイトを作成、vue-router、vuex を SPA で作成する為に用いています。
MySQL (データベース) サーバー
- Docker
コンテナを使って MySQL サーバーを作ったというだけなのです。Google Container Registry にコンテナイメージをぶん投げて、そこにある VM へデプロイするを押すだけで環境構築完了します。とてもハッピー。時代はコンテナ。
ネットワーク帯域
VPS サーバーとかではあまり考えることはありませんでしたが、GCP に限らず、クラウド環境化では使用したネットワークによって料金がかかります。永年無料の範囲では、このネットワークについてもなかなか厳しく設定されており、そのためキャッシュ等を用いて帯域の節約を行ったほうが良いです。 API サーバーのレスポンスの gzip 圧縮や、 Cache-Controll ヘッダーを設定することで、GAE ではエッジキャッシュが有効になります。 また、Google Cloud Storage は公開設定にすると、エッジキャッシュが自動的に有効になります。これらを用いてネットワーク帯域の節約をおこなうことができます。
ハマった点
Google Cloud DNS が有料で一日数円かかってしまう事。ドメインを取得したところでレコード設定をすれば値段はかからないはず。また、Google App Engine のデプロイとかも少し手間取りました。Springboot を使ったサンプルなどは既に、Github 等に上がっているのですが、それを見てもいまいち
結果
まだ公開したばかりですが、ドメインを取得する代金だけで、（ドメインもタダで取得することはできます）Web サービスを作成することができました。ファイアーエムブレムサイファはすごくバランスの良い、面白いカードゲームなので、是非そちらに興味のある方や、こんなサービスが簡単に作れるんだと気になる方は是非訪れてもらえると嬉しいです。
