npmレジストリサービス開発にGitHub Codespacesを導入

Image of tomokota
Authors

npmエンジニアリングチームは最近、npmレジストリサービスのローカル開発にGitHub Codespacesを使うように移行しました。この Codespaces への移行により、私たちの内部開発ループの摩擦が大幅に減り、開発者の生産性が向上しました。


npmエンジニアリングチームは最近、npmレジストリサービスのローカル開発をGitHub Codespacesに移行しました。このCodespacesへの移行により、開発ループ内の摩擦が大幅に減り、開発者の生産性が向上しました。この投稿では、この移行から得た経験と学びを共有したいと思います。

npmレジストリサービスとは

npmレジストリサービスは、npmレジストリを動かすNode.jsのマイクロサービスで、30以上の異なるリポジトリに分散されています。各マイクロサービスは独自のリポジトリを持っており、Dockerを使ってコンテナ化されています。Codespacesでは、Visual Studio CodeでCodespaces上のDockerを使用してnpmレジストリサービスを開発します。

GitHub Codespacesは開発ループの摩擦を減らす

GitHub Codespacesを導入する前は、npmのローカル開発における重要なハードルは、複数のサービス間でコードをテストすることの難しさでした。複数のレジストリサービスをローカルで実行する簡単な方法がなく、テストはステージング環境に頼っていました。例えば、あるサービスのコード変更が、他の5つのサービスを含むユーザー・ワークフローに影響を与えることを検証するには、そのサービスをローカルで実行し、ステージング環境で残りの5つのサービスに接続するしかありませんでした。セキュリティ上の理由から、ステージング環境へのアクセスはVPN経由でのみ可能であり、コードのテストプロセスに別の複雑な要素を追加していました。

GitHub Codespacesにより複数のレジストリサービスをローカルで実行するプロセスを簡素化でき、この問題に対処できました。codespace内で作業する場合、開発ループにVPN接続を必要としなくなりました。この変更により、チームはVPN接続に関連する潜在的な問題から解放され、作業を開始するプロセスが大幅に簡素化されます。

開発者としては、デバッグのためにブレークポイントに頼ることが多くなっています。しかし、現在はすべてのレジストリサービスが1つのワークスペース内で実行されているため、Visual Studio Codeで複数のサービスにわたってコードをデバッグし、1つのサービスであるかのようにブレークポイントを設定できます。これは、ステージング環境内のサービスでブレークポイントを設定できなかった以前の開発者体験に比べ、大きな改善です。

GitHub Codespacesが開発者の生産性を向上

GitHub Codespacesによって、外部のコントリビューターも参加しやすくなりました。例えば、npmチーム以外のGitHubエンジニアがコントリビュートしたい場合、Codespacesを使えば数分で始められます。以前は、開発環境のセットアップとステージングリソースへのアクセス権限の付与に何日もかかり、デザインなど他のチームのパートナーが貢献できないこともよくありました。

ポートフォワードにより、codespace内で実行されているTCPポートにアクセスできます。GitHub Codespacesの自動ポートフォワードにより、テストやデバッグのためにローカルマシンのブラウザからサービスにアクセスすることができます。

Visual Studio Code for the Webで実現されているブラウザ内Codespacesには、どのコンピュータからでも作業できる柔軟性があります。これは、メインの仕事用のコンピュータから離れているが、変更をすぐにテストする必要がある場合に特に役立ちます。WebベースのCodespacesはブラウザだけで動作するため、インストールが不要です。

トラブルシューティングに時間がかかるだけでなく、他のマシンでの再現も難しいローカル環境の問題に頭を悩ませたことがあるでしょうか。Codespacesを使えば、数分以内に新しいCodespacesインスタンスを立ち上げて再スタートできます。何が良いかというと、古いCodespacesインスタンスを復旧する必要がなく、ただ破棄するだけである点です。

GitHub Codespacesの使用から学んだこと

GitHub Codespacesには時間を節約し、プロセスを自動化する機能がたくさんあります。ここでは、Codespacesの使用から学んだヒントをいくつか紹介します。

GitHub Codespacesのプレビルド機能は、devcontainerのスナップショットを作成し、Codespaceの起動時に使用できるすべてのクローンリポジトリをキャッシュすることで、新しいCodespaceの作成を高速化する優れた方法です。Codespacesのプレビルドではブランチの選択ができ、GitHub Actionsを活用してプレビルドの自動更新も可能です。

アクセストークンなどのアカウント固有の開発シークレットをリポジトリごとに Codespaces に保存して、Codespaces 内で安全に利用できます。これらのシークレットは環境変数として使用できます。

もう1つのヒントは、Visual Studio Code Dev Containerに特有のものです。Devコンテナのライフサイクルイベント(devcontainer.jsonのpostCreateCommand など)を利用して、Codespacesのセットアップをできるだけ自動化することを検討してください。最終的には、自動化によって節約できる時間と、その構築やメンテナンスに投資する時間のバランスです。しかし、利用するすべての人にメリットがあるため、一般的には自動化の方が時間の節約につながります。

もうひとつのコツは、GitHubのドットファイルを使ってコードスペースをパーソナライズすることです。ドットファイルとは、. で始まる Unix 系システム上のファイルやフォルダのことで、システム上のアプリケーションやシェルの設定を管理するものです。GitHub dotfilesを使って、Codespacesのパーソナライズ設定を行うことができます。

まとめ

GitHub Codespaces の採用は、npm レジストリサービスでの開発者の作業体験を大幅に改善しました。開発環境のセットアップにかかる時間が数時間から数分に短縮されただけでなく、より良いデバッグ体験を得られるようにもなりました。さらに、プレビルドのような時間節約機能も用意されています。このブログ記事が、私たちのCodespacesの使用方法に関する貴重な洞察を提供することを願っています。詳細については、GitHub Codespacesのドキュメントを参照してください。

GitHub Codespacesのパワーを活用しましょう。詳細についてはドキュメントや、プロダクト紹介をご覧ください。

The post Bringing npm registry services to GitHub Codespaces appeared first on The GitHub Blog.