WIL 10 ( Weeked I Learned ) - 22/07/17

혹시 모를 상황을 대비해 미리 https 환경을 구성했다.

React는 기본적으로 http 를 기반으로 실행된다.

기본적으로 그냥 인증 받지 않은 https로 변경하기 위해서는 다음과 같이 실행하면 된다.

// CMD
set HTTPS=true&&npm start
// PowerShell
($env:HTTPS = "true") -and (npm start)
// Linux, MacOS ==> 저는 gitbash를 사용 중이라 이 녀석을 사용했습니다.
HTTPS=true npm start

이렇게 하면 안전하지 않은 페이지라고 뜨지만 사용해도 괜찮다고는 한다. ( 정확히 자료를 찾을 수 없었다. )

이게 매우 찜찜해서 다른 방법을 찾아봤다.

https://medium.com/@praveenmobdev/localhost-as-https-with-reactjs-app-on-windows-a1270d7fbd1f

외국인 형님( 누님일지도 ) 모르지만 상당히 친절하게 설명되어 있다. ( 다만 내가 windows를 쓰기 때문에 Windows 관련 설명이다. )

• 순서( 내가 했던 순서의 기반 )
  1. React 터미널( git bash ) 에서 npm install -g mkcert
  2. Windows 키+ Q 키를 눌러 명령 프롬프트를 검색하고 관리자 권한으로 실행
  3. 관리자 권한으로 실행된 명령 프롬프트에서 다음 명령을 실행
     1. mkcert create-ca
     2. mkcert create-cert
  4. C:\Windows\System32로 들어가 아래의 4개 파일이 있는지 확인

5. 참고 링크에서 오타가 있다. ca.crt를 실행
6. 하단에 인증 설치하기 ( 이미 설치해서 ) 클릭
7. Local 환경 클릭 → 다음
8. 다음 저장소 옵션에 모든 인증서 배치 클릭 → 더보기 → 신뢰할 수 있는 인증 기관 클릭 → 다음
9. 다음 → 완료
10. React의 package.json의 scripts내의 start를 다음과 같이 변경.

        // 기존
"scripts": {
           "start":"react-scripts start",
           "build": "react-scripts build",
           "test": "react-scripts test",
           "eject": "react-scripts eject"
}
        
"scripts": {
            "start":"set HTTPS=true&&set SSL_CRT_FILE=C:/Windows/System32/cert.crt&&set SSL_KEY_FILE=C:/Windows/System32/cert.key&&react-scripts start",
            "build": "react-scripts build",
            "test": "react-scripts test",
            "eject": "react-scripts eject"
          }

11. yarn start 후 주소창을 확인.