תהליך העלאת מערכת fullstack מה-localhost לעולם האמיתי

yossiz

@yyy כתב בתהליך העלאת מערכת fullstack מה-localhost לעולם האמיתי:

שאלה נוספת:
האם curl הוא הכלי המקובל לנסיונות שכאלו (אין UI כמובן)?

כן, מקובל לגמרי.
אם אתה רוצה UI אז postman וחבריו (postman היא תוכנה כבדה, יש חלופות קלות יותר)

yossiz

@yyy כתב בתהליך העלאת מערכת fullstack מה-localhost לעולם האמיתי:

מה שקורה שכשאני מנסה לגשת לקונטרולר באמצעות tls/ssl (במילים אחרות https) מקבל את השגיאה הנ"ל.

לפי המבואר פה זו השגיאה שמקבלים כאשר מנסים לגשת עם פרוטוקול TLS לשרת שמדבר HTTP פשוט
כדאי שתעתיק לפה את קונפיגרצית ה-nginx שלך

dovid

@yyy כתב בתהליך העלאת מערכת fullstack מה-localhost לעולם האמיתי:

שכשאני מנסה לגשת לקונטרולר באמצעות tls/ssl

למה שיעבוד? ssl זה לא משהו שמגיע "כי למה לא".
תחבר את הnginx לasp כפי המדריך של מיקרוסופט,
את שכבת הSSL תוסיף בהמשך, מה בוער?
(יש לי חשד שבאנגולר אתה פונה לlocalhost:5000. זה טעות נפוצה אצל מפתחי אנגולר שהם לא מודעים כלל ליום שאחרי הפיתוח.
זה כמובן לא יעבוד, הרי הlocalhost לא יילך איתך למחשבי הגולשים.
מה שצריך לעשות תמיד זה או לפנות באנגולר לאותו דומיין (ע"י כתובת יחסית שמתחילה בלוכסן) או לדומיין אחר גם בעת הפיתוח.
איך זה יעבוד? הרי בזמן הפיתוח אתה עובד מול localhost? בשביל זה מגדירים בהגדרות הserve פרוקסי שאומר שכל כתובת שמתחילה בapi או כל כלל אחר, אנא נתב אותה נכון לשעת הפיתוח לlocalhost:5000).

yyy

@yossiz
לא ידעתי ש-nginx מטפל גם בשרת, הכוונתי אותו רק לאנגולר.
הנה:

ubuntu@vps-c2df8674:~$ cat /etc/nginx/sites-enabled/default
 server {
       listen 80;
       server_name 62.88.198.72;

       root /var/www/html;
       index index.html;

       location / {
           try_files $uri $uri/ /index.html;
       }
   }

@yossiz כתב בתהליך העלאת מערכת fullstack מה-localhost לעולם האמיתי:

לשרת שמדבר HTTP פשוט

מי הוא זה ואיזה הוא? אני לא התקנתי כלום בהקשר זה ברמת השרת.

yyy

@dovid כתב בתהליך העלאת מערכת fullstack מה-localhost לעולם האמיתי:

למה שיעבוד? ssl זה לא משהו שמגיע "כי למה לא".

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

תחבר את הnginx לasp כפי המדריך של מיקרוסופט,
את שכבת הSSL תוסיף בהמשך, מה בוער?

אם אני לא אתעסק עם ה-ssl מה העניין לחבר את ה-Nginx? כמו שהראתי יש לי תקשורת לא ssl-ית.

@yyy כתב בתהליך העלאת מערכת fullstack מה-localhost לעולם האמיתי:

(יש לי חשד שבאנגולר אתה פונה לlocalhost:5000. זה טעות נפוצה אצל מפתחי אנגולר שהם לא מודעים כלל ליום שאחרי הפיתוח.
זה כמובן לא יעבוד, הרי הlocalhost לא יילך איתך למחשבי הגולשים.
מה שצריך לעשות תמיד זה או לפנות באנגולר לאותו דומיין (ע"י כתובת יחסית שמתחילה בלוכסן) או לדומיין אחר גם בעת הפיתוח.
איך זה יעבוד? הרי בזמן הפיתוח אתה עובד מול localhost? בשביל זה מגדירים בהגדרות הserve פרוקסי שאומר שכל כתובת שמתחילה בapi או כל כלל אחר, אנא נתב אותה נכון לשעת הפיתוח לlocalhost:5000).

אני עדיין לא מתעסק אפילו בחיבור האנגולר לדוטנט, אני רוצה לראות שכל המרכיבים הרלוונטיים (DB,דוטנט,אנגולר) עובדים תקין ואח"כ לקנפג את החיבורים ביניהם. בכ"א אקח לתשומת ליבי את ההערה שלך להמשך.

yyy

@yyy כתב בתהליך העלאת מערכת fullstack מה-localhost לעולם האמיתי:

מי הוא זה ואיזה הוא? אני לא התקנתי כלום בהקשר זה ברמת השרת.

Kestrel.

yyy

מתעד את נסיונותי להפעיל SSL תקין באמצעות Kestrel. (אולי יעזור למישהו בעתיד)
הוספתי ב-launchSetting.json את הרשומה הבאה:

"sslProd": {
     "commandName": "Project",
     "dotnetRunMessages": true,
     "launchBrowser": false,
     "launchUrl": "swagger",
     "applicationUrl": "https://localhost:443",
     "environmentVariables": {
       "ASPNETCORE_ENVIRONMENT": "Production"
     }
   }

dotnet publish +winsp
ועדיין כשאני מנסה לפנות באמצעות פורט 443 יש שגיאה:

ubuntu@vps-c2df8674:~$  curl -I  http://localhost:443/api/Numbers/GetNumbersFromDotnet
curl: (7) Failed to connect to localhost port 443: Connection refused

ניסיתי עוד כמה פתרונות כמו זה
וכן שינוי משתנה הסביבה ASPNETCORE_ENVIRONMENT ל-sslProd או production, ושום דבר לא עוזר. ה-ssl מסרב לתקשר. אני מתיאש לע"ע מהכיוון הזה ואנסה לחבר את ה-nginx בתור רוורס פרוקסי (למדתי מה זה), ואולי הוא ידע להעיר מהתרדמת את תקשורת ה-ssl.

dovid

@yyy כל ההגדרות שתעשה עד מחר לא ייתנו לך בחיים SSL,
SSL מקבלים על ידי חברה חיצונית שהיא גורם מוסמך והתעודה העליונה שלהן מכובדת ע"י הקליינטים.
ואני לא מבין למה אתה כה מתעקש ללכת בדרכים משלך במקום לעשות בתום מה שמדריכים אותך.
מה דחוף עכשיו SSL? למה אתה לא מגדיר את הNGINX כמו במדריך הרשמי של מקרוסופט?

dovid

אם מהתחלה הייתי מרגיש שאתה "הולך אחרי" היית אחרי כל הסיפור הזה תוך יום אחד.
מתחיל הנושא אני מרגיש שאני מדבר עם מישהו ששואל אבל חושש/חשדן/ממש כל תשובה ומה שנקרא מנסה "להבין לבד".
יש בזה משהו חיובי אבל תבין שאין פה באמת דיון בריא, כשכותרת הנושא היא מה התהליך ובפועל זה בעצם בואו תעזרו לי להסתדר לבד.

צדיק תמים

@yyy ‏SSL אומר שהתעודה מוצפנת בפרוטוקול מסוים עם מה שנקרא תעודות, שמעידות שהתשובה שהדפדפן מקבל אכן מגיעה מהשרת של הדומיין tchumim.com ולא נפתחה/עברה טיפול בדרך.
אלא שכל אחד יכול להנפיק תעודה בשם כל דומיין שירצה, ולכן כמו שכתב @dovid‏ חברה חיצונית (CA) מאשרת שהתעודה שלך תקפה, והוא אחראי בין השאר לוודא לפני הנפקת התעודה שאכן הדומיין מצביע על השרת, כלומר שהשרת מורשה לייצג את הדומיין, וככה אני לא יכול לייצר תעודה עבור tchumim.com, לשבת באמצע התעבורה, לחטט בה ולהצפין מחדש עם התעודה שלי, כיוון שהתעודה שלי לא מאושרת על ידי CA.

לאור כל הנ"ל, לא אמור להיות לך SSL לכתובת שהיא localhost כלומר פנימית בשרת, ולכן גם אין כזה דבר https://localhost (מלבד תעודה בהנפקה עצמית לצורך פיתוח שלא רלוונטית לכאן).
התעודה נצרכת לצורך ניתוב החוצה ורק כאשר יש דומיין, הדרך הנפוצה היא להאזין בפורט רגיל, 80 או 3000 וכו', ולהשתמש במה שנקרא reverse-proxy כגון nginx/caddy, שיש לו כאן 2 מטרות:

לנתב את כל הבקשות שמגיעות לשרת בפורט 443 לפורט הפנימי 3000 - של האפליקציה עצמה (רק במידה והאפליקציה לא מאזינה ישירות בפורט 443)
לדאוג לחלק של הHTTPS, כלומר לקחת את התשובה של השרת דוטנט שלך שמגיעה בלי הצפנה כמובן בפורט פנימי, ולעטוף אותה בפרוטוקול ההצפנה והתעודות שיבטיחו לדפדפן של הגולש שהתוכן מקורי ושלם

ישנן דרכים נוספות, כמו להאזין ישירות בפורט 443 עם האפליקציה ולתת לה לנהל את עניין הSSL בעצמה (סעיף 2) - שזה אולי מה שניסית אבל לא מקובל ומיותר, או להשתמש בSSL של Cloudflare - שזה בעצם ממש reverse-proxy כמו האחרים, רק שהוא קורא בשרת של קלאודפלייר במקום בשרת שלך.

כדאי לקרוא https://www.digicert.com/what-is-an-ssl-certificate

yyy

@dovid
קיבלתי. מעכשיו אני זורם איתך.
אני כעת מבצע את מה שכתוב כאן.
כעת יש לי תקשורת באמצעות הדפדפן המוגדרת ע"י קובץ ה- /etc/nginx/sites-available/default
הזה:

server {
     listen        80;
      server_name 62.88.198.72;
      location / {
        proxy_pass         http://127.0.0.1:5000;
        proxy_http_version 1.1;
        proxy_set_header   Upgrade $http_upgrade;
        proxy_set_header   Connection keep-alive;
        proxy_set_header   Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Proto $scheme;
 }

  }

השאלה כעת היא
איך משלבים את ההגדרות של האנגולר דלעיל באותו קובץ(?)?

dovid

האם כל הניתובים שלך בasp מתחילים בתחילית קבועה, כמו api או כמה תחיליות קבועות?

yyy

רק api
דוגמא
https://domain/api/controller/method

dovid

אז תשנה בהתאם את הקובץ הdefault:

server {
  listen        80;
  server_name 62.88.198.72;

  location /api {
    proxy_pass         http://127.0.0.1:5000;
    proxy_http_version 1.1;
    proxy_set_header   Upgrade $http_upgrade;
    proxy_set_header   Connection keep-alive;
    proxy_set_header   Host $host;
    proxy_cache_bypass $http_upgrade;
    proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header   X-Forwarded-Proto $scheme;
  }

  location / {
    root /var/www/html;
    try_files $uri $uri/ /index.html;
    index index.html;
  }

}

yyy

בשל המעבר לדוטנט 7 אני נתקל בשגיאת CORS עקשנית. עד היום בדוטנט 3 אם הייתי רוצה לאפשר פניות מכיוון הלקוח הייתי מגדיר כך:

app.UseCors(x => x
             .AllowAnyMethod()
             .AllowAnyHeader()
             .SetIsOriginAllowed(origin => true) // allow any origin

בדוטנט 7 ע"פ מייקרוסופט הדרך אמורה להיות כך:

var MyAllowSpecificOrigins = "_myAllowSpecificOrigins";
var builder = WebApplication.CreateBuilder(args);

builder.Services.AddCors(options =>
{
    var MyAllowSpecificOrigins = "_MyAllowSubdomainPolicy";
    options.AddPolicy(name: MyAllowSpecificOrigins,
        policy =>
        {
            policy.WithOrigins("http://localhost:4200")
                .SetIsOriginAllowedToAllowWildcardSubdomains();
        });
});
...
app.UseCors(MyAllowSpecificOrigins);
app.UseAuthorization();

וזה כדי לאשר לכה"פ לדפדפן עם אנגולר על localhost לגשת לשרת.

ע"פ המוצע כאן ניסיתי לשנות לזה:

builder.Services.AddCors(options =>
{

    options.AddPolicy(myAllowSpecificOrigins, policy => {
        policy.WithOrigins("https://localhost:4200", "http://localhost:4200");
        policy.WithHeaders("*"); 
    });
});

לא עזר.
בנוסף ניסיתי להוסיף בקונטרולר את שורת הקודה הבאה

HttpContext.Response.Headers.Add("Access-Control-Allow-Origin", "http://localhost:4200");

לא עזר.

כך נראה האנגולר שקורא לדוטנט :

getNumberFromDb(): Observable<number> {

    let httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json;charset=utf-8',
        Authorization: "",

      }),
    };

    return this.httpClient.get<number>(this.getNumberFromDbURL, httpOptions);
  }

איך אפשר לאפשר לכל דפדפן לפנות לדוטנט בלי לקבל את השגיאה הנ"ל?
המון תודה!

עריכה מאוחרת : הפיתרון הוא

למחוק את ה-headers מהאנגולר
למחוק את המידלוור app.UseHttpsRedirection();

dovid

@yyy הדרך הנכונה היא מה שכתבתי לך לעיל

@dovid כתב בתהליך העלאת מערכת fullstack מה-localhost לעולם האמיתי:

(יש לי חשד שבאנגולר אתה פונה לlocalhost:5000. זה טעות נפוצה אצל מפתחי אנגולר שהם לא מודעים כלל ליום שאחרי הפיתוח.
זה כמובן לא יעבוד, הרי הlocalhost לא יילך איתך למחשבי הגולשים.
מה שצריך לעשות תמיד זה או לפנות באנגולר לאותו דומיין (ע"י כתובת יחסית שמתחילה בלוכסן) או לדומיין אחר גם בעת הפיתוח.
איך זה יעבוד? הרי בזמן הפיתוח אתה עובד מול localhost? בשביל זה מגדירים בהגדרות הserve פרוקסי שאומר שכל כתובת שמתחילה בapi או כל כלל אחר, אנא נתב אותה נכון לשעת הפיתוח לlocalhost:5000).

אני יודע שאתה תוהה מה הקשר בין לזה לCORS, אבל זה לא רק הפתרון אלא ככה היית אמור לעשות רק שלא היה לך מורה טוב.

yyy

@dovid אני בהחלט מבין את הקשר ל-CORS, (ולא מעט בזכות זה) אבל רק לגבי הפתרון של לפנות לאנגולר באותו דומיין שהוא בתורו יפנה לשרת.
הפתרון של פניה ישירה לשרת גם בזמן הפיתוח לכאורה עדיין יגרום ל-CORS הלא כן?

אני כעת עובד בהתאם לשיטה השניה וכאמור בגלל המעבר לדוטנט 7 אני צריך לפתוח מעט את הקוד ולהכיר סינטקסים שונים.

בכ"א תודה.

dovid

@yyy כתב בתהליך העלאת מערכת fullstack מה-localhost לעולם האמיתי:

(ולא מעט בזכות זה)

תודה.

הפתרון של פניה ישירה לשרת גם בזמן הפיתוח לכאורה עדיין יגרום ל-CORS הלא כן?

לזה התכוונתי שלא תבין כי זה אכן לא מובן במבט ראשון.
התשובה היא שהפרוקסי מבוצע ע"י התהליך של הserve שפשוט לא מחוייב לחוקי הcors.

yyy

כעת הצלחתי ע"פ המדריך הזה להעתיק את ה-DB שלי לשרת, ולהתקין אותו.
כעת מה שנשאר לי זה לחבר את הדוטנט בשרת, ל-SQL של השרת.
אני מניח שבדומה להפניות ל-Localhost, גם כאן כבר בשלב הפיתוח צריך לשנות את ה-ConnectionString שיהיה מקושר לשרת, אמת?

dovid

@yyy כתב בתהליך העלאת מערכת fullstack מה-localhost לעולם האמיתי:

אני מניח שבדומה להפניות ל-Localhost, גם כאן כבר בשלב הפיתוח צריך לשנות את ה-ConnectionString שיהיה מקושר לשרת, אמת?

אני כנראה לא הובנתי,
האנגולר רץ במחשב הגולש. שמה הlocalhost הוא קשקוש, הרי לא רץ שמה צד שרת במחשב שלו!
הדוטנט רץ בשרת וכך גם הSQL, כך שאין פסול תמיד להצביע על שרת נוכחי = localhost.
(כמו"כ בדוטנט יש קובץ הגדרות נפרד לדריסה עבור הפרודקשיין, כך שזה לא בעיה לנהל שני מחרוזות חיבור).
אגב בקונקשיין סטרינג מציינים שרת נוכחי ע"י נקודה, למשל . או .\sqlexpress, כמו"כ בwindows הרבה פעמים מתחברים לsqlserver באותו מחשב עם אישורי windows כלומר בלי סיסמה, בלינוקס נדרשים להתחבר עם שם משתמש וסיסמה לזכרוני.

תחומים - פורום חרדי מקצועי

תהליך העלאת מערכת fullstack מה-localhost לעולם האמיתי