Реагирует на проблему локального хоста с http => https

Question

Я использовал инструкции из официальной документации реагирования, но localhost по-прежнему начинается с http://.

моего пакета. json файла, в котором я пытался добавить решение.
Я также пытался установить HTTPS = true && npm start '.

{
  "name": "project",
  "version": "1.0.0",
  "description": "Project",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack -p",
    "start": "webpack-dev-server --hot --inline -d && HTTPS=true react-scripts start", 
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/polyfill": "^7.8.7",
    "formik": "^2.1.4",
    "ramda": "^0.27.0",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-https-redirect": "^1.1.0",
    "react-iframe": "^1.8.0",
    "react-router-dom": "^5.0.1",
    "react-scripts": "^3.4.1",
    "react-scroll-up-button": "^1.6.4",
    "styled-components": "^5.0.1",
    "whatwg-fetch": "^3.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.7.5",
    "@babel/plugin-proposal-async-generator-functions": "^7.8.3",
    "@babel/plugin-proposal-class-properties": "^7.7.4",
    "@babel/plugin-transform-async-to-generator": "^7.8.3",
    "@babel/plugin-transform-regenerator": "^7.8.7",
    "@babel/preset-env": "^7.7.6",
    "@babel/preset-react": "^7.7.4",
    "autoprefixer": "^9.6.1",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.2.0",
    "file-loader": "^4.2.0",
    "gh-pages": "^2.2.0",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.12.0",
    "postcss-loader": "^3.0.0",
    "react-inlinesvg": "^1.2.0",
    "sass-loader": "^7.2.0",
    "style-loader": "^1.0.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  }
}

webpackconfig. js

const path = require("path");

const Html = require('html-webpack-plugin');

module.exports = {
  entry: [
    "whatwg-fetch",
    "./js/index.js",
  ],
  output: { 
    filename: "js/out.js",
    path: path.resolve(__dirname, "build")
  },
  devServer: {
    port: 3001,
  },
  module: {
    rules: [

      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        }
      },

      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: "postcss-loader",
            options: {
              plugins: () => [
                require("autoprefixer")()
              ],
            },
          },
          'sass-loader',
        ]
      },

      {
        test: /\.(jpg|jpeg|gif|png)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            publicPath: 'images',
            outputPath: 'images',
          }
        }
      },

      {
        test: /\.(eot|ttf|woff|woff2)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            publicPath: 'fonts',
            outputPath: 'fonts',
          }
        }
      },
    ]
  },

  plugins: [
    new Html({
        filename: 'index.html',
        template: './index.html',
    })
  ]
};

Я новичок и не могу с этим справиться, если кто-то может мне помочь, я буду очень благодарен.

Answer 1

Опции для SET HTTPS=true предназначены для проектов, созданных с помощью create-Reaction-app . Поскольку у вас есть собственный файл конфигурации веб-пакета, вам нужно изменить конфигурацию для включения HTTPS.

Вы можете сделать это с помощью:

devServer: {
    https: true
}

Это разрешает самозаверяющий сертификат. Вы можете предоставить сертификат:

devServer: {
    https: true,
    key: fs.readFileSync('/path/to/server.key'),
    cert: fs.readFileSync('/path/to/server.crt'),
    ca: fs.readFileSync('/path/to/ca.pem'),
}

Документы

Answer 2

В пакете. json попробуйте добавить set HTTPS=true вместо HTTPS=true в стартовом скрипте.