Nx项目project.json配置自定义target时如何正确使用环境变量

不生效原因 #

@angular-devkit/build-angular:dev-server 执行器默认不会解析配置项中${ENV_VAR}格式的环境变量占位符，你之前配置里的publicHost值会被当做普通字符串传入服务，无法读取到Codespaces运行时注入的CODESPACE_NAME变量，因此配置失效。

具体配置 #

直接使用Nx内置的run-commands执行器即可实现需求，该执行器会自动解析Shell环境变量，不需要额外安装依赖：

• 打开Angular应用对应的project.json文件，将你之前编写的codespaces target替换为以下配置：

"codespaces": {
  "executor": "@nx/workspace:run-commands",
  "configurations": {
    "production": {
      "command": "npx nx serve <你的应用名> --publicHost=${CODESPACE_NAME}-4080.${GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN}:443 --configuration=production"
    },
    "development": {
      "command": "npx nx serve <你的应用名> --publicHost=${CODESPACE_NAME}-4080.${GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN}:443 --configuration=development"
    }
  },
  "defaultConfiguration": "development"
}

• 配置注意事项：
  • 把命令里的<你的应用名>替换为实际的Angular应用项目名
  • 如果使用v16以前的旧版本Nx，将执行器名称替换为@nrwl/workspace:run-commands即可
  • 配置中使用Codespaces内置的GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN变量代替硬编码的githubpreview.dev，后续GitHub调整预览域名后缀时不需要修改配置，兼容性更好
  • 如果你原本的serve target已经配置了port: 4080、hmr、代理等开发参数，命令中不需要重复传入，nx serve执行时会自动读取默认配置，仅需要覆盖publicHost参数即可

配置完成后直接执行npx nx run <你的应用名>:codespaces就能正常启动适配Codespaces环境的Angular应用，不会再抛出Invalid Host/Origin header错误。

不推荐通过设置disableHostCheck: true绕过Host头校验，该方式会降低开发服务器安全性，仅建议临时调试时使用。

内容的提问来源于stack exchange，提问作者Norbert Bartko