サマーインターンシップの概要

バイセルのサマーインターンシップは開催月それぞれに異なったテーマが与えられており、そのテーマに沿って企画から実装までを5日間で行うハッカソン形式で開催しました。

初日に実際にバイセルのビジネスサイドの業務の見学とユーザーインタビューを行い、それの元に企画・設計・実装をし、最後に成果物を役員陣に発表してフィードバックを頂くというスケジュールです。

サマーインターンシップ開催に当たって

HasuraやGraphQLなどバイセルが実際に使用しているモダンな技術に触れて欲しい
5日間の限られた時間の中でスムーズに実装に入れるようにしたい

という2つの観点から、ベースとなるアーキテクチャはバイセルのエンジニア側で構築しておき、学生はそれを自由に使用して良いというスタンスで開発をしてもらいました。

ここからはそのアーキテクチャについて詳しく紹介していきたいと思います！

全体像

アーキテクチャの全体像は下記になります。バイセルで実際に使用しているアーキテクチャを元に作られているので、インターン用とは言えかなり作り込まれたものになっています。

クラウドはGCPで、リソースはTerraformで管理しています。

リポジトリはモノレポでTerraform、バックエンド、フロントエンドが全て同じリポジトリに含まれています。

CI・CDも組み込み済みでmainブランチにPRをマージすることですぐに本番環境に反映されるようになっています。

.
├── docs/
├── hasura/
├── next/
├── rs/
├── terraform/
├── Makefile
└── README.md

またアプリケーションとは別にバイセルの商品マスタや買取データも一部使用できるように、あらかじめCloudSQLやBigQueryに用意しました。

バックエンド

APIの規格はGraphQL、DBはPostgresで、Hasuraを使用してDBのスキーマからGraphQLサーバーを自動生成しています。

またHasuraでカバーできないカスタムロジックは別途GoでGraphQLサーバーを用意してあります。

Goのサーバーはスキーマファーストで開発できるようにgqlgen、ORMはHasuraを使っている関係でマイグレーションは不要なのでDBのスキーマからGoの構造体を自動生成できるSQLBoilerを使用しています。

今回のインターンではカスタムロジックが必要になるほど複雑な要件にはならなかったので、Goのサーバーが使用されることはありませんでした。

フロントエンド

フレームワークはNext.js、言語はTypeScriptを使用しています。Next.jsのデプロイ先はNode環境のCloud Runになっているので必要に応じてSSRが行えるようにしてあります。

状態管理にはApolloClient、TypeScriptの型やApolloClientのhooksの自動生成にGraphQL Code Generatorを使用しています。

CI・CD

CI・CDはGithub Actions上で行っており、OIDCを利用することでkeylessで実行できるようになっています。

前述したように今回の構成はモノレポで作られており、フロントエンド・バックエンドのコードがディレクトリで分かれているので、ブランチへのpushをトリガーにディレクトリごとに別々のCIが発火するようになっています。

CIではフロントエンド・バックエンド共にコンパイルやLinter、テストなどを実行するようにしていますが、チームごとにカスタマイズすることを前提としました。実際自分がメンターを担当したチームでは開発速度を重要視してCIではGoとTypeScriptのコンパイルのみを実行して、Linterなどは実行しないようにして開発を進めていました。

CDでは主にビルドしたコンテナをArtifact Registryにpushして、Cloud Runのリビジョンを更新しています。またCloud RunはGCP外部からのアクセスを許可しないようにしているので、Hasuraのメタデータやマイグレーションの反映はCloud Run jobs経由で行っています。