GameWith Engineering Blog

GameWith のエンジニア、デザイナーが技術について日々発信していきます。

MangaWithを構成する技術要素 #GameWith #TechWith

こんにちは。GameWithのエンジニアのtiwuです。

今回は12月にリリースをしたMangaWithを構成する技術要素について紹介したいと思います!

MangaWithについて

MangaWithは2018年12月にリリースをしたスマホ向けWEBマンガサービスです。

f:id:tiwu_gamewith:20190205112645p:plain

MangaWithの詳細については、当社HP(https://gamewith.co.jp/2104)をご参照ください。

MangaWithを構成する技術要素

言語

まずは利用している言語から紹介したいと思います。

  • PHP
  • HTML
  • CSS
  • JavaScript

PHP

フレームワークは開発当初はLumenを利用していましたが、途中からLaravelに移行しました。

PHPは7.2、Laravelは5.7を利用しています。

移行の経緯はLaravel JP Conferenceで、「リリース直前にLumenからLaravelに移行した話」というタイトル登壇をするので見に来てください!

HTML

テンプレートエンジンとしてBladeを利用しています。

CSS

SCSSで記述しています。

Lintツールとしてstylelintを利用し、設計はFLCSSを採用しました。

JavaScript

特にフレームワーク等は利用しておらず、ES6 + webpack + Babelという構成です。

Ajaxにaxiosを、バナーのスライドにswiperを利用しています。

LintツールとしてESLintを利用して、テストはJestを利用しています。

開発環境

  • GitHub
  • docker
  • docker-compose
  • CircleCI
  • Codecov
  • SpeedCurve

GitHubへのpushをトリガーにLintやテストが実行されるようになっています。

カバレッジは Codecovで管理し、PHPUnitのテストは95%以上をキープしています。

速度の計測にSpeedCurveを利用しています(速度改善は別の記事にしたいと思います)

f:id:tiwu_gamewith:20190205184310p:plain

インフラ

MangaWithはGoogle Cloud Platformを利用しています。

  • Kubernetes Engine
  • Cloud Storage
  • Cloud Memorystore
  • Cloud SQL
  • Container Registry
  • Cloud Build
  • Cloud IAM
  • Stackdriver Monitoring
  • Stackdriver Logging
  • BigQuery
  • Elastic App Search

Kubernetes Engine

PHPとNginxでPODを分けた構成にしていますが、これは本当に負荷の高いサービス単位でスケールさせるために工夫をした点になります。

f:id:tiwu_gamewith:20190205123245p:plain

Cloud Storage

画像データ等は Cloud Storageに格納して、CDN経由で配信しています。

Cloud Memorystore

Redisの環境として利用しています。

Cloud SQL

データベースの環境として利用しています。

Container Registry

DockerイメージはContainer Registryに保存しています。

Cloud Build

CDとして利用しています。

GitHubのMergeをフックに、Dockerイメージのビルドやデータベースのマイグレーション、Kubernetes Engineへのリリースが実行されます。

f:id:tiwu_gamewith:20190205143807p:plain

Cloud IAM

権限の管理に利用しています。

Stackdriver Monitoring, Stackdriver Logging

ログの管理に利用しています。

BigQuery

Stackdriver Loggingのログを保存しています。

Elastic App Search

マンガの検索にElastic App Searchを利用しています。

最後に

いかがでしたでしょうか?MangaWithはかなりシンプルな構成になっていると思います。

MangaWithはまだリリースしたばかりですが、更に良いサービスになるよう精一杯取り組んでいきますので宜しくおねがいします!

GameWithは、ゲームが大好きで、新しい技術をどんどん使っていきたいという方を大募集中! Wantedly でもよいので是非お気軽にお声がけください!

www.wantedly.com