如何在本地网络上部署带有 apollo 客户端和 apollo-server 后端的 React 应用程序

Posted

技术标签:

【中文标题】如何在本地网络上部署带有 apollo 客户端和 apollo-server 后端的 React 应用程序【英文标题】:How to deploy react app with apollo cient and apollo-server backend on local network 【发布时间】:2020-09-20 12:26:45 【问题描述】:

这几天我一直在努力,关于如何在本地网络的后端部署带有 apollo 服务器的 react 应用程序,使用 windows 服务器,客户端想要后端的 react 应用程序是apollo 服务器和 monggodb 在他们的本地网络上运行,在他们的网络浏览器上键入服务器上的本地 IP 地址,如 192.168.1.129,应用程序将运行。我不能将它部署到heruko,因为它会给客户端带来额外的费用,这几天我一直在寻找教程,在IIS、nginx、PM2上找到了反向代理,但没有明确的分步详细说明如何做关于它,任何帮助将不胜感激......否则 2 个月的代码将付诸东流,

【问题讨论】:

【参考方案1】:

警告: 我对 Apollo 不熟悉,以下只是基于遵循 Apollo 的入门指南(https://www.apollographql.com/docs/apollo-server/getting-started/)的建议

    通过node index.js在服务器中运行Apollo。这将绑定到http://localhost:4000(或者可能不同,只需查看 CLI 的内容)

以这种方式运行,我认为在开发模式下运行代码。您可能希望在生产模式下运行它。我认为使用NODE_ENV=production node index.js 会做到这一点,但我不完全确定。

    IIS 中的反向代理(因为您在 Windows 上),以便访问服务器的 IP 地址,将端口 80 代理到 localhost:4000。在 Nginx 中,它会是这样的:
server 
    listen 80 default_server;

    location / 
        proxy_pass http://127.0.0.1:4000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    

    弄清楚如何将 Apollo 的运行转换为启动和后台进程。遗憾的是,我不熟悉 Windows 服务器管理,但在 Ubuntu 中,这将通过 systemd 服务脚本进行。

希望,这足以让你继续。

【讨论】:

以上是关于如何在本地网络上部署带有 apollo 客户端和 apollo-server 后端的 React 应用程序的主要内容,如果未能解决你的问题,请参考以下文章

使用 TypeGraphQL 在浏览器中为 Apollo 本地状态生成 typedef 和解析器

如何使用带有 react-apollo 的模拟数据进行测试

如何部署到 Apollo Graphql 服务器和客户端到生产环境?

如何使用 apollo 客户端库创建带有角度参数的 graphql 查询

在 Heroku 上部署 react/apollo-server 应用程序

带有命名空间查询的 Apollo Client 3.0 缓存