로컬, 개발환경 변수 따로 적용하기 (개발환경, 배포환경 분리하기, 크롬 SSL 인증서경고 무시)

문제인식

프론트, 백 모두 배포했다.

그러다보니 개발할때 로컬환경에서 해야할 때, API URI와 같은 변수들이 다르게 적용되어야 한다.

 

나중에 이 글을 보면 이런걸 이제야 했나 싶을정도로 미리 알아뒀어야 싶지 싶다.

 

---

설정 방식

Spring

application-local.properties 파일을 만들어서 IDE에서 실행시 환경변수로 해당 프로필을 선택하는 방식으로 구성.

기본값은 배포환경설정으로.

 

환경에 따라 변하는 변수 front-end-base-uri를 지정했다.

일반적으로 실행될 때 기본값으로 실행될 것이다.

 

application-local.properties 파일을 새롭게 만든 뒤, 같은 변수명으로 덮어씌울 값을 할당했다.

 

그리고 개발시 IDE에 실행될때 해당 local 프로필이 활성화되도록 설정했다.

 

@Value 어노테이션으로 값을 가져오게 했다.

 

 

기본값으로는 배포환경에서의 값이 불러와진다.

 

 

하지만 소셜로그인 코드가 실행되면서 사용된 FRONT_BASE_URI는 local에 활성화된 값이 잘 출력되는 것을 확인할 수 있다.

 

추가 선택사항

현재는 기본값이 배포환경이고 빌드는 모든 파일이 함께 빌드에 포함된다.

아예 빌드할때 프로필을 선택하는 방법도 있다.

 

 

 

 

React

.env 파일을 통해 스크립트별 로드되는 env를 분리하여 변수를 불러오는 구성.

 

 

현재 세팅되어있는 스크립트들, 아래의 두 스크립트를 주로 사용한다.

• start : 웹소켓을 통해 실시간으로 개발하는 환경
• deploy : gh-pages 라이브러리를 통해 자동으로 github pages를 통해 배포할 수 있게 빌드됨.

각 스크립트별로 우선적으로 적용되는 env 파일명이 다르다.

해당 스크립트별 우선순위가 높은 파일명이 왼쪽에 있다.

 

로컬환경변수 적용

그래서 개발시에 사용될 변수를 .env.development.local에 할당해두었다.

 

 

배포환경변수 적용

현재 gh-pages 라이브러리를 통해 배포하고 있고, 이는 github의 해당 저장소의 settings에서 관련 설정을 할 수 있다.

settings - Enviornments - Enviornments variables 에서 아래처럼 추가했다.

 

 

 

---

 

트러블 슈팅 : 크롬의 SSL 경고로 인한 로드 실패

크롬상 위의 오류와 함께 load가 되질 않는다.

postman으로 데이터가 불러와지지만 ssl인증서의 경고를 준다.

 

www.foohaha-back.shop 도메인으로 SSL 인증서를 발급했는데, 이를 localhost에서 실행되어서 그런듯하다.

발급된 인증서의 도메인과 응답이 온 도메인이 달라서 경고를 주는데 충분히 타당하다.

 

해결방법 : SSL 경고를 무시하는 설정 (의도된 상황임을 알고 있으니)

 

다만, 개발환경에서는 감안할 수 있으니 경고를 패스하고 데이터를 가져올 수 있게 세팅하는 방식으로 설정했다.

 

크롬 바로가기에서 뒤에 '--ignore-certificate-errors'를 불러오면 경고는 해주지만 응답받은 데이터를 받아들인다.

 

 

 

참고 링크

https://hstory0208.tistory.com/entry/Spring-%EB%B0%B0%ED%8F%AC-%ED%99%98%EA%B2%BD-%EB%B3%84%EB%A1%9C-%EC%84%A4%EC%A0%95%ED%8C%8C%EC%9D%BC-%EB%B6%84%EB%A6%AC%ED%95%98%EA%B8%B0-%ED%94%84%EB%A1%9C%ED%95%84

https://velog.io/@haerong22/Spring-%EB%B0%B0%ED%8F%AC-%ED%99%98%EA%B2%BD-%EB%B3%84%EB%A1%9C-%EC%84%A4%EC%A0%95%ED%8C%8C%EC%9D%BC-%EB%B6%84%EB%A6%AC%ED%95%98%EA%B8%B0feat.-gradle

 

https://velog.io/@rmaomina/react-env

https://reference-m1.tistory.com/376

https://velog.io/@rmaomina/github-pages-env-setting