需要提示：ReactJS 前端和 Springboot API 部署策略答案

【问题标题】：Need tips: ReactJS front-end and Springboot API deployment strategies需要提示：ReactJS 前端和 Springboot API 部署策略
【发布时间】：2019-10-30 21:07:46
【问题描述】：

我只是想知道你们是怎么做到的。

这是我所做的：

我分别创建了 ReactJs 和 Springboot API。
在开发环境中，我使用 npm start 运行 ReactJS，而 Springboot 只运行应用程序。
通过http://localhost:3000访问reactJs
使用 axios 从 react with 访问 springboot api：http://localhost:8080
由于来自 reactJs 的请求在技术上是发往不同的服务器（不同的服务器和不同的端口）：我遇到了 CORS 问题：CORS 策略：请求中不存在“Access-Control-Allow-Origin”标头资源。
所以我在我的 api 上添加了 @CrossOrigin(origins ="*")。
一切都是彩虹和蝴蝶。

然后我部署到 prod 环境：

服务器是 Ubuntu。
部署到 NGINX 的 ReactJs
Springboot API 我刚刚把jar做成了服务。

我遇到的第一个问题是我忘记将 React 的 API 请求替换为我的服务器的实际 IP 地址（http://12.34.56.789:8080 而不是http://localhost:8080）。所以我想我的第一个问题是，我如何在 react 中动态设置这个 API 请求，以便在开发环境中它将是：http://localhost:8080 而在 prod 环境中，将其设置为 IP 地址。

第二个问题，你平时会这样部署 ReactJs 和 Springboot API 吗？另外，Springboot 只是通过 jar 运行自己的 Applilcation Server。

第三，你能建议我做些什么来改进这个设置？

非常感谢。

【问题讨论】：

React 在节点上运行是因为您使用的是服务器端渲染还是只是为了进行动态模块替换？

标签： reactjs spring-boot

【解决方案1】：

你可以使用这样的东西来处理你的常量的换入和换出：

var API = {
    production: JSON.stringify('prod-url'),
    development: JSON.stringify('dev-url')
}

var environment = process.env.NODE_ENV === 'production' ? 'production' : 'development';

// webpack config
module.exports = {
    // define plugin can handle your constants
    plugins: [
        new webpack.DefinePlugin({
            'API_URL': API_URL[environment]
        })
    ],
    // ...
}

然后在你的组件中

    axios(API_URL).then(()=>{

});

【讨论】：