如何在Heroku中部署React應用程序和Rails API？

我正在使用React作爲客戶端，使用Rails API作爲服務器的應用程序。我想保持客戶端和服務器儘可能分離（現在它們在完全不同的存儲庫中）。如何在Heroku中部署React應用程序和Rails API？

的客戶作出反應，用創造 - 反應 - 創建的應用程序，目前使用代理選項中的package.json文件調用了一個API，就像這樣：

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

本地主機3001的位置我的Rails API。顯然這在生產中不起作用。

我如何可以部署這Heroku的同時還讓客戶端訪問服務器？我可以部署兩個不同的Heroku應用程序，並以某種方式將客戶端的應用程序代理請求發送到服務器的應用程序？或者是否必須將我的rails項目中的客戶端包含在內，並將其部署在一起？

來源

2017-03-07 Christian Carey

我這樣做過。我按照你在問題中提出的建議，開始構建反應應用程序，並將其包含在我的rails項目中並部署整個事物。這工作得很好，但我不想每次想部署我的前端應用程序時重新部署我的後端API。

所以我做了一個在我的Rails應用程序稱爲FrontEndAppVersion模型。我給這個模型兩列：

版本 - 語義版本字符串，你通常看到
活躍 - 表示布爾值，如果它是活動的版本（僅一個記錄可能是活躍在同一時間）

然後，我有一個最小的軌道視圖渲染，它將查找活動的FrontEndAppVersion並鏈接到適當的js和css文件。

在我的反應應用程序中，我使用gulp將應用程序打包並將其推送到雲端，這是我的rails應用程序鏈接的位置。除了將反應文件發送到雲端之外，我還向它的後端應用程序發出了api請求，讓它知道有一個新版本可用，並使其成爲活動版本。

這可能是矯枉過正，但它也讓我回滾輕鬆版本。除了回滾Heroku外，我還可以通過使不同的FrontEndAppVersion記錄活動的應用程序來回滾客戶端應用程序。

無論採用哪種方式，代理在構建時都需要進行更改，如果兩個應用在同一個域上，則可以簡單地使用/。

來源

2017-03-07 21:01:02

我採取了不同的方法比Jimmy在這樣做同樣的事情。

我在Heroku上部署了兩個應用程序：一個Rails API和一個Create-React-App前端。沒有太具體，有幾個關鍵設置。首先，在你的Rails API，編輯cors.rb文件，以便它允許跨域請求：

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

由於此文件暗示，我的Rails應用程序不會對localhost:3000本地運行，我改變了它在端口8000上運行而不是通過編輯puma.rb：

port  ENV.fetch("PORT") { 8000 }

創建反應的應用程式中localhost:3000本地默認運行，所以你可以設置你的Rails API到你想要的任何端口上運行，只要它比你的前端不同。

然後我改變了我的創造反應的應用程序內的文件包含了API URL和常用的終點，我稱之爲AppConstants.js：

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

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

現在您編輯獲取/ AJAX/XMLHttpRequest的調用，以便它使用的URL引用這些路由。例如使用取：

fetch(AppConstants.TODOS, { 
    method: 'POST', 
    body: JSON.stringify(values) 
}) 
.then(response => response.text()) 
.then((body) => { 
    console.log(body); 
});

此應用的常量文件可以很容易地在本地API根部和生產API根之間切換。

像往常一樣將您的rails api部署到heroku，會自動檢測到合適的構建包。對於您的反應應用程序，我建議使用this buildpack，因爲它將生成您的create-react-app的生成版本併爲您提供靜態資產。

來源

2017-06-30 17:20:55 quicklikerabbit

如何在Heroku中部署React應用程序和Rails API？

回答

相關問題