Połączenie Reacta z VPS.

Question

Cześć, mam pewien problem. Napisałem jakiś czas temu prostą apkę webową opartą na frontendzie na React, a na backendzie na Django. Apka do bazy zbiera tylko zgłoszenia uczestników, więc jest to dość bardzo prosta aplikacja. Komunikacja między frontendem, a backendem odbywa się poprzez REST Api.

Teraz przyszła pora "upublicznić" aplikację jednak tutaj pojawia się problem, ponieważ chcąc hostować apkę na nazwa.pl oni nie mają możliwość uruchomienia Django u siebie na serwerze. Zaproponowali natomiast zakup serwera VPS.

Aplikacja jest jednym z moich początkowych projektów i nie za bardzo rozumiem jak mógłbym to teraz uruchomić. Jak zastąpić backend w Django serwerem VPS.

P.S. Aplikacja w całość musi być hostowana u polskich dostawców.

Proszę o pomoc :)

Comments

P.S. Aplikacja w całość musi być hostowana u polskich dostawców.

Tylko zaznaczę że to trochę dziwny wymóg.

Swoją drogą, nazwa.pl też ma VPSy, to po prostu osobna usługa (i nie "zakup", a bardziej wynajem zasobów, tak samo jak przy klasycznym hostingu PHP ;) ).

---

Ale to nie jest taki wymóg? W sensie to jest takie pytanie na marginesie czy jak się robi coś już komercyjnie to jest wymóg, że serwer, baza itd muszą być trzymane u polskiego dostawcy?

---

Nie rozumiem, oryginalny PS nie miał tam znaku zapytania więc wyglądało jak wymóg.

Anyway, raczej rzadko coś takiego się dzieje, ludzie najprędzej wrzucają na jakąś super popularną chmurę jak Amazona, Google'a czy VPS DigitalOceana. Jak wybierają polskie to albo dlatego że bywają tańsze, albo mają taki wymóg prawny/kontraktowy przez przechowywane dane wrażliwe albo dlatego że to projekt rządowy...? Ale to tylko zgadywanie z mojej strony.

---

U mnie to jest właśnie wymóg, ale samego mnie to zastanawiało czy naprawdę się tak robi. Czyli np jeśli kiedyś robiłbym apkę komercyjną, która będzie przechowywać jakieś dane typu email, numer tel, pesel to muszę to hostować w PL czy to po prostu będzie zależało od różnich czynników?

---

Zależnie od tego jakie dane przechowujesz i jakie ryzyko podejmujesz, odpowiedź... zależy. I znowu, nie jestem prawnikiem.

Zakładając że mówisz o RODO, to jak już to gdzieś w EU, a nie konkretnie w PL.

A co do firm amerykańskich które mają serwery w EU to to jest dziwna strefa o której pewnie prawnik mógłby się godzinę rozwodzić*, ale moja osobista intuicja by była "dla zwykłego zastosowania jak email+hasło, osobiście bym spokojnie trzymał w AWSie/digitalocean/innej chmurze, tylko pilnował żeby zawsze były w ich europejskich serwerach".

(* sam zobacz https://aws.amazon.com/compliance/gdpr-center/ i jak mocno rozpisane są punkty jak "Can I continue to use AWS services following the Schrems II ruling?")

Im więcej dopytujesz tym odpowiedź jest dłuższa ;) Zgaduję że wiele osób używających popularne zagraniczne chmury po prostu nie myśli o tym w obawie o własne zdrowie psychiczne.

---

Dobra, niektóre kropki jakoś mi się zaczęły łączyć :D. Dzięki wielkie za pomoc

---

W środowisku developerskim wszystko fajnie działa. Na czystym vps postawiłem backend w javie, wrzuciłem projekt React na serwer i wywołując komendę npm start
projekt startuje i pobiera wszelkie niezbędne dane z backendu.
Schody zaczynają się kiedy próbuje odpalić reacta w wersji produkcyjnej. Docelowo chciałbym cały front wrzucić do dockera ale teraz dla testu
uruchamiam npm run build, niby wszystko się buduję ok, tworzy się katalog build
następnie odpalam serve -s build
strona startuję można się na nią dostać jednak nie pobiera żadnych danych z backendu.
w package.json mam "proxy": "http://localhost:8080/"

Poniżej przykład jak w react pobieram dane:

await fetch(url, {
     method: 'GET',
     withCredentials: true,
     credentials: 'include',
     headers: {
         'Content-Type': 'application/json'
     }
     })
    	  .then(async response => {
        	const isJson = response.headers.get('content-type')?.includes('application/json');
        	data = isJson && await response.json();
        	if (!response.ok) {
              const error = (data && data.message) || response.status;
              responseStatus = response.status;
              return Promise.reject(error);
          }else{
            return data;
          }
    	  })
    	  .catch((error) => {
      errorMessage = error.toString();
});

return data;

Wiem, że metoda którą wyżej opisałem raczej nie będzie docelowo dobra na prod, kombinowałem z takim rozwiązaniem:
https://medium.com/bb-tutorials-and-thoughts/how-to-develop-and-build-react-app-with-nodejs-bc06fa1c18f3
jednak tam w projekcie node js jest expres i obsługa requestów z reacta.js, ja chciałbym żeby reacta.js po dane strzelał bezpośrednio na localhost:8080 gdzie chodzi Java o ile jest taka opcja

Answer 1

Jak zastąpić backend w Django serwerem VPS.

Nie zastępujesz, Django cały czas działa. Taki VPS to po prostu wypożyczona cudza maszyna wirtualna z linuxem, nie inny rodzaj aplikacji. Wrzucasz kod na serwer i odpalasz Django bez praktycznie żadnych zmian (poza konfiguracją). Baza też może być ta sama którą dotychczas używałeś.

Z różnicą że Django na serwerze powinien chodzić w trybie DEBUG=false, plus zamiast być odpalanym przez zwykłe 'manage.py runserver', powinien stać np za nginxem i gunicornem/uwsgi (bo wbudowany 'runserver' jest tylko do developmentu, jest mniej wydajny i bezpieczny). Tu masz popularną instrukcję jak zrobić każdy krok: https://www.digitalocean.com/community/tutorials/how-to-set-up-django-with-postgres-nginx-and-gunicorn-on-ubuntu

Przy czym nic tutaj nie jest specyficzne dla VPSów, instrukcja jest uniwersalna dla "chcę produkcyjnie odpalić aplikację Django na maszynie linuxowej".

Answer 2

• Upewnij się czy VPS jest w Polsce
• Zamów serwer z dostępem do ssh
• Przeprowadź podstawowe czynności: update paczek, instalacja czego potrzebujesz, zmiana default portów, konfiguracja ssh, fail2ban itp itd.
• Instalujesz nginx
• Ustaw sobie routing w Django tak żeby wszystko było dostępne z prefixem /api
• Na nginx'ie ustawiasz że wszystkie requesty są proxowane na UWSGI. Ogarnij config tak żeby pasował do tego ile masz wątków.
• Do uruchomienia Django potrzebujesz UWSGI, sprawdź czy nie ma czegoś nowszego lepszego itp itd.
• Na wszystkie inne pathy serwujesz apkę react.

Jest dużo rzeczy które trzeba zrobić ręcznie, więc możesz znaleźć jakiś hosting, albo automatyzować to wszystko z Ansiblem. Niestety tworzenie apek to góra wiedzy, a ich skuteczne wdrożenia i utrzymanie to równie duża góra wiedzy.

Ja mam bardzo mały projekt wdrożony produkcyjnie, też w Django. Dlatego postawiłem to na docker composie 

Comments

sprawdź czy nie ma czegoś nowszego lepszego itp itd.

Z tego co wiem, to już od kilku lat domyślną rekomendowaną opcją jest nginx+gunicorn (ale nginx+uwsgi też jak najbardziej działa).