Πώς να ρυθμίσετε τοπικά το HTTPS με το create-react-app

Η εκτέλεση του HTTPS στην ανάπτυξη είναι χρήσιμη όταν πρέπει να καταναλώσετε ένα API που εξυπηρετεί επίσης αιτήματα μέσω HTTPS.

Σε αυτό το άρθρο, θα δημιουργήσουμε HTTPS σε εξέλιξη για την εφαρμογή create-react-app με το δικό μας πιστοποιητικό 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ξανά, θα πρέπει τώρα να δείτε ότι η σύνδεσή σας είναι ασφαλής.

Μην είσαι ξένος! Μη διστάσετε να γράψετε εάν έχετε απορίες - συνδεθείτε μαζί μου στο Linkedin ή ακολουθήστε με στο Twitter.