

이 포스팅은 이전 Windows 환경에서 nginx SSL 적용하기 포스팅에서 이어집니다.
80포트로 바로 redirect 시키기 보다는
일단 index 페이지를 먼저 띄우고
이후에 한발한발 나아가는 수순을 밟고 있었다.
문제가 되었던 설정파일은 아래와 같다.
server {
listen 443 ssl;
server_name www.domain.co.kr;
ssl_certificate chain.pem;
ssl_certificate_key key.pem;
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;
ssl_ciphers HIGH:!aNULL:!MD5;
ssl_prefer_server_ciphers on;
location ~ ^/[a-zA-Z0-9]+(.*) {
root html; # 이렇게 하니까 에러발생
root D:/source/nginx-1.25.0/html; # 해결
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
대충 요약하면 루트경로의 html 파일을 찾을 수 없다는 뜻으로
절대경로로 지정해주었다.
절대경로를 지정할 때 주의할점
windows에서 파일 경로를 복사 붙여넣기 하면 파일간 구분이 \(백틱) 으로 나오게 되는데,
nginx 설정파일에서는 \이 아닌 /로 지정해주어야 정상적으로 인식한다.
사실 상관없다!
어차피 index 페이지는 연결이 제대로 되었음을 확인하기 위해서 일차적으로 둔 것이고
이제 ssl인증을 적용하여 80포트로 redirect를 해보려고 한다.
# HTTPS
location / {
proxy_pass http://127.0.0.1;
#root D:/{경로}/build;
#index index.html index.htm;
#try_files $uri $uri/ /index.html;
}
# HTTP
# TODO 80포트로 접근시 443포트로 redirect 하는 과정이 들어가야 할 것 같다.
listen 80;
location ~ ^/[a-zA-Z0-9]+(.*) {
root D:/{경로}/build;
index index.html index.htm;
try_files $uri /index.html;
}
가장먼저 반겨준 에러는 mixed-content error였다.
SSL로 인증된 브라우저에 인증되지 않은 HTTP 프로토콜 요소를 사용할 경우
발생하는 보안적인 에러로
ClientSide에서 요청을 https변경 하여 해결하였다.
두번째로 발생한 에러였다.
얘때문에 무진장 고생했다...
SpringBoot 서버에 SSL에 관한 설정이 없어서 발생한 문제로
application.yml 파일에 해당 설정을 추가하니 해결되었다.
server:
port: 1234
ssl:
key-store: classpath:keystore.p12
key-store-type: PKCS12
key-store-password: {password}
적용방법은 아래 포스팅을 참고하였다.
https://galid1.tistory.com/m/612
openssl 명령어를 실행할 수 없는경우!
- 추가포스팅예정
두가지 에러를 해결하면서
성공적으로 SSL인증을 적용할 수 있었다.

아마 똑똑하게 설계하고 어떻게 진행했다면 문제없이 해결이 될 테지만
나는 바보개발자라 한참을 고생했다.
분명 시키는대로 했는데
NET::ERR_SSL_PROTOCOL_ERROR 에러가 사라지지 않거나
cors 문제가 발생하거나( 분명 cors설정은 되어있는것 처럼 보이는데 말이다! )
한참을 찾아 해맨결과를 공유한다.

실제 ip주소는 허용하지 않고, DNS만 유효한 접근으로 받아들이고 있었다.
key 발급받았으니
너가 붙여봐라 해서 받은거라 처음부터 key를 받을때
IP주소까지 입력했어야 했는지는 잘 모르겠지만
기본 적인 url을
기존 REACT_APP_BASE_URL=https://서버의IP주소:포트번호 에서
REACT_APP_BASE_URL=https://DNS:포트번호 로 변경하여 통신하였더니
해당 에러가 해결되었다.