Google Cloud の Artifact Registry を使った private な npm package の管理【MIXI TECH CONFERENCE 2023】

MIXI TECH CONFERENCE 2023
にてお話した吉川の資料です。

動画：https://youtu.be/TCNogLzvdSo

https://techcon.mixi.co.jp/d3-4

Transcript

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

   View Slide

2. 自己紹介
   吉川 勇太郎

   吉川 勇太郎
   YUTARO YOSHIKAWA
   プロフィール
   基本情報

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

   View Slide

3. TIPSTAR Web の紹介
   

   View Slide

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

   View Slide

5. プロジェクト構成
   

   View Slide

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

   View Slide

7. API Client
   

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

12. Artifact Registry
    

    View Slide

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

    View Slide

14. プロジェクトの変化
    

    View Slide

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

    View Slide

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

    View Slide

17. プロジェクトの変化
    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 に完了通知
    

    View Slide

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

    View Slide

19. おわりに
    

    View Slide

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

    View Slide

21. View Slide