如何部署使用 API-server 的 react 应用程序？答案

【问题标题】：How to deploy react's app, which use API-server?如何部署使用 API-server 的 react 应用程序？
【发布时间】：2018-06-27 13:58:33
【问题描述】：

我有前端应用，使用 React 编写，它使用 api-server https://koalerplate-xxxxxxx.now.sh"。

//package.json

{
     ...
      "dependencies": {
        "bulma": "^0.7.1",
        "react": "^16.4.1",
        "react-dom": "^16.4.1",
        "react-redux": "^5.0.7",
        "react-scripts": "1.1.4",
        "redux": "^4.0.0",
        "redux-saga": "^0.16.0"
      },
      "scripts": {
        "start": "react-scripts start",
      },
      "proxy": "https://koalerplate-xxxxxxx.now.sh"
    }

“npm start”，然后在浏览器中打开“localhost:3000”，一切正常。如何部署此应用程序？我必须如何申请 "proxy": "https://koalerplate-xxxxxxx.now.sh" ？我尝试使用 webpack 进行构建，得到 index.html + bundle.js，并将这两个文件上传到静态服务器，但无法正常工作.. 在 bundle.js 文件中我找不到这个代理“koalerplate-xxxxxxx.now。嘘”

【问题讨论】：

根据你的启动脚本，这个应用是否使用了create-react-app？
是的，使用 create-react-app

标签： reactjs deployment frontend

【解决方案1】：

Create-react-app 允许您使用环境变量。您可以在此处找到更多信息：https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables

当您运行 npm run build 时，它会生成静态 html/css/js 文件并且不再使用 package.json，因此代理将不适用。您需要像文档显示的那样定义一个环境变量，当您进行构建时，它会将环境变量的值应用于您的应用程序。

【讨论】：

【解决方案2】：

您将使用npm run build 创建一个静态文件，然后您可以使用任何您想要的静态文件服务器（例如，Node/Express）来托管它。但是，如果您使用 React-Router，事情会变得更加复杂。

这里是该主题完整指南的链接：Deployment Instructions

非常详尽，应该可以回答您的所有问题。

【讨论】：