如何让Create-React-App的应用自动支持HTTPS?

我们知道，我们在使用React框架的时候，可以通过Create-React-App命令生成一个React的应用。但是有的时候，我们想让其支持HTTPS，应该如何做呢？
其实不难，只要我们设置在系统的环境变量里面设置了，HTTPS=TRUE
PORT=443就行了。

那么为什么呢？ 因为其实我们在控制台运行npm start的时候，其会调用create-react-app命令给我们封装好了脚本。其就在react-scripts 模块的 子文件夹 /scripts 下面。找到start.js的脚本，我们会看到下面的信息：

// @remove-on-eject-begin/** * Copyright (c) 2015-present, Facebook, Inc. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */// @remove-on-eject-end'use strict';// Do this as the first thing so that any code reading it knows the right env.process.env.BABEL_ENV = 'development';process.env.NODE_ENV = 'development';// Makes the script crash on unhandled rejections instead of silently// ignoring them. In the future, promise rejections that are not handled will// terminate the Node.js process with a non-zero exit code.process.on('unhandledRejection', err => {  throw err;});// Ensure environment variables are read.require('../config/env');const fs = require('fs');const chalk = require('chalk');const webpack = require('webpack');const WebpackDevServer = require('webpack-dev-server');const clearConsole = require('react-dev-utils/clearConsole');const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');const {  choosePort,  createCompiler,  prepareProxy,  prepareUrls,} = require('react-dev-utils/WebpackDevServerUtils');const openBrowser = require('react-dev-utils/openBrowser');const paths = require('../config/paths');const config = require('../config/webpack.config.dev');const createDevServerConfig = require('../config/webpackDevServer.config');const useYarn = fs.existsSync(paths.yarnLockFile);const isInteractive = process.stdout.isTTY;// Warn and crash if required files are missingif (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {  process.exit(1);}// Tools like Cloud9 rely on this.const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;const HOST = process.env.HOST || '0.0.0.0';// We attempt to use the default port but if it is busy, we offer the user to// run on a different port. `detect()` Promise resolves to the next free port.choosePort(HOST, DEFAULT_PORT)  .then(port => {    if (port == null) {      // We have not found a port.      return;    }    const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';    const appName = require(paths.appPackageJson).name;    const urls = prepareUrls(protocol, HOST, port);    // Create a webpack compiler that is configured with custom messages.    const compiler = createCompiler(webpack, config, appName, urls, useYarn);    // Load proxy config    const proxySetting = require(paths.appPackageJson).proxy;    const proxyConfig = prepareProxy(proxySetting, paths.appPublic);    // Serve webpack assets generated by the compiler over a web sever.    const serverConfig = createDevServerConfig(      proxyConfig,      urls.lanUrlForConfig    );    const devServer = new WebpackDevServer(compiler, serverConfig);    // Launch WebpackDevServer.    devServer.listen(port, HOST, err => {      if (err) {        return console.log(err);      }      if (isInteractive) {        clearConsole();      }      console.log(chalk.cyan('Starting the development server...\n'));      openBrowser(urls.localUrlForBrowser);    });    ['SIGINT', 'SIGTERM'].forEach(function(sig) {      process.on(sig, function() {        devServer.close();        process.exit();      });    });  })  .catch(err => {    if (err && err.message) {      console.log(err.message);    }    process.exit(1);  });

其中process.env.PORT和process.env.HTTPS分别用来设置启动后的端口以及是否启用HTTPS。如果在环境变量一旦设置，其在第一次启动的时候就会生成一个服务器端的自签名的SSL的证书，从而应用HTTPS。