React는 프로젝트를 https 시작 모드로 변경합니다.

아래 절차를 따르십시오

mkcert 설치

mkcert 소개

mkcert는 로컬 자체 서명 인증서를 생성하기 위해 go 언어로 작성된 작은 프로그램입니다. 크로스 플랫폼이고 사용하기 쉽고 여러 도메인 이름을 지원하며 CA 및 신속하게 생성하는 데 사용할 수 있는 일련의 편리한 기능을 자동으로 신뢰합니다. 로컬 개발 중 https 환경.

설치 방법도 매우 간단합니다.go 언어의 정적 컴파일 및 크로스 플랫폼 특성으로 인해 각 플랫폼에 대한 공식 사전 컴파일 버전이 제공되며 로컬 영역에 직접 다운로드할 수 있으며 실행 권한(필요 리눅스/유닉스). 다운로드 주소: https://github.com/FiloSottile/mkcert/releases/latest

또한, mkcert는 Homebrew, MacPorts, Linuxbrew, Chocolatey, Scoop 및 기타 패키지 관리 플랫폼에 푸시되었으며 해당 플랫폼에 직접 설치할 수도 있습니다. 패키지 관리 플랫폼. 와 같은:

brew install mkcert  # Homebrew/Linuxbrew
choco install mkcert  # Chocolatey

성공적으로 설치한 후 mkcert 명령을 사용할 수 있어야 합니다.

PS C:\Users\abcfy\projects> mkcert
Using the local CA at "C:\Users\abcfy\AppData\Local\mkcert" ✨
Usage of mkcert:

        $ mkcert -install
        Install the local CA in the system trust store.

        $ mkcert example.org
        Generate "example.org.pem" and "example.org-key.pem".

        $ mkcert example.com myapp.dev localhost 127.0.0.1 ::1
        Generate "example.com+4.pem" and "example.com+4-key.pem".

        $ mkcert "*.example.it"
        Generate "_wildcard.example.it.pem" and "_wildcard.example.it-key.pem".

        $ mkcert -uninstall
        Uninstall the local CA (but do not delete it).

For more options, run "mkcert -help".

mkcert의 기본 사용

위의 도움말 출력으로 판단하면 mkcert는 복잡한 openssl 명령을 피하고 몇 가지 간단한 매개 변수를 사용하여 신뢰할 수 있는 로컬 https 인증서를 생성할 수 있는 기본 워크플로를 제공했습니다. 자세한 사용법은 공식 문서를 참고하세요.

인증서 생성

명령줄 열기

  • 다운로드한 인증서 파일을 -install 명령이 오는 명령줄로 드래그합니다.
 E:\2019_online\plus> E:\2019_online\plus\mkcert-v1.4.3-windows-amd64.exe -install

2.3 인증서 생성

다운로드한 인증서 파일을 localhost 127.0.0.1 다음에 오는 명령줄로 드래그합니다.

E:\2019_online\plus> E:\2019_online\plus\mkcert-v1.4.3-windows-amd64.exe localhost 127.0.0.1

여기에 이미지 설명 삽입

이 때 파일
여기에 이미지 설명 삽입

프로젝트 및 디렉토리에 인증서 복사

여기에 이미지 설명 삽입

위의 두 파일을 반응 프로젝트의 루트 디렉터리에 복사합니다.
여기에 이미지 설명 삽입

시작 명령 수정

package.json 파일에서 시작 명령 앞에 다음 코드를 추가합니다.

cross-env HTTPS=true SSL_CRT_FILE=localhost+1.pem SSL_KEY_FILE=localhost+1-key.pem

여기에 이미지 설명 삽입
여기에 이미지 설명 삽입

종속성 설치

다음 패키지를 먼저 설치해야 합니다.

 yarn add cross-env

프로젝트 다시 시작

npm start

이때 사용자는 이 페이지로 이동할 수 있으며 프로젝트가 이동하지
않거나 https가 성공적으로 열리지 않습니다 .
여기에 이미지 설명 삽입
여기에 이미지 설명 삽입

이때 여기서 ip를 수정하여 127.0.0.1로 변경해야 합니다.

추천

출처blog.csdn.net/weixin_50001396/article/details/123646406