בקאנד ופרונט - איך לחבר אותם לאחד

[צדיק תמים]

אני לומד כעת Vue, ורציתי לעשות פרויקט מעשי,
יש לי פרויקט שעשיתי בעבר כדי ללמוד Node.js, בניתי אותו בתור API מלא שהממשק הוא סה"כ להתממשק עם הAPI, כלומר אפשר לעשות הכל גם דרך CURL לapi עצמו...
אבל עשיתי את זה עם רינדור של טמפלייטים עם ejs וגם מעורבות קטנה של צד השרת באימותים ואם יש צורך redirect לדף לוגין או דף אימות מייל וכדו',
כאשר הפעולות השונות ממומשות עם jQuery + axios וספריות UI שונות לtoast (התראות קופצות) וכדו', כעת אני רוצה לכתוב מחדש את הממשק כ-SPA ריאקטיבי טהור, השאלה איך מקובל לעשות את זה?
האם לפתוח פרויקט נפרד לגמרי שירוץ גם על דומיין שונה מהבקאנד וישלח אליו בקשות?
או אולי יש איזה דרך "להכליא" אותם לשרת נוד אחד כלומר שהנתיבים הרגילים יהיו הSPA וכל מה שב"קידומת" /api יעבור אל הבקאנד?
היתרון בזה הוא שיותר קל להרים אינטסנס של הפרויקט. ושאפשר לחסום CORS. מצד שני אני חושש שזה פוטנציאל גדול לבלאגן.
אשמח לעצתכם, תודה.

[יוסף בן שמעון]

@צדיק-תמים כתב בבקאנד ופרונט - איך לחבר אותם לאחד:

או אולי יש איזה דרך "להכליא" אותם לשרת נוד אחד כלומר שהנתיבים הרגילים יהיו הSPA וכל מה שב"קידומת" /api יעבור אל הבקאנד?

כך אני נוהג

app.use('/api/', apiRouter);
app.use('/', express.static(path.join(__dirname, 'assets')));
app.get(/.*/, (req, res) => res.sendFile(path.join(__dirname, 'assets', 'index.html')));

[שמואל4]

@צדיק-תמים את Vue אתה לא צריך שרת כדי להריץ אותו. זה קבצים סטטים. אתה יכול לחשוף אותם עם nginx בלבד, ולעשות location באותו server ל/api עם reverse proxy לServer שלך ואז איך לך גם בעיה של CORS ואתה יכול לחסום בבטחה כי זה הכל באותו דומיין.

[dovid]

@צדיק-תמים כפי שהציע @שמואל4 הכי טוב להפנות לנוד ברמת הnginx רק בlocation של api.
nginx מגיש קבצים סטטיים מהר וטוב יותר מאשר הstatic של אקספרס.
אם כי טוב שגם בקוד תעשה מה ש@יוסף-בן-שמעון ככה שגם בפיתוח בלי nginx יהיו לך תוצאות זהות.

[צדיק תמים]

@יוסף-בן-שמעון ואיפה אתה מניח את הקבצים של הפרונט? איך הindex.html הגיע מdict לassets?

[katz]

@צדיק-תמים אתה יכול להגדיר לבד היכן יהיה ה- output של ה- build,תיקיית ה- dist היא רק תיקיית ברירת מחדל, באפשרותך לשנות בקובץ vתצורה של Vue.
ראה כאן

[יוסף בן שמעון]

@dovid אני לא אוהב לערב את השרת הקידמי בהגשת הקבצים הסטטיים של האפליקציה, אני דוגל בהפרדת רשויות מוחלטת, 1. להמעיט ככל האפשר את התלות של האפליקציה בשירותים חיצוניים, 2. אין צורך לתת לשרת הקידמי הרשאות גישה לקבצים פנימיים של האפליקציה, לא מיבעיא אם זה בתוך דוקר, שאז כל מכונה עומדת לעצמה ואני לא רוצה לחבר את ה volumes של המכונות זו לזו, אלא אפילו במכונה אחת שיש עליה את השרת והאפליקציה, למה לי לתת לאנגקיס הרשאות קבצים שהוא לא צריך, כל אפליקציה צריכה להיות קופסה סגורה שדואגת לעצמה

[dovid]

@יוסף-בן-שמעון אני מבין את שיקוליך, אבל אין לך מענה לבעיית הביצועים.
שנית, אנחנו עוסקים באפליקציה שהיא נטו API, למה שהפרונט אנד ייחשב חלק ממנה? אדרבא, היה מקום לשיטתך להקצות מכונה נטו לקבצים סטטיים (בהחלט אפשר, אם כי לא צריך מכונה וירטואלית רק עבור קבצים סטטיים).
יש לציין שאני מיושן ולא משתמש בדוקר כלל, כך שייתכן שדעתי יונקת מהצמצום הזה.

בהחלט הגיוני תרחיש של סאב דומיין לקבצים סטטיים, ואף ריבוי דומיינים שמשתמשים באותו API, מה שמחדד את ההפרדה הגמורה בין מערכות צד השרת ללקוח.

[שמואל4]

@יוסף-בן-שמעון כתב בבקאנד ופרונט - איך לחבר אותם לאחד:

לא מיבעיא אם זה בתוך דוקר, שאז כל מכונה עומדת לעצמה ואני לא רוצה לחבר את ה volumes של המכונות זו לזו

אפרופו דוקר, למה volume? גם בשרת וגם בלקוח לא צריך volumes בכלל, השרת עושה COPY של הקוד בעת הבניה, והלקוח בבניה עושה build ואחרי זה לוקח את הקבצים לקונטיינר חדש עם nginx.
בכלל, volume מיועד לקבצים שצריכים להיות מחוץ לקונטיינר, למשל, תיקיה data שהשרת מעדכן, או קבצים נוספים, אין שום עניין לשים את ה src בתוך ווליום.
ואני ירחיב:

כמו שאומר @dovid, למה לתת לשרת דברים שהוא לא צריך? אבל אני מסכים איתך, שבטח אם הפרוייקט רץ בדוקר זה לא יהיה נוח לתת לnginx גישה לקבצים, והרעיון הכי פשוט זה להשתמש ב docker-compose עם קונטיינר אחד לשרת ואחד לקליינט בו בזמן שהבניה של השרת מורכבת מהעתקה של קבצי הקוד, ביצוע npm i והתקנת תלויות, ובלקוח זה טיפה מעניין יותר, אתה מעתיק את הsrc, עושה build לVue או למה שזה לא יהיה, ואז עושה קונטיינר חדש FROM nginx ומעתיק את הקבצים הסטטיים שנוצרו מהקונטיינר שבנה את הקליינט (זה כזכור לי COPY --from 0 או משהוא כזה) לתוך /var/www/html ומעתיק קובץ config מתאים של nginx.

כמובן שעכשיו יש לך 2 פורטים, אחד ללקוח ואחד לשרת, ובnginx שרץ בשרת עצמו (לא בדוקר) אתה עושה reverse proxy גם לצד שרת וגם לצד לקוח לפי location מתאימים.

ככה אתה יוצא יישום מבוסס דוקר באופן מלא, בלי לתת למערכת הפעלה גישה לקבצים, וגם מאד קל לתפעול בעדכונים, זה למשוך קוד, ו docker-compose build ושלום.

אבל שוב, לדעתי חבל להעסיק את השרת בקבצים הסטטיים.

[צדיק תמים]

@יוסף-בן-שמעון ואיך אתה עושה בפיתוח עצמו? שרוצים להשתמש בשרת הפיתוח של vue עם טעינה חמה וכו', ולא להשתמש בקבצים הסטטים המקומפלים,
הרי אי אפשר להריץ 2 דברים על אותו פורט... ו2 פורטים נחשבים כ2 כתובות לעניין CORS. או שאולי באמת מריצים בשני פורטים את השרת והקליינט ומאפשרים OCRS לרשימה לבנה?
כמו כן אני מבין שלכל השיטות לא הכוונה לשים את הקוד של הקליינט והסרבר באותה תקיה (עם חלוקה לתקיה לפרויקט הבק ותקיה לפרויקט הפורנט), כל הנידון הוא איך להגיש את הקבצים הסטטיים המקומפלים,
האם להעתיק אותם (ידנית או ע"י הגדרה של ה outputDir) אל תוך תקייה מסויימת בבק (assest) ולהגיש אותם דרך האקספרס, או להגיש אותם דרך שרת HTTP חיצוני כגון נגינקס, לטובת ביצועים. תקנו אותי אם אני טועה.

[גמליאל]

@צדיק-תמים כתב בבקאנד ופרונט - איך לחבר אותם לאחד:

או שאולי באמת מריצים בשני פורטים את השרת והקליינט ומאפשרים OCRS לרשימה לבנה?

זה המנהג בזמן הפיתוח

באקספרס JS אתה יכול לעשות את זה בקלות עם middleware של ספריית cors
למשל כך:

app.use(cors({ credentials: true, origin: 'http://localhost:4200' }));

[dovid]

@צדיק-תמים הנמהג הוא לעבוד עם dev-server של webPack שזמין גם בvue וגם באנגולר.
ככה אתה יכול לפתח בlocalhost:4000 ולפנות בכל מקום לexmapple.com/api בלי שום בעיית cors.
ובעת הפרודקשיין הכל יהיה example.com וממילא לא יהיה cors.

מ"מ:
https://cli.vuejs.org/config/#devserver
https://webpack.js.org/configuration/dev-server/

[צדיק תמים]

@dovid תודה, אנסה.
רק דבר אחד אני לא מבין - הרי ב-Vue יש רק קובץ סטטי אחד (index.html) שנשלח תמיד ללקוח, והJS של הvue router הוא זה שמציג את התוכן הנכון לפי הURL. אם כן איך הפרוקסי יודע מה לא תואם לקובץ סטטי ויש לנתב אותו לבק?

This will tell the dev server to proxy any unknown requests (requests that did not match a static file) to http://localhost:4000.

[חגי]

@צדיק-תמים זה לפי מה שאתה מגדיר לו. בד"כ מפרידים את הקבצים הסטאטיים מהבקאנד (בהגדרות של השרת שלך)

[dovid]

@צדיק-תמים אני מניח שלא כל vue מכיל ראוטר, ועכ"פ ודאי שלא כל פרוייקט webpack.
כמו"כ במידה והפרוקסי מוגדר כסטרינג ולא כאובייקט, אז הוא חל רק על בקשות XHR , ממילא ניווט בשורת הכתובת לא מועבר לפרוקסי.
עוד אפשרות היא לציין מבנה url מסויים שרק הוא יועבר לפרוקסי, למשל שמתחיל בapi.
תראה בלינקים שהבאתי, עושים את זה ככה:

devServer: {
  proxy: {
    '^/api': {
      target: 'https://example.com',
      changeOrigin: true
    }
  }
}