/etc/hosts에서 내 IP와 가짜 URL을 매핑시켜준다mkcert로 가짜 URL SSL 인증서를 생성한다package.json에서npm start스크립트에 SSL 인증서 위치를 설정해준다.https://dev.example.com:3000으로 접속한다
1. 내 IP와 테스트 도메인 매핑시키기
PC의 hosts 파일에 도메인과 해당 도메인에 대한 IP 주소를 입력해 놓을 경우 따로 DNS 서버에 요청하지 않고 해당 도메인에 바로 접속할 수 있다.
그래서 주로 hosts 파일에 원하는 IP 주소와 도메인을 등록하여 테스트 용도로 사용되고 있다.
- ex) A라는 서버에서 B라는 서버로 이전 작업을 진행 시, B서버에서 사이트 이전 작업에 대한 테스트용으로 hosts 파일에 해당 도메인의 주소를 A서버가 아닌 B서버로 등록하여 사이트의 테스트를 진행한다.
1. 터미널에서 현재 IP 찾기
ifconfiginet 옆에 IP를 확인하면 된다 (127.0.0.1 ❌)
2. IP와 도메인 매핑
/etc/hosts 파일로 들어가서 위에서 찾은 내 IP와 도메인을 매핑시켜줄 것이다.
이렇게 처리하면 브라우저에 dev.example.com 과 같이 url을 입력해 접속하려할 때 내 IP에서 돌아가는 서버를 띄워준다.
sudo vi /etc/hosts비밀번호를 물어보면 컴퓨터 비번을 적어준다.
(/etc/hosts 수정은 루트만 가능해서 sudo 권한이 필요하다)
#
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting. Do not change this entry.
##
127.0.0.1 localhost
255.255.255.255 broadcasthost
::1 localhost
// 👇 얘를 추가한다
10.177.195.111 dev.example.comhosts 파일이 열리면 IP와 도메인을 추가해준다.
수정한 뒤, esc 키를 누르고 :x를 입력하고 엔터하면 파일이 저장되고 vim에서 나온다.
dns 갱신
dscacheutil -flushcache2. mkcert로 테스트 도메인 인증서 생성하기
mkcert는 개발환경에 SSL 인증서를 만들어주는 라이브러리이다.
터미널에서 brew로 간단하게 다운받을 수 있다.
brew install mkcertReact 프로젝트 루트 폴더로 들어가 mkcert를 실행하고 example.com SSL 인증서를 만들어준다.
mkcert -install
mkcert "*.example.com" 127.0.0.1 ::1그럼 루트 폴더에 _wildcard.example.com-key.pem _wildcard.example.com.pem 파일이 생성된다.
3. SSL 인증서 위치 설정
package.json에서 scripts 부분에 start에 SSL 인증서 위치를 알려준다.
"scripts": {
...,
"start": "HTTPS=true SSL_CRT_FILE=_wildcard.example.com.pem SSL_KEY_FILE=_wildcard.example.com-key.pem HOST=0.0.0.0 start:react",
...
그럼 이제 터미널에서 React 앱을 실행해준다.
yarn startChrome 브라우저에서 https://dev.example.com:3000으로 접속한다.
(또는 다른 포트에 열렸을 경우 3000 대신 포트 넘버를 넣어주면 된다)
localhost에서만 https 처리가 필요한 경우
- mkcert 설치
brew install mkcert- 프로젝트 루트 폴더 이동
mkcert -install
mkcert localhost 127.0.0.1 ::1- package.json 설정
"scripts": {
...,
"start": "HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem start:react",
...- 프로젝트 실행
yarn start출처
