문제 내용: 스프링부트 프로필에 tls 적용, front 부분 webpack 에도 같이 적용하기
해결 방법: yml 프로필에 tls 내용 추가, webpack devServer 프로필 수정 (secure: false 정의)
SSL 인증키 생성 + 변환하여 적용하기
내용에 들어가기에 앞서,
기본 SSL 인증키 생성 및 적용 방식은 아래의 두 글을 참조해 주세요.
(SSL 인증키 생성 -> .p12 포맷 변환 -> 프로필 적용 및 프로젝트 구동)
[Embedded Tomcat] Spring Boot 앱에 SSL 인증서 설정하기
개요 private key 생성 및 서버인증서 발급 Keystore 생성 및 적용 3-1) keystore? 3-2) PKCS12 포맷으로 변환하기 3-3) 프로퍼티에 SSL/TLS 인증서 설정하기 3-4) 방화벽 개방 1. 개요 단독 실행 가능한 Jar로 Sp..
blog.jiniworld.me
[Spring Boot] 스프링 부트 SSL 인증서 적용 (TLS, p12)
목차 1. 인증서 변환 필자는 .pem파일을 보유 중이므로 pem 파일을 openssl을 이용해 .p12(PKCS12)파일로 변환하겠습니다. 필자는 윈도우 환경에서 powershell을 활용했습니다. [변환 전 보유 중인 파일] [PEM
veneas.tistory.com
백엔드 TLS 적용
위의 글에 표시된 것과 같이,
백엔드에는 먼저 .yml 파일에 다음과 같은 프로필을 추가해 주었다.
application-tls.yml
server:
ssl:
enabled: true
enabled-protocols:
- TLSv1.1
- TLSv1.2
key-store: classpath:tls/[인증키 파일 이름].p12
key-store-password: [인증키 파일 PW]
key-store-type: PKCS12프론트엔드 TLS 적용
프로젝트에는 백 + 프론트가 같이 연동되어 굴러(?)가기 때문에,
프론트 부분에도 tls 인증이 연동되도록 설정해야 했다.
webpack.dev.js
module.exports = options =>
merge(commonConfig({ env: ENV }), {
...
},
devServer: {
port: 3000, // 프론트 부분에서 열리게 할 포트
devMiddleware: {
stats: options.stats,
},
compress: true,
static: {
publicPath: './build/resources/main/static/',
},
https: true, // 이 부분을 추가했음
historyApiFallback: true, // 404 response 에 대한 index.html serve 효과
proxy: [ // API 통신을 위한 프록시 설정
{
context: ['/api'], // API URI 에 대한 프록시 설정
target: `https://localhost:5000`, // 프록시 주소는 백엔드의 서버 포트와 동일
changeOrigin: true, // CORS 설정
},
],
},
...
이렇게 설정을 하고 프로젝트를 구동하였다.
그런데... ?
웹 페이지 또한 오류를 뿜어내고 있었다. ㅠㅠ
devServer 설정 - 뭐가 빠졌을까 ?
위의 devServer 설정을 다시 돌아 보았는데,
설정이 틀렸거나 빠진 부분은 없어보였다.
그런데, webpack 페이지에서 예시로 나와있던 webpack.config.js 중에 눈에 띄는 부분이 있었다.
A backend server running on HTTPS with an invalid certificate will not be accepted by default.
유효하지 않은 인증서로 HTTPS에 돌아가는 백엔드 서버는 기본적으로 용인되지 않는다.
If you want to, modify your configuration like this:
원한다면 설정을 아래와 같이 변경하면 된다:
webpack.config.js
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: 'https://other-server.example.com',
secure: false, // <- 이 부분
},
},
},
};
devServer 설정에서 secure 부분은,
기본적으로 개인 인증서와 같은 유효하지 않은 인증서를 받아들이지 않은 것이다.
위의 내용을 확인한 후, 기존의 devServer에 secure 부분을 추가하였다.
devServer secure 설정 수정 - 문제 해결!
(다시) webpack.dev.js
module.exports = options =>
merge(commonConfig({ env: ENV }), {
...
},
devServer: {
port: 3000, // 프론트 부분에서 열리게 할 포트
devMiddleware: {
stats: options.stats,
},
compress: true,
static: {
publicPath: './build/resources/main/static/',
},
https: true, // 이 부분을 추가했음
historyApiFallback: true, // 404 response 에 대한 index.html serve 효과
proxy: [ // API 통신을 위한 프록시 설정
{
context: ['/api'], // API URI 에 대한 프록시 설정
target: `https://localhost:5000`, // 프록시 주소는 백엔드의 서버 포트와 동일
changeOrigin: true, // CORS 설정
secure: false, // 개인 인증서(유효하지 않다고 나오는)를 받아들이도록 설정
},
],
},
...
secure: false 설정 후,
HTTPS 보안을 유지하며 기존과 같이 자유롭게 페이지 이동이 가능하다.
