Question

我正在使用Apollo客户端和服务器开发带有Node / Express后端的React前端。前端是使用create-react-app生成的。

在前端，我使用HttpLink中的apollo-boost来添加GraphQL端点，如下所示：

const httpLink = new HttpLink({ uri: 'http://localhost:8080/graphql' })

这在本地开发时很好，但是如果我要在其他设备上测试网站（以及间接测试GraphQL端点），则所有GraphQL内容均无法加载，因为该端点在该主机的本地主机上不存在设备。

为此，我添加了以下内容：

const httpLink = new HttpLink({
  uri:
    process.env.NODE_ENV === 'development'
      ? 'http://192.168.1.25:8080/graphql'
      : 'https://example.com/graphql'
})

这很好，但是我发现自己在两台不同的机器上进行开发。因此，为GraphQL端点提供服务的本地IP并不固定为192.168.1.25。

然后我搜索了npm并发现了internal-ip。我以为我可以导入internal-ip并将其做成这样的模板字符串：

const httpLink = new HttpLink({
  uri:
    process.env.NODE_ENV === 'development'
      ? `http://${internalIp.v4.sync()}:8080/graphql`
      : 'https://example.com/graphql'
})

但是，当通过webpack运行时，internalIp.v4.sync()的计算结果为null。

如上面问题所述，在使用React和webpack时动态设置本地IP端点的最佳实践是什么？特别是没有运行npm eject？

Answer 1

这看起来像一个节点库，因此它无法在您的前端代码中使用。如果您使用的是webpack，则可以使用DefinePlugin来评估某些表达式，然后将其设置为全局变量，该变量将在您的前端代码中的任何位置可用。

您还可以使用ngrok之类的工具为您的本地开发环境公开一个公共URL。

// webpack.config.js
new webpack.DefinePlugin({
  SERVER_URL: JSON.stringify(`${internalIp.v4.sync()}/graphql`),
})

// elsewhere
const httpLink = new HttpLink({ uri: SERVER_URL })

Answer 2

我肯定会建议使用@naniel已经建议的.ngrok

1。使用.ngrok公开您的本地服务器端点。您将获得一个公共服务器URL，您可以从Internet上的任何地方使用它

2。您可以使用env变量创建 .env.development.local 文件。

有关创建React App 优先级中的环境文件的更多信息，请参见此link

例如

REACT_APP_SERVER_URL = http://192.168.1.25:8080/graphql

//或ngrok给出的网址

3。使用.env文件中的SERVER_URL而不弹出

const httpLink =新的HttpLink（{uri：REACT_APP_SERVER_URL}）

开发时如何将Apollo GraphQL端点设置为本地IP？

2 个答案: