Методи поділу переднього та зворотного кінців за допомогою javascript у повному стеці?


31

Припустимо, я маю передню частину, яка в основному є односторінковою програмою, написаною за допомогою кутового, бурчання та нахилу. І припустимо, у мене є бекенд, який є, як правило, лише REST API, що сидить поверх ORM, який зберігає / витягує об'єкти з бази даних, використовуючи такі речі, як грунт, експрес та секвелізація.

Кутове додаток виконує всі візуальні речі, які бачить користувач, але це робить це, використовуючи графічний інтерфейс користувача щодо послуг, що надаються бек-ендом.

Було б бажано розділити їх на дві різні кодові бази, дозволити незалежну розробку, версію, постійну інтеграцію, поштовх до розробки тощо.

Моє запитання, які методи існують для того, щоб це робити чисто? Чи рекомендовані найкращі практики для повного стека javascript?

Варіант №1 здається монолітом, тобто "не розділяйте їх". Професійна полягає в тому, що ланцюжок побудови простий, і все на одному місці - але, здається, є багато мінусів; важче самостійно виконати версію, зламаний фронт означає нерозгорнуту спинку тощо.

Варіант №2 представляється квазімонолітом, де ланцюг побудови переднього кінця призводить до написання купи файлів до бек-енду. distКаталог на передньому кінці буде посилатися на якийсь - небудь каталог на спині кінця, так , по суті , коли передній кінець minifies, uglifies і т.д., він закінчує публікацію до фонових, який проходить все.

Варіант №3 здається повнороздільним: передній та бек-енд кожен запускають власні сервери на різних портах, і вони є повністю окремими проектами. Недолік здається, що їх потрібно налаштувати, щоб знати про порти один одного; бек-енд повинен дозволити CORS з переднього, а передній повинен знати, де очікуються всі ці кінцеві точки.

Варіант №4 може використовувати щось на зразок докер-композиції, щоб скомпонувати всю справу разом.

Я впевнений, що є й інші варіанти. Що рекомендується найкраща практика?

Відповіді:


18

Це додаткове, зворотне додаток, з інтерфейсом REST між ними. У вас вже є повна розлука.

Моє голосування - за варіант № 3. Ви, здається, переживаєте за конфігурацію, але це якось суть. Конфігурація дозволяє провести повне розділення, не вимагаючи щільно зв'язаних кодів. Якщо ви переживаєте за CORS, покладіть все на один домен. Якщо у вас є CORS, найкращим способом управління є конфігурація.

Але тут немає «найкращої практики». Найкраща практика - це та, яка найкраще відповідає вашим конкретним потребам.


2
Як би ви поставили все на один домен, якщо це два окремі сервери? Навіть якщо вони бігали на одному хості, вони мали б бути в різних портах, що робить їх різним походженням.
FrobberOfBits

1
Якщо немає найкращої практики, чи є доступні приклади того, як робиться ця конфігурація?
FrobberOfBits

7
Ви можете поставити зворотний проксі (nginx) перед додатком та встановити /місце розташування до localhost:3000(frontend server) та /api/to localhost:3001(api сервер). nginx тоді прослухає стандартний http-порт.
nvartolomei

@nvartolomei Я згоден із використанням зворотного проксі. Чи є спосіб чітко обмінятись деякою інформацією між бекендом, передньою частиною, як інформація про маршрути? Крім того, чи легко вказати свій зворотний проксі на CDN?
Ендрю Олбрайт

6

Так, вам слід розділити ці два та ставитися до додатка на передньому кінці як до стороннього додатку - ви, зрештою, можете додати іншого клієнта, наприклад, мобільний додаток, і якщо перший клієнт побудований таким чином, ваше життя стане простішим.

Використання докерних контейнерів або іншої системи розгортання здебільшого відноситься до бекенда, оскільки передній край вашої програми - лише статичні активи, які потрібно вирішити. Ви можете розмістити ці активи статично на своєму сервері або де-небудь ще, як CDN, як cloudfront.

Уникнення корів дозволить вам заощадити невелику конфігурацію, але, як було сказано вище у відповіді, це вирішує суть. Використання корсів (та аукціону лексеми) краще підготує ваш сервер для інших клієнтів.

Редагувати: що стосується найкращої практики повного стека - я б просто сказав це, будьте послідовними. Якщо ви використовуєте обіцянки (і вам слід), виконайте це з обох сторін. Дотримуйтесь однакового стилю та форматування js, використовуйте ті самі тестові вкладки (де це можливо) тощо.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.