Как развернуть Ruby on Rails backend API с помощью React to Heroku

Question

У меня есть приложение Ruby on Rails v5.2, которое обслуживает проект React. Оба проекта находятся в разных папках, проект React не находится в том же проекте, что и проект Rails. Мой клиент хочет, чтобы я использовал Heroku для развертывания этого проекта в производственной среде.

Я искал, как развернуть мой Ruby on Rails и проект React в Heroku. К сожалению, я смог найти, как это сделать только с Rails и React в одном проекте, что вызвало у меня небольшую путаницу, как развернуть и Rails, и React в одном приложении Heroku.

Приложение Rails - это проект, а мой React - другой, я думал о создании приложения для каждого проекта в Heroku. Дело в том, что я не думаю, что это хорошая практика, поскольку в будущем у меня может быть сценическая среда и производственная среда. Я уверен, что должен быть способ развернуть мой проект Rails и React в одном приложении Heroku.

Как я могу развернуть проект Rails и React в одном приложении Heroku, если они расположены в разных папках проекта?

Нужна ли мне конфигурация, например файл proc или веб-пакет?

Я использовал до DigitalOcean с Ngnix и Puma, и я запускал сценарий сборки, подобный этому, в моем проекте React:

"build-prod": "dotenv -e .env.production react-scripts build && cd build/static/css && rm *.map && cd ../js && rm *.map && cd ../../.. && rm -rf app_dist && mv build app_dist"

Затем я развернул его следующим образом:

"deploy-prod": "scp -r app_dist/ user@117.89.99.118:/home/deploy/rails_api_backend/shared/public/"

В моем приложении Rails я использовал Capistrano для развертывания в Digital Ocean. Но теперь мне нужно перейти на Heroku.

Answer 1

Чтобы развернуть только приложение React в качестве отдельного проекта в Heroku, вам понадобится небольшой сервер, например Express. js.

app. js =>

require("dotenv").config();
const express = require("express");
const cors = require("cors");
const app = express();
app.use(cors());
// Serve the static files from the React app
app.use(express.static(path.join(__dirname, "client/build")));
// http://expressjs.com/en/starter/basic-routing.html
// Handles any requests that don't match the ones above
app.get("/", (req, res) => {
  res.sendFile(path.join(__dirname + "/client/build/index.html"));
});
// listen for requests :)
const listener = app.listen(process.env.PORT, function () {
  console.log("Your app is listening on port " + listener.address().port);
});

Просто вставьте это приложение. js в папку проекта на верхнем уровне, а затем разверните его в Heroku (после yarn build вашего приложения для производства).

Это именно то, что делали. Буквально существует только один маршрут - маршрут GET «/», который направит все на главную страницу приложения React.

Heroku хочет серверный процесс для приложения - он не предназначен в качестве платформы для сайтов stati c - но вы можете эффективно сделать его такой платформой, просто предоставив его серверный процесс, как указано выше. Тогда Heroku с радостью «npm запустит» ваше приложение на бесплатном веб-дино, и вы сможете масштабировать его до платных дино, если используете sh.

Вам также понадобится пакет. json файл, который включает express и сценарий build. Мы используем:

"build": "NPM_CONFIG_PRODUCTION=true npm install"

Убедитесь, что у вас есть ваши переменные среды также подключены к Heroku - приложение. js выше включает process.env.PORT, чтобы объявить, какой порт вы хотите, чтобы сервер слушал - вы можете или не можете этого захотеть, просто помните, если вы копируете / вставляете.