Create-React-App 애플리케이션에서 SSL을 사용하는 방법

by

HTTPS는 최신 애플리케이션, 특히 사용자 데이터를 처리하는 애플리케이션에 필수입니다. 몇 단계만 거치면 React용 HTTPS를 설정할 수 있습니다.

SSL(Secure Sockets Layer)은 서버와 클라이언트 사이에 보안 링크를 설정하는 보안 프로토콜입니다. 데이터 암호화를 수행하는 HTTPS 프로토콜의 일부입니다. SSL은 도청 및 관련 공격으로부터 데이터를 보호하기 때문에 중요합니다.

기본적으로 create-react-app을 사용하여 React 애플리케이션을 생성하는 경우 해당 애플리케이션은 HTTPS를 사용하지 않습니다. 앱에 대해 HTTPS를 활성화하는 것은 특히 HTTPS를 통해 요청을 제공하는 API에 요청을 프록시하려는 경우 유용합니다.

React에서 HTTPS 사용

create-react-app 을 사용하여 앱을 생성 하면 기본적으로 HTTP에서 실행됩니다. SSL을 사용하고 HTTPS를 통해 페이지를 제공하려면 package.json 에서 HTTPS 변수를 true로 설정해야 합니다 . scripts.start 값을 다음과 같이 수정하면 됩니다 .

"scripts": {
    "start": "<strong>HTTPS=true</strong> react-scripts start",
},

또는 앱을 시작할 때 HTTPS 환경 변수를 true로 설정할 수 있습니다 .

Linux/macOS의 경우:

HTTPS=true npm start

Windows cmd에서:

set HTTPS=true&&npm start

Windows Powershell의 경우:

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

그러나 각 접근 방식은 첫 번째 단계일 뿐입니다. 이 시점에서 React 애플리케이션을 시작하려고 하면 오류가 발생합니다. 프로세스를 완료하려면 유효한 SSL 인증서를 설정해야 합니다.

컴퓨터에 인증 기관 만들기

SSL 인증서를 생성하는 데 사용할 수 있는 도구 중 하나는 mkcert입니다. 아무것도 구성하지 않고도 로컬에서 테스트된 개발 인증서를 생성할 수 있습니다.

크로스 플랫폼과 호환되며 Windows, Linux 및 macOS에서 작동합니다. 이 글은 리눅스를 사용합니다.

mkcert GitHub 페이지 에서 사용 중인 플랫폼의 설치 가이드를 찾아보세요 .

certutil을 설치하여 시작하세요 .

sudo apt install libnss3-tools

그런 다음 Homebrew를 사용하여 mkcert를 설치할 수 있습니다.

brew install mkcert

다음 명령을 실행하여 로컬 인증 기관(Ca)을 생성합니다.

mkcert -install

CA가 성공적으로 생성되면 이제 SSL 인증서 생성을 시작할 수 있습니다.

SSL 인증서 생성

React 앱의 루트 폴더로 이동하여 SSL 인증서를 생성하세요.

먼저 인증서용 폴더를 만듭니다.

mkdir reactcert

다음을 실행하여 인증서를 생성하고 방금 만든 폴더에 저장합니다.

mkcert -key-file ./reactcert/key.pem -cert-file ./reactcert/cert.pem "localhost"

SSL을 사용하도록 React 구성

"scripts": {
    "start":
        "HTTPS=true <strong>SSL_CRT_FILE=./reactcert/cert.pem SSL_KEY_FILE=./reactcert/key.pem</strong> react-scripts start"
}

package.json에서 SSL 인증서를 가리키는 경로를 추가합니다.

SSL을 사용하여 React 사이트를 보호하세요.

이 기사에서는 React 로컬 환경에서 SSL 인증서를 사용하는 방법을 보여주었습니다. 그러나 SSL 인증서는 모든 웹 애플리케이션에 필수적입니다. 이는 해커로부터 웹사이트를 보호하고 사이트를 방문하는 사용자의 데이터를 보호합니다.