Ich habe eine andere Herangehensweise als Jimmy in der gleichen Sache.
Ich habe zwei Apps auf Heroku bereitgestellt: eine Rails-API und ein Create-React-App-Frontend. Ohne zu spezifisch zu werden, gibt es ein paar Schlüssel, um dies einzurichten.Zuerst in Ihren Schienen api, die cors.rb-Datei bearbeiten, so dass es Cross-Origin-Anfragen erlaubt:
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
Da diese Datei schon sagt, meine Rails-Anwendung läuft nicht auf localhost:3000 lokal, habe ich es auf Port 8000 laufen anstelle von puma.rb Bearbeitung:
port ENV.fetch("PORT") { 8000 }
Create-reagieren-App läuft auf localhost:3000 lokal standardmäßig, so dass Sie Ihre Schienen api laufen auf jedem beliebigen Port einstellen, die Sie wollen, solange es anders ist als Front-End .
Ich habe dann eine Datei in meinem erstellen reagieren-Anwendung, die die API-URL enthält und am häufigsten verwendeten Endpunkte, die ich AppConstants.js nennen:
// 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",
},
};
Jetzt ist Ihre Sie bearbeiten Abruf-/Ajax/XMLHttpRequest Anrufe, so dass die Die verwendete URL verweist auf diese Routen. Zum Beispiel holt mit:
fetch(AppConstants.TODOS, {
method: 'POST',
body: JSON.stringify(values)
})
.then(response => response.text())
.then((body) => {
console.log(body);
});
Diese App Konstanten Datei macht es einfach, zwischen einer lokalen api Wurzel und einer Produktions api Wurzel zu wechseln.
Stellen Sie Ihre Rails api wie gewohnt auf heroku ein, ein passendes Build Pack wird automatisch erkannt. Für Ihre Reactive-App empfehle ich die Verwendung von this buildpack, um einen Produktions-Build Ihrer create-react-App zu erstellen und die statischen Assets für Sie bereitzustellen.