如何为已Eject的Create React App配置HTTPS服务？新手求助

Hey there! Since you've already ejected your Create React App and have your self-signed certificates ready, let's walk through exactly how to set up HTTPS using Webpack:

Step 1: Organize Your Certificates #

First, I recommend placing your .crt and .key files in a dedicated folder (like cert/) at the root of your project. This keeps things clean and makes path references easier. For example:

your-project/
├── cert/
│   ├── localhost.crt
│   └── localhost.key
├── config/
├── src/
└── package.json

Step 2: Modify Webpack Dev Server Configuration (Development Environment) #

We'll start with the development server since that's where most folks need HTTPS first.

1. Open the config/webpackDevServer.config.js file in your project.
2. At the top of the file, add the fs module (we need it to read your certificate files) and confirm path is imported (it should be included by default):

   const fs = require('fs');
   const path = require('path');
   

3. Scroll down to the devServer configuration object. Add an https property that points to your certificate files:

   devServer: {
     // ... existing devServer settings (port, hot reload, etc.)
     https: {
       key: fs.readFileSync(path.resolve(__dirname, '../cert/localhost.key')),
       cert: fs.readFileSync(path.resolve(__dirname, '../cert/localhost.crt')),
       // Optional: Add this line if your certificate has a passphrase
       // passphrase: 'your-cert-passphrase'
     },
   }
   

   The ../ in the path accounts for the webpackDevServer.config.js living inside the config/ folder—we need to jump up one level to reach the root cert/ directory.

Step 3: Test the Setup #

Save your changes, then start your development server with:

npm start

Your app should now load at https://localhost:3000 (or your custom port). Since you're using a self-signed certificate, your browser will show a "Not secure" warning—this is totally normal for local development. You can safely proceed by clicking "Advanced" then "Proceed to localhost".

Optional: Production Environment Setup #

If you need HTTPS for your production build (e.g., using Webpack's dev server in production mode), the process is similar:

1. Open config/webpack.config.prod.js.
2. Add the same fs import and https configuration to the devServer section. For live production hosting, most platforms (like Netlify, Vercel, or AWS) have built-in tools to upload and manage SSL certificates directly—check your host's docs for their preferred workflow.

内容的提问来源于stack exchange，提问作者user798719