今回は12月にリリースをしたMangaWithを構成する技術要素について紹介したいと思います！
MangaWithについて
MangaWithは2018年12月にリリースをしたスマホ向けWEBマンガサービスです。
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を利用しています（速度改善は別の記事にしたいと思います）
インフラ
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を分けた構成にしていますが、これは本当に負荷の高いサービス単位でスケールさせるために工夫をした点になります。
Cloud Storage
画像データ等は Cloud Storageに格納して、CDN経由で配信しています。
Cloud Memorystore
Redisの環境として利用しています。
Cloud SQL
データベースの環境として利用しています。
Container Registry
DockerイメージはContainer Registryに保存しています。
Cloud Build
CDとして利用しています。
GitHubのMergeをフックに、Dockerイメージのビルドやデータベースのマイグレーション、Kubernetes Engineへのリリースが実行されます。
Cloud IAM
権限の管理に利用しています。
Stackdriver Monitoring, Stackdriver Logging
ログの管理に利用しています。
BigQuery
Stackdriver Loggingのログを保存しています。
Elastic App Search
マンガの検索にElastic App Searchを利用しています。
最後に
いかがでしたでしょうか？MangaWithはかなりシンプルな構成になっていると思います。
MangaWithはまだリリースしたばかりですが、更に良いサービスになるよう精一杯取り組んでいきますので宜しくおねがいします！
GameWithは、ゲームが大好きで、新しい技術をどんどん使っていきたいという方を大募集中！ Wantedly でもよいので是非お気軽にお声がけください！
