Развертывание приложения React на Heroku

Я изучаю React. Это потрясающий инструмент, и я планирую создать множество своих интерфейсов с его развитием. Я также хотел бы вернуться к старым проектам и обновить их, чтобы иметь четко определенный RESTful API на бэкэнде, который вызывается моим блестящим новым интерфейсом React.

Я развернул простые сайты в Heroku (легко!) И сайты с подключениями Postgres к Heroku (немного сложнее - см. Мое руководство здесь), но я никогда не развертывал приложение React до сегодняшнего дня.

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

Однако я столкнулся с гораздо более сложной ситуацией, чем мое портфолио. На прошлой неделе мы с моим партнером по кодированию создали приложение с полным стеком с Node, Express и PostgreSQL на бэкэнде и React во фронтэнде, и мы хотели его развернуть. Чтобы запустить проект на нашем локальном хосте, мы запустили наш сервер Express на порт 3001, чтобы приложение React работало на порту по умолчанию 3000. Затем мы направили приложение React на наш сервер Express через строку прокси в нашем пакете. .json, вот так:

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.17.1",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts": "1.0.17"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:3001"
}

Это работало на нашем локальном хосте, пока оба сервера были запущены и работали в нашем терминале. React вызвал наш API через вызовы Axios и отрендерил нужные нам данные. Я подумал, что эта настройка не будет работать на Heroku. Какие у меня были варианты?

Моя первая мысль заключалась в том, что я знал, как развернуть серверное приложение на Heroku с базой данных, а также знал, как развернуть приложение React. Почему бы не развернуть их по отдельности?

Это был ответ, но мне нужно было немного настроить, чтобы избежать проблем с CORS. CORS расшифровывается как Cross Origin Resource Sharing. Современные браузеры не позволяют выполнять вызовы из браузера на другой сервер из-за проблем с безопасностью. Есть простой пакет npm, который поможет вам восполнить пробел - cors. Установите его в свой проект, и тогда настройка будет очень простой.

const cors = require('cors');
const corsOptions = {
  origin: 'https://your-app-name.herokuapp.com',
  optionsSuccessStatus: 200
}
app.use(cors(corsOptions));
app.options('*', cors());
app.use('/', routes);

Ваши потребности в настройке могут отличаться, поэтому более подробные сведения см. В документации.

После этого я убедился, что все ссылки в вызовах AJAX моего приложения React указывают на мой развернутый сервер следующим образом:

fetch('https://your-deployed-api.herokuapp.com', {
  method: 'POST'
})

Как вы структурировали свои проекты React с помощью внутреннего API? Хотелось бы услышать отзывы!