Развертывание Create-React-App на Nginx

Я пытаюсь развернуть мой create-react-app SPA на капельке Digital Ocean с Ubuntu 14.04 и Nginx. В соответствии с инструкциями по развертыванию статического сервера, я могу заставить его работать при запуске serve -s build -p 4000, но приложение закрывается, как только я закрываю терминал. Мне не понятно из create-react-app РЕПО РЕДАКЦИЯ, как сохранить его вечным, похожим на что-то вроде навсегда.

Без бега serveЯ получаю ошибку 502 Bad Gateway от Nginx.

Nginx Conf

server {
  listen 80;
  server_name app.mydomain.com;
  root /srv/app-name;
  index index.html index.htm index.js;
  access_log /var/log/nginx/node-app.access.log;
  error_log /var/log/nginx/node-app.error.log;
  location ~* ^.+\.(jpg|jpeg|gif|png|ico|css|zip|tgz|gz|rar|bz2|pdf|txt|tar|wav|bmp|rtf|js|flv|swf|html|htm|svg)$ {
    root   /srv/app-name/build;
  }
  location / {
    proxy_pass http://127.0.0.1:4000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Access-Control-Allow-Origin *;
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }
}
Источник

1 ответ

Решение

Одним из основных преимуществ React (и Create React App) является то, что вам не нужны накладные расходы на работу Node-сервера (или проксирование к нему с помощью Nginx); Вы можете обслуживать статические файлы напрямую.

В документации по развертыванию, с которой вы связаны, приложение Create React описывает, что делать:

npm run build создает build каталог с производственной сборкой вашего приложения. Настройте ваш любимый HTTP-сервер так, чтобы посетитель вашего сайта обслуживался index.html и запросы на статические пути, такие как /static/js/main.<hash>.js подаются с содержанием /static/js/main.<hash>.js файл.

В твоем случае беги npm run build создать build/ каталог, а затем сделать файлы доступными в месте, где Nginx может получить к ним доступ. Ваша сборка, вероятно, лучше всего работает на локальном компьютере, а затем безопасно копирует (SCP, SFTP и т. Д.) Файлы на ваш сервер. Вы могли бы бежать npm run build на вашем сервере, но если вы это сделаете, не поддавайтесь искушению напрямую служить build/ Когда вы в следующий раз запустите сборку, клиенты могут получить несогласованный набор ресурсов.

Что бы вы ни выбрали, как только ваш build/ на вашем сервере, проверьте права доступа, чтобы убедиться, что Nginx может читать файлы и настраивать nginx.conf вот так:

server {
  listen 80;
  server_name app.mydomain.com;
  root /srv/app-name;
  index index.html;
  # Other config you desire (logging, etc)...
  location / {
    try_files $uri /index.html;
  }
}

Эта конфигурация основана на том, что ваши файлы находятся в /srv/app-name, Короче говоря, try_files Директива сначала пытается загрузить CSS/JS/images и т.д., а для всех других URI загружает index.html файл в вашей сборке, отображающий ваше приложение.

Обратите внимание, что вы должны использовать HTTPS/SSL для обслуживания, а не небезопасный HTTP на порте 80. Certbot предоставляет автоматический HTTPS для Nginx с бесплатными сертификатами Let's Encrypt, если стоимость или процесс получения сертификата в противном случае вас сдержит.

Источник

Я размещал NextJS в качестве основного приложения на / и хотел разместить CRA на /adminмаршрут. Вот что я сделал:

  • обслуживать CRA через специальный экспресс-сервер
  • менять hostname в package.json
  • добавлять basename к /admin для реактивного маршрутизатора
  • определите следующий проход прокси:
location / {
  proxy_pass http://localhost:3000;
}
location /admin {
  proxy_pass http://localhost:3001;
}
location /admin/ {
  proxy_pass http://localhost:3001/;
}

Статьи по Теме:

Источник
Другие вопросы по тегам