Как объединить react и express при разработке fullstack?

Question

[Егор Астрейко]

Всем привет, когда я разрабатывал frontend на react, мне нужно было просто по окончанию работы выполнить build и отдать собранный проект.
При разработке frontend-а, у меня был адрес уже готового сервака
Сейчас я хочу разобраться в backend-е.

create react app запускается на 3000 порту, express на порту 3001 и доступны по адресу:
fronted - localhost:3000
backend - localhost:3001

И я не могу разобраться:
Как сделать, что бы мой сайт при разработке был доступен по адресу https://my-domain.loc.
Создать временный ssl certificate для всего проекта(как и для frontend так и для backend).
Что бы из frontend-а, я делал запрос(с использованием graphql) на сервер /server/graphql.
После чего собрать весь проект и залить все как одно целое на сервак.
Объясните пожалуйста, возможно ли это сделать и как это вообще работает на практике (react app + express server на vds или vps)

Comments

[Антон Спирин]

Вариантов множество. К React и Express ваш вопрос прямого отношения не имеет. Как вариант, поближе познакомиться с сервером Nginx, его возможностями и типовыми кейсами. Не вздумайте раздавать статику в роде с помощью Express.

[Егор Астрейко]

Антон Спирин, А можно более развернуто ?

Answer 1

[SANTA2112]

В доке про cra расписано как проксировать запросы:
ссылка

Answer 2

[McBernar]

На сервере вам будет нужна запущенная нода, которая может крутить экспресс на том же локалхосте. Просто в конфиге nginx вам нужно будет проксировать запрос с mysite.ru/api на localhost:3001

А на локалке можете так и работать - реакт на 3000, апи на 3001.

Comments

[Егор Астрейко]

А где можно посмотреть примеры, как это реализовать сейчас у себя на пк ?

[McBernar]

Егор Астрейко, так у вас уже все готово. Апи на localhost:3001, а реакт на localhost:3000

Посмотрите ролики на ютубе expressjs api. Там все очень просто.

[Егор Астрейко]

McBernar, нет, я еще свой проект делаю и мне нужен https

[McBernar]

Егор Астрейко, ssl ставится на сервере. Lets encrypt.

[Егор Астрейко]

McBernar, Вы меня не правильно поняли, сейчас с фронта при запросе на сервер у меня указанна ссылка http://localhost:3001, а я хочу сделать что на данный момент написания проекта ссылка была /api/..., так как в планах проект будет на https, вот я и хочу имитировать сервер у себя на пк, а как это сделать, не знаю

[Андрей Hecc]

Егор Астрейко, Сделайте себе .env файл в котором будет находится apiPath.
Локально это будет localhost, на сервере - тот адрес, который вы укажете