Google Cloud の Artifact Registry を使った private な npm package の管理 次世代エンターテインメント事業本部 TIPSTAR開発部 クライ アントグループ Webチーム 吉川勇太郎

自己紹介 吉川 勇太郎
 吉川 勇太郎 YUTARO YOSHIKAWA プロフィール 基本情報
 所属 TIPSTAR Webチーム 基本 長野/1998年8月27日/O型 好きな食べ物 インドカレー 経歴 2021年に株式会社ミクシィ(現 株式会社MIXI)に新卒入社 2022年新卒研修のフロントエンド研修講師を担当 認定スクラムマスター

TIPSTAR Web の紹介

TIPSTAR Web の紹介 ● TIPSTAR とは競輪・PIST6・オートレースのネット投票を行うことができるサービ スです。 ● iOS・Android アプリの他 Web でもサービスを提供していて、ブラウザ上からも TIPSTAR のネット投票を行うことができます。

プロジェクト構成

プロジェクト構成 ● yarn workspace による monorepo 構成をとっています。 ● workspace 内訳 ○ アプリケーション本体（Next.js） ○ API Client ○ Storybook をホスティングするための Express server などなど… ● API は REST API ○ API 定義は OpenAPI による管理 ● ビルドしてパッケージングした Web アプリケーションは App Engine 上にホスティ ング

API Client

API Client の更新手順 1. OpenAPI.yaml の変更 2. Git Submodules の参照コミットの切り替え 3. API Client コードの生成 4. 新しい型定義の更新などあれば、それにあったデータ構造に修正 5. 差分をコミット 6. レビュー

API Client の課題点 ● OpenAPI.yaml の更新ごとに、人力で API Client を更新するのが辛い ○ 機械生成した差分のレビューは省きたい ○ API Client 自体の更新と、それに伴う破壊的変更の対応を分離したい ● monorepo でのパッケージ管理だと、複数バージョンの管理ができないので API Client 自体の更新と、それに伴う破壊的変更の対応を分離しづらい ● App Engine にデプロイするときのコード量上限に引っかかる ○ ビルドした成果物の必要なさそうなところを一部分 ignore したりあまりきれいではない…

monorepo から private npm registry に移すことのメリット

monorepo から private npm registry に移すことのメリット ● 複数バージョンをストアすることができるようになる ○ 例えばアプリケーションでは v1 をインストールしたままで、v1.1 の API Client を用意しておけるよう になる ○ API Client 自体の更新と、それに伴う破壊的変更の対応を分離したい ● コードを常に別のレジストリから引っ張ってこれるのでデプロイ時にパッケージの実 体がなくてもいい ○ Cloud Build 上で npm package としてイントールされるので

Artifact Registry

Artifact Registry とは？ ● Google Cloud のサービスの一つ ● Docker コンテナや npm パッケージなどをストアすることができる ● IAM によるアクセス権限管理ができるので、Google Cloud がメインのプロジェクト と相性がいい ○ Workload Identity を使えば、クレデンシャルファイルを GitHub リポジトリの secrets に置かずに 認証できる。

プロジェクトの変化

プロジェクトの変化 本体アプリケーション PJ の CI 上のビルド手順 1. Google Cloud のアクセストークンを生成して .npmrc に値を設定 2. 依存関係解決、テスト 3. App Engine デプロイ 4. Cloud Build 上でビルド処理

プロジェクトの変化 Cloud Build 上でのビルド処理 ● Buildpack というデプロイしたアプリケーションを本番環境用のコンテナイメージに変換して くれるツールを使用してアプリケーションをビルドします。 ● プロジェクトで npm を使用している場合は Cloud Build 上で自動的に認証情報が記載さ れた .npmrc ファイルを生成して、Artifact Registry などでストアしている npm package を取得できます。 ● yarn v1 の場合は、Cloud Build にデプロイする前にアクセストークンを書き込んだ .npmrc ファイルをあらかじめ含めておくことで Cloud Build 上で依存関係解決を可能にし ます。

プロジェクトの変化 API Client を管理しているレポジトリでの CI 1. Google Cloud のアクセストークンを生成して環境変数に設定 1. Workload Identity federation 認証 2. gcloud auth print-access-token 2. OpanAPI.yaml の fetch 3. npm package 生成 1. OpenAPI generator を使用して ES modules, CommonJS 両対応の npm package を生成 4. npm publish 5. Artifact Registry に新しいバージョンの npm package をストア 6. Slack に完了通知

プロジェクトの変化 API Client の更新を自動化することで、運用工数の削減 ○ API Client の更新は GitHub Action dispatch によるリリースボタンをクリックするだけ ○ 新バージョンの API Client 以降時は package.json の更新と新しい型定義の対応のみの差分に 減る

おわりに

おわりに Web チームではこういった新しい取り組みを日々実践しつつプロダクトの改善に取り組 んでいます。 今後もより品質の高いプロダクトを素早く提供していくために模索し続けます。

No content