Question

我正在开发一个使用React作为客户端并使用Rails API作为服务器的应用程序。我想让客户端和服务器尽可能分开（现在它们位于完全不同的存储库中）。

React客户端是使用create-react-app创建的，目前使用package.json文件中的proxy选项调用API，如下所示：

"proxy": "http://localhost:3001/"

Localhost 3001是我的Rails API的位置。显然这不适用于生产。

如何在允许客户端访问服务器的同时将其部署到Heroku？我可以部署两个不同的Heroku应用程序，并以某种方式将客户端的应用程序代理请求发送到服务器的应用程序吗？或者我是否必须将客户端包含在我的rails项目中并将它们一起部署？

Answer 1

我以前做过这个。我开始按你在问题中的建议，构建react应用程序并将其包含在我的rails项目中并部署整个事情。这很好用，但每次我想部署我的前端应用程序时，我都不想重新部署我的后端api。

所以我在rails应用程序中创建了一个名为FrontEndAppVersion的模型。我给这个模型两列：

version - 您通常看到的语义版本字符串
active - 一个布尔值，指示它是否为活动版本（一次只能激活一条记录）

然后我有一个最小的rails视图渲染，它会查找活动的FrontEndAppVersion并链接到相应的js和css文件。

在我的反应应用程序中，我使用gulp打包应用程序并将其推送到我的rails应用程序链接到的云端。除了将反应文件发送到云前端之外，我还向我的rails后端应用程序发出api请求，让它知道有新版本可用并使其成为活动版本。

这可能有点矫枉过正，但它也让我轻松回滚了一个版本。我可以通过将另一个FrontEndAppVersion记录作为活动记录来回滚客户端应用程序，而不是回滚Heroku。

无论哪种方式，代理都需要在构建代理时进行更改，如果两个应用位于同一个域中，您只需使用/。

Answer 2

我采取了与吉米不同的方法来做同样的事情。

我在Heroku上部署了两个应用程序：一个Rails API和一个Create-React-App前端。没有太具体，有几个键来设置它。首先，在rails api中，编辑keytool -keypasswd -alias mykey -keystore mykeystore文件，以便它允许跨源请求：

cors.rb

正如此文件所暗示的，我的rails应用程序无法在Rails.application.config.middleware.insert_before 0, Rack::Cors do allow do origins 'localhost:3000', 'https://myapp.herokuapp.com' resource '*', headers: :any, methods: [:get, :post, :put, :delete], end end本地运行，我将其更改为在端口8000上运行，而不是通过编辑localhost:3000：

puma.rb

默认情况下，

Create-react-app在port ENV.fetch("PORT") { 8000 }本地运行，因此您可以将rails api设置为在您想要的任何端口上运行，只要它与您的前端不同即可。

然后我在create-react-app中创建了一个文件，其中包含API网址和我称之为localhost:3000的常用端点：

AppConstants.js

现在编辑fetch / ajax / xmlHttpRequest调用，以便它使用的URL引用这些路由。例如，使用fetch：

// let APIRoot = "http://localhost:8000";
let APIRoot = "https://my-rails-api.herokuapp.com";

export default {
  APIEndpoints: {
    LOGIN:  APIRoot + "/users/login",
    SIGNUP: APIRoot + "/users/create",
    TODOS: APIRoot + "/todos",
    ITEMS: APIRoot + "/items",
  },
};

此应用程序常量文件可以在本地api根目录和生产API根目录之间轻松切换。

像往常一样将rails api部署到heroku，将自动检测到合适的构建包。对于您的反应应用，我建议使用this buildpack，因为它会生成您的create-react-app的生成版本，并为您提供静态资源。

如何为Heroku部署React应用程序和Rails API？

2 个答案: