create-react-app에서 SSL 증명서를 제공하려면 어떻게 해야 합니까?

create-react-app에서 SSL 증명서를 제공하려면 어떻게 해야 합니까?

제가 만들고 테스트한 리액트 앱을 페이스북 보일러 플레이트로 로컬에서 호스팅하려고 합니다.
클라이언트 앱은 node.js를 사용하여 만든 API와 상호 작용하며, 안전한 연결을 설정하는 데 문제가 없었습니다(테스트를 위해 SSL 증명서를 보내는 node.js 클라이언트와 함께).
다만, 자기 서명된 SSL 증명서가 아닌 react를 사용하여 SSL 증명서를 송신하는 경우는 곤란합니다.이것에 의해, 크롬을 사용해 https://example.net:3000 에 액세스 하려고 하면, 이 에러가 발생합니다.

연결이 비공개 연결이 아닙니다(NET:ERR_CERT_AUTHORITY_INVALID).

이 문서는 도움이 되지 않았습니다.

서버는 자기서명증명서를 사용하기 때문에 웹 브라우저는 페이지에 접속할 때 경고를 표시합니다.https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development

이 자기서명증명서 대신 나만의 SSL증명서(도메인 내 다른 앱에서 이미 사용하고 있고 마법처럼 기능하는 것)를 어떻게 사용할 수 있을까요?뭔가 놓쳤나요?

로컬 증명서를 수정하지 않고 동작시킬 수 있었습니다.webpack-dev-server, ""」를 사용한 파일react-scripts 3.4.1으로 (기술적으로) )3.4.0하지만 아마 관련이 없는 문제가 몇 가지 있었습니다.는 이 두 의 환경변수에 했습니다..env.development:

SSL_CRT_FILE=.cert/server.crt
SSL_KEY_FILE=.cert/server.key

주의:

• .cert한 폴더입니다.
• SSL 인증서를 생성하는 내 스크립트
• 이들 2가지 환경변수에 관한 공식 문서

업데이트: 아래 Andi의 답변을 참조하십시오.최신 버전에서는 환경변수를 설정하여 증명서를 구성해야 합니다.

SSL_CRT_FILE=.cert/server.crt
SSL_KEY_FILE=.cert/server.key

---

★★★의 이젝트create-react-app는 매끄럽게 업그레이드 할 수 없기 때문에 권장하지 않습니다.또, 이젝트하지 않고, 유효한 SSL 증명서를 간단하게 취득할 수 있습니다.
.node_modules/webpack-dev-server/ssl/server.pem단점은 파일을 수동으로 복사해야 한다는 것입니다. , 「 」, 「 」를 .postinstallsymblink를 생성하는 스크립트.작성한 스크립트는 다음과 같습니다.

#!/bin/bash
# With create-react-app, a self signed (therefore invalid) certificate is generated.
# 1. Create some folder in the root of your project
# 2. Copy your valid development certificate to this folder
# 3. Copy this file to the same folder
# 4. In you package.json, under `scripts`, add `postinstall` script that runs this file.
# Every time a user runs npm install this script will make sure to copy the certificate to the 
# correct location

TARGET_LOCATION="./node_modules/webpack-dev-server/ssl/server.pem"
SOURCE_LOCATION=$(pwd)/$(dirname "./local-certificate/server.pem")/server.pem

echo Linking ${TARGET_LOCATION} TO ${SOURCE_LOCATION}
rm -f ${TARGET_LOCATION} || true
ln -s ${SOURCE_LOCATION} ${TARGET_LOCATION}
chmod 400 ${TARGET_LOCATION} # after 30 days create-react-app tries to generate a new certificate and overwrites the existing one. 
echo "Created server.pem symlink"

의 ★★★★★★★★★★★★★★★★★.package.json

"scripts": {
    ...
    "postinstall": "sh ./scripts/link-certificate.sh"
}

• 나의 솔루션은 이 스레드에 기초하고 있습니다.

Elad의 답변을 자세히 설명하려면:

• 1. https://github.com/webpack/webpack-dev-server/tree/master/examples/cli/https 에서에 링크된 절차에 따라 자기 서명 증명서를 만듭니다.
• 2. 파일와 개인 키 모두 을 " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " ( " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " ( " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " ")"/cert/server.pem)
• 3. "json 스크립트": json ""

     "start": "HTTPS=true react-scripts start",
     "prestart": "rm ./node_modules/webpack-dev-server/ssl/server.pem && cp -f ./cert/server.pem ./node_modules/webpack-dev-server/ssl",
     

해당 포트에서 파일을 제공하는 서버는 SSL 인증서를 사용하도록 구성해야 합니다.를 사용하고 webpack-dev-server」는 「webpack-dev-server」라고 하는 것입니다).npm start및의 다른 create-display-app 의 경우 "80" "display-app" (" ) 。

이미 설정한 서버를 사용하여 컴파일된 파일을 제공하거나 SSL 증명서를 사용하도록 webpack-dev-server를 설정할 수 있습니다.

를 수행하려면webpack-dev-server의 webpack-dev-server의 webpack-dev-server를 합니다.--cert선택.https://webpack.github.io/docs/webpack-dev-server.html 를 참조해 주세요.

추가 정보가 합니다.--을 통해 명령어 npm 명령어)를 합니다.npm start -- --cert ....

커스텀 스타트 스크립트를 호출하는npm start를 사용하여 이 작업을 수행하려면 해당 시작 스크립트를 편집해야 합니다. 하면 '어울리지 않다'를 해야 할 도 있어요.eject명령어 first: 모든 설정 코드를 repo에 덤프하여 변경할 수 있도록 합니다.

다음은 시작 스크립트의 소스 코드입니다.https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/scripts/start.js#L230

또한 webpack-dev-server는 실제 가동 환경에서 사용하는 것이 아닙니다.

재미있게 보내!

궁극적으로, 이것이 윈도우에서 저를 도와준 것입니다.

  "scripts": {
    "start": "set HTTPS=true&&set SSL_CRT_FILE=./.cert/cert.pem&&set SSL_KEY_FILE=./cert/key.pem&&react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

하지만 먼저, 나는 이렇게 자격증을 땄습니다.

//create a certficate folder
mkdir -p .cert
//create the actual certificates in the folder 
mkcert -key-file ./.cert/key.pem -cert-file ./.cert/cert.pem "localhost"

메모: 나는 mkcert를 초콜릿으로 창문에 설치해야 했다.따라서 Windows에서 https와 함께 작동하도록 React js 앱을 사용하기 전에 이 앱부터 시작해야 합니다.

Update1 : 완전한 솔루션이 동작하는 것을 보고 싶은 경우 코드 전체를 github에 저장합니다.링크 - https://github.com/Jay-study-nildana/FrontEndForStudents/tree/main/ReactJSForStudents/httpshelloworld

리액트 스크립트 웹 팩을 사용할 의 웹 팩.HTTPS=trueSSL_CRT_FILE&SSL_CRT_FILE따라서 이를 환경에 추가하여 증명서에 대한 경로를 설정할 수 있어야 합니다.

애플리케이션을 위해 SSL(HTTPS)을 localhost에 통합하려고 합니까?또는 암호화(특정) algo를 사용한 안전한 API 호출도 가능합니다.

SSL 사용만 가능한 경우,

1. 패키지로 변경해야 합니다.HTTPS를 탑재한json 파일:

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

2. SSL 증명서 작성

3. 프로젝트 루트 폴더에서 다음을 실행하십시오.

   openssl req -x509 -newkey rsa:2048 -keyout keytmp.pem -out cert.pem -days 365
   

4. 을 실행하다

   openssl rsa -in keytmp.pem -out key.pem
   mkdir .cert
   mv key.pem .cert/key.pem
   mv cert.pem .cert/cert.pem
   

5. 증명서(.perm)를 유효하게 합니다.

   "scripts": {
       "start": "HTTPS=true SSL_CRT_FILE='./.cert/cert.pem' SSL_KEY_FILE='./.cert/key.pem' react-scripts start",
       "build": "react-scripts build",
       "test": "react-scripts test",
       "eject": "react-scripts eject"
    },
   

6. 이제 https://httpsost:3000에서 실행

제가 한 일은 다음과 같습니다.

bash <(wget -qO- https://gist.github.com/w35l3y/5bb7fe8508d576472136f35428019177/raw/local-cert-generator.sh)

Import를 했습니다.rootCA.pem ★★★★★★★★★★★★★★★★★」server.pem

했습니다.package.json:

"start": "HTTPS=true react-scripts start",
"prestart": "cp -f /path/to/server.pem ./node_modules/webpack-dev-server/ssl",

'이것'은 다음과 같습니다.

• https://serverfault.com/questions/226386/wget-a-script-and-run-it
• https://gist.github.com/w35l3y/5bb7fe8508d576472136f35428019177

가장 간단한 방법은 Ubuntu에서 SSL을 사용하여 reactjs를 실행하는 것입니다.Windows는 다음과 같습니다.

cert.pem 및 key.pem 파일을 생성하여 앱 루트 폴더의 ssl 폴더에 넣습니다.

패키지 스크립트에 다음 행을 추가합니다.json

"scripts": {
    "start": "...",
    "build": "...",
    "ssl-linux": "export HTTPS=true&&SSL_CRT_FILE=/ssl/cert.pem&&SSL_KEY_FILE=/ssl/key.pem craco start",
    "ssl-win": "set HTTPS=true&&npm start"
  },

Ubuntu - npm은 ubuntu에서 ssl-linux를 실행합니다.

Windows - npm ssl-win 실행

ubuntu에서 pem 파일을 생성하려면

Step 1.  openssl req -x509 -newkey rsa:2048 -keyout keytmp.pem -out cert.pem -days 365
Step 2.  openssl rsa -in keytmp.pem -out key.pem

샘플 폴더 구조

몇 가지 답변에서 본 것과 같이 자기 서명 증명서를 사용하지 마십시오.웹을 통해 신뢰할 수 있는 인증서 공급자가 많이 있습니다.유효한 도메인이 있으면, 자신이 오너라는 것을 간단하게 증명할 수 있습니다.제 증명서는 https://www.noip.com/에서 무료로 제공되었습니다.

1. 의 create하다다를 작성하다private key 및Certificate Signing Request )CSR

   openssl req -new -newkey rsa:2048 -nodes -keyout your_domain.key -out your_domain.csr

2. 합니다.noip하려면 , 「증명서」를 해 주세요.CSR신뢰할 수 있는 서명된 증명서를 이메일로 보내드립니다. 말고 꼭 챙겨주세요keep secret your private keyCRS cr cr cr cr cr cr 。

3. 할 때, 여러분의 반응만 ..env같이 파일(</FONT CHANGE:>).cert/"CHANGE: "CHANGE: "CHANGE:"

   HOST=<YOUR_IP_OR_DOMAIN>

   HTTPS=true

   PORT=443

   SSL_CRT_FILE=.cert/your_domain.crt

   SSL_KEY_FILE=.cert/your_domain.key

주의: 포트 포워딩을 사용하고 있기 때문에 443 포트를 사용하지 않았기 때문에 내부 네트워크 내의 모든 포트를 사용할 수 있습니다.또, 퍼블릭 IP 주소를 직접 사용할 수도 있고, 임의의 프라이빗주소로 전송할 수도 있습니다(이것이 제 작업입니다).

mkcert를 사용하여 자체 서명된 인증서를 생성하고 설치합니다.다른 방법을 시도했지만 오류가 발생하기 쉽습니다.

macOS 사용 예:

brew install mkcert
mkcert -install
mkcert localhost

패키지를 편집합니다.json:

"start": "HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem react-scripts start",

언급URL : https://stackoverflow.com/questions/41192491/how-can-i-provide-a-ssl-certificate-with-create-react-app