将 npm 注册服务引入 GitHub Codespaces

npm 工程团队最近已过渡到使用 GitHub Codespaces 进行 npm 注册服务的本地开发。这种向 Codespaces 的转变大大减少了我们内部开发循环的摩擦并提高了开发人员的工作效率。在这篇文章中，我们想分享我们在这次转变中的经验和教训，希望这些信息对您有用。

Bringing npm registry services to GitHub Codespaces

什么是 npm 注册服务

npm 注册表服务是支持 npm 注册表的 Node.js 微服务，分布在 30 多个不同的存储库中。每个微服务都有自己的存储库，并使用 Docker 进行容器化。借助 Codespaces，我们使用 Visual Studio Code 在 Codespaces 上使用 Docker 开发 npm 注册表服务。

Codespaces 减少了内部开发循环的摩擦

在 Codespaces 之前，npm 本地开发的一个重大障碍是难以跨多个服务测试代码。我们缺乏一种直接的方法来在本地运行多个注册服务，而是依靠我们的暂存环境进行测试。例如，为了验证一项服务中的代码更改是否影响了涉及其他五个服务的用户工作流，我们只能在本地运行该服务并连接到暂存环境中的其余五个服务。出于安全原因，只能通过 VPN 访问我们的暂存环境，这给代码测试过程增加了另一层复杂性。

Codespaces 通过简化在本地运行多个注册服务的过程解决了这个问题。在 Codespace 中工作时，我们不再需要为内部开发循环建立 VPN 连接。这一变化使团队免于与 VPN 连接相关的潜在问题，并大大简化了入门过程。

作为开发人员，我们经常依赖断点进行调试。现在，由于所有注册表服务都在一个工作区内运行，我们可以在 Visual Studio Code 中调试代码并在多个服务中触发断点，就好像它们是一个服务一样。这比以前的开发人员体验有了很大的改进，以前在暂存环境中无法触发服务中的断点。

Codespaces 提高开发人员的工作效率

Codespaces 让外部贡献者更容易参与。例如，如果 npm 团队之外的 GitHub 工程师希望做出贡献，他们可以在几分钟内使用 Codespaces 开始工作，因为开发环境已预先配置好并随时可用。以前，设置开发环境并授予访问暂存资源的权限需要几天时间，而且通常会导致来自设计等其他团队的合作伙伴根本不做出贡献。

端口转发使我们能够访问在代码空间内运行的 TCP 端口。Codespaces中的自动端口转发使我们能够从本地计算机上的浏览器访问服务以进行测试和调试。

浏览器内的 Codespaces 体验由Visual Studio Code for the Web提供支持，可让您灵活地在任何计算机上工作。当您远离主要工作计算机但需要测试快速更改时，这尤其有用。基于 Web 的 Codespaces 体验提供完全在浏览器中运行的零安装体验。

还记得那些时候，您被本地环境问题所困扰，不仅排查起来很费时间，而且很难在其他机器上重现？使用 Codespaces，您可以在几分钟内快速启动新的 Codespaces 实例，重新开始。最好的部分是什么？无需修复问题；您可以直接丢弃旧的代码空间。

我们从使用 Codespaces 中学到的东西

Codespaces 拥有大量功能，可为您节省时间并实现流程自动化。以下是我们在使用 Codespaces 时学到的一些技巧。

Codespaces 的预构建功能是加快创建新代码空间的绝佳方式，它可创建 devcontainer 的快照并缓存可在代码空间启动时使用的所有克隆存储库。Codespaces 预构建功能可让您选择分支并利用 GitHub Actions 自动更新这些预构建。

您可以将特定于帐户的开发机密（例如访问令牌）按每个存储库存储在 Codespaces 中，以确保在 Codespaces 内安全使用。这些机密可作为环境中的环境变量使用。

另一个技巧专门针对Visual Studio Code Dev Container。考虑利用 Dev Container 的生命周期事件（例如postCreateCommanddevcontainer.json 中的事件）尽可能自动化 Codespaces 设置。最终，这是通过自动化节省的时间与构建和维护它所投入的时间之间的平衡。但是，自动化通常会节省更多时间，因为每个使用配置的人都会受益。

另一个技巧是使用GitHub 点文件来个性化您的 Codespaces。点文件是类 Unix 系统上的文件和文件夹，用于.控制系统上应用程序和 shell 的配置。您可以使用 GitHub 点文件在 Codespaces 中设置您的个性化设置。

GitHub Codespaces 的采用大大改善了开发人员使用 npm 注册服务的体验。它不仅将开发环境设置时间从几小时缩短到几分钟，而且还提供了更好的调试体验。此外，它还提供了预构建等省时功能。我们希望这篇博文能为我们使用 Codespaces 提供宝贵的见解。有关更多信息，请参阅Codespaces 文档。

在GitHub Codespaces中引入npm注册服务（例如，为项目设置私有npm注册表），可以通过几步简单的配置来实现。以下是具体的步骤：

1. 创建GitHub Codespace

首先，确保你已经在GitHub上创建了一个项目，并且该项目支持Codespaces。

打开你的GitHub项目。
点击“Code”按钮，然后选择“Create codespace on main”或者“Create codespace on branch_name”。

2. 配置npm注册表

在Codespace中配置npm注册表，可以通过创建或修改.npmrc文件来实现。这个文件可以放在项目的根目录下或者用户主目录下（~/.npmrc）。

配置私有npm注册表

假设你使用的是一个私有npm注册表，例如Verdaccio，或者GitHub Package Registry。你需要在.npmrc文件中添加以下配置：

plaintext

registry=https://registry.npmjs.org/

@your-scope:registry=https://npm.pkg.github.com/ //npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN

registry：这是默认的npm注册表地址，通常指向npm官方注册表。
@your-scope:registry：这是为特定scope配置的注册表地址。将your-scope替换为你的scope名称。
//npm.pkg.github.com/:_authToken：这是你的GitHub Token，用于访问私有包。你需要生成一个GitHub Personal Access Token，并将其替换为YOUR_GITHUB_TOKEN。

生成GitHub Token

访问GitHub并登录。
点击右上角的头像，然后选择“Settings”。
在左侧菜单中选择“Developer settings”。
选择“Personal access tokens”。
点击“Generate new token”，为其命名并选择适当的权限（通常需要read:packages和repo权限）。
生成后，复制这个Token。

3. 配置项目中的`.npmrc`

在你的项目根目录下创建或编辑.npmrc文件，并添加以下内容：

plaintext

registry=https://registry.npmjs.org/

@your-scope:registry=https://npm.pkg.github.com/ //npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN

将your-scope替换为你的scope名称，将YOUR_GITHUB_TOKEN替换为你生成的GitHub Token。

4. 安装npm依赖

在GitHub Codespace终端中，运行以下命令来安装项目依赖：

bash

npm install

这将使用配置的npm注册表和token来安装依赖。

5. 使用GitHub Actions自动配置（可选）

如果你想在CI/CD流程中自动配置npm注册表，可以使用GitHub Actions。在你的项目根目录下创建或编辑.github/workflows/main.yml文件，并添加以下内容：

yaml

name: CI
on: [push]
jobs:

  build:
    runs-on: ubuntu-latest

steps: - uses: actions/checkout@v2 - name: Setup Node.js uses: actions/setup-node@v2 with: node-version: '14' registry-url: 'https://registry.npmjs.org' - name: Authenticate with GitHub Package Registry run: echo "//npm.pkg.github.com/:_authToken=${{ secrets.GITHUB_TOKEN }}" >> ~/.npmrc - run: npm install - run: npm test