כיצד להתקין HTTPS באופן מקומי באמצעות יצירת-תגובה-אפליקציה

הפעלת HTTPS בפיתוח מועילה כאשר אתה צריך לצרוך API שמגיש גם בקשות באמצעות HTTPS.

במאמר זה, אנו נגדיר HTTPS בפיתוח עבור יצירת-תגובה-יישום שלנו עם תעודת SSL משלנו.

מדריך זה מיועד למשתמשי macOS ודורש brewהתקנתם.

הוספת HTTPS

ב שלך package.json, עדכן את סקריפט ההתחלה כך שיכלול https:

"scripts": { "start": "HTTPS=true react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" },

ריצה yarn startלאחר שלב זה תראה לך את המסך הזה בדפדפן שלך:

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

יצירת תעודת SSL

הדרך הקלה ביותר להשיג תעודה היא באמצעות mkcert.

# Install mkcert tool brew install mkcert # Install nss (only needed if you use Firefox) brew install nss # Setup mkcert on your machine (creates a CA) mkcert -install

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

משורש create-react-appהפרויקט שלך , עליך להריץ כעת:

# Create .cert directory if it doesn't exist mkdir -p .cert # Generate the certificate (ran from the root of this project) mkcert -key-file ./.cert/key.pem -cert-file ./.cert/cert.pem "localhost"

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

לאחר מכן, עלינו לעדכן את startהסקריפט שוב ​​כדי לכלול את האישור החדש שנוצר:

 "scripts": { "start": "HTTPS=true SSL_CRT_FILE=./.cert/cert.pem SSL_KEY_FILE=./.cert/key.pem react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" },

כשתריץ yarn startשוב, כעת עליך לראות שהחיבור שלך מאובטח.

אל תהיה זר! אל תהסס לכתוב אם יש לך שאלות - התחבר אלי בלינקדין או עקוב אחרי בטוויטר.