로컬의 react에 ssl적용

  • mac을 기준으로 작성하였습니다.

hosts를 수정해서 테스트용 도메인 만들기

  • 테스트용으로 임의의 도메인과 ip를 연결해줄 수 있다.
  • 로컬 ip확인
    • ifconfig와 같은것을 이용해 현재 접속하는 ip를 확인
  • hosts수정
    • sudo vi /etc/hosts
    • 제일 하단에 보기 쉽게 추가해준다.
    • dev.example.com으로 접속하면 111.111.111.111로 접속하는 뜻
# dev test dns
111.111.111.111     dev.example.com

react로 접속하려니 invalid host header

  • react에서 알수없으면 막는 그런 정책이 적용되고 있다.
    • cra가 아니면 webpack에서 수정해주면 된다.
  • cra로 만들었다면 /node_modules/react-scripts/config/webpackDevServer.config.js를 수정
    • disableFirewall를 찾아서 true로 처리해준다.
module.exports = function (proxy, allowedHost) {
  const disableFirewall = true;
  // !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true'; //이부분을 주석 처리해준다.
};

이제 ssl을 적용하자

  • mkcert를 설치
    • brew를 이용해 설치
  brew install mkcert
  • mkcert를 react의 root에서 실행
    • root에서 설치
    • 위에서 만든 임의의 테스트 도메인과 아이피를 입력해서 key를 만들어준다.
      • 이상하게 만들면 +2가 파일에 붙어있다. 왜지
    • 두개의 파일로 .pem파일과 -key.pem파일이 만들어진다.
mkcert -install
mkcert "dev.example.com" 111.111.111.111 ::1
  • package.json에 ssl로 시작하는 명령어를 추가 해준다.
    • 만들어진 .pem과 -key.pem파일명을 확인해서 적절히 수정해주자.
  "scripts": {
    ...
    "sslstart": "HTTPS=true SSL_CRT_FILE=dev.example.com.pem SSL_KEY_FILE=dev.example.com-key.pem HOST=0.0.0.0 react-scripts start"
    ...
  }
  • npm run sslstart로 실행 확인
    • https://dev.example.com:3000 또는 https://111.111.111:3000로 확인
    • dev.example.com은 접속이 안되고있다… 하지만 ip로는 접속이 가능하다.

문제점

  • 위에서 열심히 dev.example.com으로 설정했는데 실제로는 111.111.111.111인 ip로만 https가 적용되고 접속이 되고 있다.
    • dev.example.com과 111.111.111.111을 연결했는데 제대로 적용이 안되는거 같다.
    • cra로 만들고 실행해서 애초에 저 임의로 설정한 도메인이 적용안되는듯 하다.

localhost로 간단하게 할때

  • 만약 그저 로컬로 현재 pc에서 확인하기만 하면 된다면 아래처럼 진행
  • mkcert를 만들때 localhost를 이용하면 간단하게 가능하다.
  • react프로젝트 root에서 아래 실행
mkcert -install
mkcert localhost 127.0.0.1 ::1
  • package.json도 위에서 만든 키에 맞게 수정
  "scripts": {
    ...
    "sslstart": "HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem HOST=0.0.0.0 react-scripts start"
    ...
  }
  • localhost또는 127.0.0.1로 접속 확인

참고

  • https://github.com/FiloSottile/mkcert
  • https://velog.io/@yaytomato/React-%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8-https%EB%A1%9C-%EB%A1%9C%EC%BB%AC-%ED%85%8C%EC%8A%A4%ED%8C%85%ED%95%98%EA%B8%B0
  • https://velog.io/@shimsungbo/React-Invaild-host-Header