Chmury obliczeniowe, devops, programowanie ...

... moje doświadczenia w poszukiwaniu rozwiązań - Marcin Frątczak

[05 MyFood] Hierarchia i podział projektu (docker, flask, react)

We wcześniejszym poście napisałem, że musiałem zrobić krok wstecz. Okazuje się, że musiałem zrobić kolejny krok wstecz.

Dlaczego?

Moim planem jest stworzenie projektu gdzie backend to flask. Będzie on serwował API, z którym komunikować się będzie front.

Na froncie stanie React, czyli technologia JS. Im więcej o nim czytam, i tworze tutoriale, tym bardziej mi się podoba :)

Moim błędnym podejściem było to, że python będzie odpowiadał za API, oraz serwował statyczną stronę. Na tej statycznej stronie miał być React.

Co tu jest błędnego?

Każda część projektu frontend i backend powinna być całkowicie oddzielnym bytem. Nie powinny być ze sobą powiązane. Front nie powinien być zależny od serwera API. Nie powinien być nawet na tym samym serwerze.

To oznacza że muszę przebudować hierarchie projektu.

Muszę wspomnieć, że mój błąd uświadomił mi kolega Dariusz (może kiedyś przekonam go do blogowania ;d )

Plusy:

  • możliwość łatwiejszego skalowania serwerem (baza, itp), wydzielenie backendu na inny serwer niż frontend
  • w razie potrzeby można zmienić technologię api, bez wpływu na front
  • możliwość łatwej modyfikacji wygładu aplikacji, bez ryzyka że coś popsujemy w danych
  • za rok może się okazać, że pojawi się coś lepszego niż React, dzięki oddzieleniu frontu od backendu nic nie stoi na przeszkodzie
  • łatwe stworzenie aplikacji mobilnej w dowolnej technologii dla dowolnego urządzenia (android, ios, windows) , cała komunikacja odbywać się będzie przez API,

Minusy:

  • konieczność poznania 2 technologii
  • … (jak wyjdzie w praniu to dopiszę :) )

Przebudowa repozytorium – zmiany

https://github.com/mfratczak/myfood-generator – wstępne zmiany

  • Docker
    • server backend
    • server frontend
    • server bazodanowy
  • WebClient
    • aplikacja React
  • WebServer
    • aplikacja Flask Api
  • docker-compose.yml (plik konfiguracyjny dockera)

Wstępna hierarchia jak wyżej. Prawdopodobnie się zmieni o elementy CI (Continuous Integration), Testy automatyczne, i kilka innych.

Do testów lokalnych, docker będzie odpalany na dwóch portach.

  • Port 80 -> localhost -> aplikacja web
  • Port 1025 -> localhost:1025 -> api backend

Docelowo jak już projekt zostanie wrzucony na domenę to podział będzie następujący:

  • http://myfood.love – front na porcie 80 (standardowo)
  • http://api.myfood.love – backend na porcie 80 (standardowo)

W kolejnym poście (mam już nadzieję) przygotuje aplikacje front i backend z „hello world”.

 

Dodaj komentarz

Your email address will not be published.

*

© 2017 Marcin Frątczak

Theme by Anders NorenUp ↑

Google Analytics Alternative