如何为Apollo Server playground的tabs动态配置endpoint端点

Node.js服务本身无法感知外部部署的域名（比如生产环境的反向代理、CDN、负载均衡域名），所以不能通过服务启动监听的接口直接获取生产域名，推荐以下两种落地性最高的方案：

方案1：环境变量注入（最常用） #

通过环境变量区分不同环境的域名，完全避免硬编码：

• 第一步：安装dotenv用于本地开发环境加载变量

npm install dotenv

• 第二步：项目根目录新增.env文件（记得加入.gitignore避免提交到代码库），本地开发配置如下：

# 开发环境
APP_URL=http://localhost:4000
PORT=4000

生产环境直接在部署平台（Docker、PM2、云服务等）的环境变量配置项里添加APP_URL为你的生产域名，比如https://api.yourdomain.com

• 第三步：修改代码读取环境变量
  在项目入口文件最顶部加载dotenv，然后直接读取变量即可：

// 入口最顶部引入配置
require('dotenv').config()

const startServer = async () => {
  const server = new ApolloServer({
    schema,
    introspection: true,
    playground: {
      tabs: [{
          name: 'data analysis',
          // 优先取环境变量，兜底留空让playground自动适配当前域名
          endpoint: process.env.APP_URL || '',
          query: '{ ... }'
        }
      ]
    }
  });

  server.listen(process.env.PORT);
};

方案2：留空自动适配 #

如果你的GraphQL接口和Playground访问地址是同域名同服务部署，endpoint可以直接留空：Playground在浏览器打开时会自动用当前页面的访问域名作为请求地址，无需服务端提前配置，本地、开发、生产环境自动适配，不需要额外修改代码。

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