create-react-app으로 SSL 인증서 제공하는 방법
create-react-app을 사용하여 만든 React 앱을 호스팅하면서 SSL 인증서를 제공하는 데 어려움을 겪는 경우, 이 안내서를 참고하여 문제를 해결하고 극복할 수 있습니다.
자체 서명된 인증서 사용하기
기본적으로 create-react-app은 자체 서명된 인증서를 사용하며, 이는 브라우저에서 보안 경고가 표시될 수 있습니다. 그러나 신뢰할 수 있는 안전한 연결을 보장하기 위해 자체 SSL 인증서 대신 독자적인 인증서를 사용하고 싶을 수도 있습니다.
기본 자체 서명된 인증서 대신 독자적인 인증서를 사용하려면 다음 단계를 따르세요:
단계 1: 환경 변수 설정하기
.env.development 파일을 열고 다음 두 개의 환경 변수를 추가하세요:
SSL_CRT_FILE=.cert/server.crt
SSL_KEY_FILE=.cert/server.key단계 2: SSL 인증서 복사하기
프로젝트의 루트에 .cert라는 폴더를 생성하세요. 유효한 SSL 인증서(server.crt)와 키(server.key)를 이 폴더에 복사하세요.
단계 3: webpack-dev-server 설정 업데이트하기
create-react-app의 버전에 따라 webpack-dev-server의 설정을 업데이트하는 방법이 다릅니다.
create-react-app 버전 3.4.1 이상인 경우:
package.json 파일에 다음 코드를 추가하세요:
{
"scripts": {
"start": "node scripts/start.js",
"postinstall": "sh ./scripts/link-certificate.sh"
}
}scripts 폴더에 link-certificate.sh라는 파일을 생성하고 다음 코드를 추가하세요:
#!/bin/bash
TARGET_LOCATION="./node_modules/webpack-dev-server/ssl/server.pem"
SOURCE_LOCATION=$(pwd)/.cert/server.crt
echo ${TARGET_LOCATION}에 ${SOURCE_LOCATION} 링크 생성 중
rm -f ${TARGET_LOCATION} || true
ln -s ${SOURCE_LOCATION} ${TARGET_LOCATION}
chmod 400 ${TARGET_LOCATION}
echo "server.pem 심볼릭 링크가 생성되었습니다"파일을 저장하고 다음 명령을 실행하여 실행 가능하도록 설정하세요:
chmod +x ./scripts/link-certificate.sh이제 npm install을 실행하면 스크립트가 SSL 인증서를 자동으로 올바른 위치로 복사합니다.
이전 버전의 create-react-app인 경우:
프로젝트 루트 디렉토리에서 다음 명령을 실행하세요:
rm ./node_modules/webpack-dev-server/ssl/server.pem
cp -f .cert/server.crt ./node_modules/webpack-dev-server/ssl단계 4: 개발 서버 시작하기
이제 HTTPS가 활성화된 상태에서 React 앱을 시작하세요:
HTTPS=true npm start참고: npm 스크립트를 사용하는 경우, package.json 파일의 start 스크립트를 해당 내용에 맞게 수정하세요.
이 단계를 따른 후에는 create-react-app이 기본 자체 서명된 인증서 대신 독자적인 인증서를 사용하고, 브라우저 경고 없이 안전한 연결을 확립할 수 있습니다.
SSL 인증서가 모든 주요 브라우저에서 유효하고 신뢰할 수 있는지 확인하세요.
결론
이 가이드에서는 create-react-app으로 자체 SSL 인증서를 제공하는 방법을 배웠습니다. 이 단계를 따르면 React 앱에 안전한 연결을 구축하고 자체 서명된 인증서와 관련된 브라우저 경고를 피할 수 있습니다. 독자적인 SSL 인증서를 사용하면 애플리케이션에 신뢰성과 보안성을 추가할 수 있습니다.
SSL을 구현하는 것은 민감한 정보를 보호하고 사용자에게 안전한 브라우징 경험을 제공하는 데 있어 중요합니다. 유효한 SSL 인증서를 제공함으로써 데이터 보안에 대한 약속을 보여주고 관객들과의 신뢰를 구축할 수 있습니다.
이제 신뢰할 수 있는 SSL 인증서로 create-react-app을 호스팅하고 안전한 개발 및 배포 환경을 즐길 수 있습니다.
