如何通过 https 在生产中部署 React 应用程序？

Question

I have a React App that works beautifully over HTTPS using a.env.production file containing:

HTTPS=true
SSL_CRT_FILE=/etc/ssl/certs/mycert.crt
SSL_KEY_FILE=/etc/ssl/private/mykey.key

the package.json file contains:

"scripts": {
   "start": "env-cmd -f .env.production react-scripts start",
   "build:production": "env-cmd -f .env.production react-scripts build"
}

when I do:

npm start

everything works, and I can access my server over HTTPS from anywhere. Now, this is the funny thing, now I do:

npm run build:production

which also works fine, and I get:

The build folder is ready to be deployed.
You may serve it with a static server:

serve -s build

Now, this is what fails:

1) When I use the serve command above, the environment variables in the.env.production file are not picked up? Why?

2) If I pass the environment variables manually as in:

HTTPS=true SSL_CRT_FILE=/etc/ssl/certs/mycert.crt SSL_KEY_FILE=/etc/ssl/private/mykey.key PORT=8580 serve -s build 

Only the PORT variable seems to be picked up, but the server now runs on HTTP. Any ideas why?!

Answer 1

When you run npm start , a development server is started for you under the hood that is configured to pick up the SSL_CRT_FILE, SSL_KEY_FILE and HTTPS env vars automatically.

serve doesn't do that, you need to let it know with these CLI flags:

serve -s build --listen 8580 --ssl-cert "/etc/ssl/certs/mycert.crt" --ssl-key "/etc/ssl/private/mykey.key"