create-module-app: http 대신 https를 사용하는 방법

create-module-app: http 대신 https를 사용하는 방법

'create-react-app' 환경에서 dev에서 https를 사용하는 방법을 아는 사람이 있는지 궁금합니다.README나 빠른 검색에서는 그것에 대해 아무것도 볼 수 없습니다.https://localhost:3000 이 동작하거나 https://localhost:3001 이 동작하도록 하겠습니다.

★★HTTPS=true 명령어를 하기 전에 명령어를 실행합니다.

문서

구현에서는 HTTPS 환경 변수를 사용하여 서버를 시작할 때 사용할 프로토콜을 결정합니다.

패키지를 편집할 수 있습니다.json 스크립트 섹션은 다음과 같습니다.

"scripts": { "start": "set HTTPS=true&&react-scripts start", ... }

그냥 뛰어가세요.set HTTPS=true&&npm start

이 변경으로 인해 핫 새로고침이 중단됩니다.

--주의:OS === Windows 10 64비트

또한 프로젝트의 루트에 .env라는 파일을 만든 후 쓸 수도 있습니다.

HTTPS=true

그 후 앱을 시작할 때 보통처럼 "npm start"를 실행하면 됩니다.

문서: https://facebook.github.io/create-react-app/docs/advanced-configuration

Linux 와 Windows 의 양쪽 모두에서 동작합니다.여기에 게재되어 있는 다른 답변과는 다릅니다.

Windows (cmd.exe)

set HTTPS=true&&npm start

(주의: 공백 부족은 의도적인 것입니다.)

Windows (Powershell)

($env:HTTPS = "true") -and (npm start)

Linux, macOS(Bash)

HTTPS=true npm start

서버는 자기서명증명서를 사용하기 때문에 웹 브라우저는 페이지에 접속할 때 경고를 표시합니다.

커스텀 SSL 증명서

HTTPS=true SSL_CRT_FILE=<SSLCert.crt> SSL_KEY_FILE=<SSLCert.key> npm start

Linux, macOS(Bash)

HTTPS=true SSL_CRT_FILE=<SSLCert.crt> SSL_KEY_FILE=<SSLCert.key> npm start

매번 이 작업을 수행하지 않으려면:다음과 같이 npm 시작 스크립트에 포함할 수 있습니다.

{
  "start": "HTTPS=true react-scripts start"
}

또는 HTTPS=true를 사용하여 .env 파일을 생성할 수 있습니다.

MAC/UNIX의 경우

export HTTPS=true
npm start

또는 심플한 라이너 1개

export HTTPS=true&&npm start

또는 패키지의 시작 스크립트를 업데이트합니다.에 접근하다.

"start": "export HTTPS=true&&PORT=3000 react-scripts start",

https를 누를 수 있을 거예요

set HTTPS=true&&react-scripts startin scripts > start: of package.json은 다음과 같습니다.

패키지에 "disclosed"가 들어 있습니다.json:

"scripts": {
    "start": "set HTTPS=true&&react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

• HTTPS=true && npm start작동하지 않습니다.

공식 문서에서 참조하세요.개발에서의 HTTPS 사용

(주의: 공백 부족은 의도적인 것입니다.)

"scripts": {
"start": "set HTTPS=true&&set PORT=443&&react-scripts start",
........
}

포트를 변경하여 https로 설정해야 하는 경우.

제 생각엔 이 문제를 언급할 가치가 있는 것 같아요.PORT=443, 디폴트, 디폴트HTTPS이렇게 붙이는 것은 수 있어요.:PORT이데올로기 때문에

su
export HTTPS=true 
export PORT=443
export SSL_CRT_FILE=/PATH/TO/cert.pem     # recommended
export SSL_KEY_FILE=/PATH/TO/privkey.pem  # recommended
npm start

또는

해서 다 수 요.package.json:

  "scripts": {
    "start": "HTTPS=true PORT=443 react-scripts start",

럼이 이가 없어요.export 삭제:

su
npm start

명령 프롬프트에서 사용하세요.

 set HTTPS=true&&npm start

.env(또는 .env.local) 파일에 HTTPS=true 행을 추가합니다.

"접속이 비공개로 되어 있지 않다"는 문제(크롬)로 인해 정상적으로 동작하지 않는 경우, 이 방법은 문제 없습니다.

https://github.com/facebook/create-react-app/issues/3441

요컨대:

1. 먼저 Chrome에서 증명서를 내보냈습니다(이것 참조).
2. 증명서를 Windows로 Import(certmgr.msc 사용).
3. chrome://flags/#allow-insecure-localhost 플래그가 허용되었습니다.안전하지 않은 localhost를 허용하는 방법

는 서버와 브라우저 양쪽에 자기 서명 CA 체인을 설치해야 할 수 있습니다.자기서명 CA와 자기서명증명서의 차이

프록시를 만들 수 있습니다.HTTPS->HTTP

키와 증명서를 작성합니다.

openssl req -nodes -new -x509 -keyout server.key -out server.cert

proxyServer.js라는 이름의 파일을 만듭니다.

var httpProxy = require('http-proxy');
let fs = require('fs');

httpProxy.createServer({
    target: {
      host: 'localhost',
      port: 3000
    },
    ssl: {
      key: fs.readFileSync('server.key', 'utf8'),
      cert: fs.readFileSync('server.cert', 'utf8')
    }
  }).listen(3000);

터미널 실행부터

node proxyServer.js

Windows 10을 사용하고 있는데 같은 문제가 발생했습니다.다음 사항이 필요하다는 것을 깨달았습니다.

1. 관리자 권한으로 명령 프롬프트 실행
2. 터미널 bash에서 다음 명령을 실행합니다.

3. 이 코드를 패키지에 넣을 수도 있습니다.스크립트 섹션 아래의 json 파일:

   "scripts": { "start": "set HTTPS=true&&react-scripts start", (...) }

4. 보너스: PORT를 변경하려면 다음 명령을 사용합니다.

   set HTTPS=true&&set PORT=443&&react-scripts start

   관찰: 일부 문자 사이에 공백이 없어야 합니다.

자세한 내용은 이 링크를 참조해 주세요.

패키지를 편집합니다.json 파일을 작성하고 보안 도메인을 시작하기 위한 시작 스크립트를 변경합니다.예를 들어 https

 {
  "name": "social-login",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-facebook-login": "^4.0.1",
    "react-google-login": "^3.2.1",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    // update this line "start": "HTTPS=true react-scripts start",
    "start": "set HTTPS=true&&react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

감사해요.

윈도우즈 환경에서는 패키지에 다음 행을 추가합니다.json:

  "scripts": {
    "start-dev": "set HTTPS=true&&set PORT=443&&react-scripts start"
  },

https 및 포트 443을 사용하여 개발 서버를 시작합니다.현시점에서는 NodeJs는 정상적으로 동작하는 버그를 알고 있습니다만, nodeJs v8.11.3 - https://nodejs.org/dist/v8.11.3/node-v8.11.3-x64.msi 에서 동작하고 있습니다.

Windows 의 경우는, 이것을 사용해 주세요.

($env:HTTPS = "true") -and (npm start)

VS 코드 터미널(powershell)을 사용하고 있습니다.

(HTTPS=true 설정)를 실행할 수 없었습니다.대신,

반응성 매개의

랩퍼로 ★★★★★★★★★★★★App★★★★★★ 。

저는 지금까지 Windows Insider Program과 함께 Windows 10 최신 빌드를 사용하고 있습니다.

Windows 10 을 사용하는 경우는, 다음의 3 개의 케이스가 있는 것 같습니다.

1. NPM용 CMD 명령줄 포함 Windows 10

set HTTPS=true&&npm start

2. NPM용 PowerShell 명령줄 탑재 Windows 10

set HTTPS=true&&npm start

3. NPM용 Linux Bash 명령줄(My Case is this)을 탑재한 Windows 10

HTTPS=true npm start

문서:리액트 앱 개발 생성

Chrome 및 Safari에서 신뢰할 수 없는 인증서 오류를 방지하려면 자체 서명 키 쌍을 수동으로 지정해야 합니다.CRA 에서는, 그것들을 지정할 수 있습니다.

또, 사용.env이 변수들을 저장하는 파일입니다.

MacOS에서는 Keychain Access에 증명서를 추가한 후Trust Always세세한 부분까지

이 문제에 관한 중요한 점: (로컬호스트가 아닌) LAN에서 https를 사용하는 경우 IP가 정적이지 않기 때문에 SSL 인증이 문제가 됩니다.

이것은 로컬 네트워크의 디바이스용 SSL의 옵션을 검토하는 토픽에 관한 좋은 내용입니다.

패키지를 엽니다.아래와 같이 json 파일을 작성하고 시작 스크립트 파일을 변경합니다.

"start": "react-scripts start",

로.

"start": "HTTPS=true react-scripts start",

localhost 를 재기동해, HTTPS 로 실행되고 있는 로컬 및 네트워크상의 단말기를 확인합니다.

HTTPS=true npm start

Create-React-App에서 작동한 터미널에서

// 이 행을 안드로이드 매니페스트에 추가하여 리액트 네이티브에서 apk를 릴리스할 때 http를 사용합니다.

<application android:usesCleartextTraffic="true">

언급URL : https://stackoverflow.com/questions/44574399/create-react-app-how-to-use-https-instead-of-http