서비스를 배포해보기 전까지는 아래 설정이 무엇을 의미하는지 전혀 몰랐다.
nuxt.config.ts
nitro: {
devProxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
autoRewrite: true
}
}
},로컬에 Springboot 앱과 Nuxt 앱을 동시에 띄워놓고 열심히 코드 칠 때는 좋았지...
이래서 무엇이든 알고 사용하는 것이 참 중요하다.
404에러?
동일한 VPC 안에
- Nuxt App 전용 EC2
- Springboot App 전용 EC2
를 실행시키고, Jenkins를 이용해 양쪽에 소스를 배포하는 것까지는 성공했다.
그런데 페이지에 접근해 로그인 하려고 하니 로그인 api 호출부에서 404에러가 발생했다.
백엔드 배포가 정상적이지 않은 문제로 생각해 한참을 헤맸다.
사실, 로컬/배포 시점에서 바라보아야 할 경로를 구분짓지 않고 위 devProxy 설정만 해두었음...
환경 변수를 세팅해서 로컬에서 실행시킬 때는 localhost:8080을, 배포 후 실행시킬 때는 백엔드 EC2 private IP를 바라보도록 수정하고 실행시켰더니 CORS 오류가 발목을 잡았다.
CORS 오류 발생!
인터넷 검색을 하다보니
export default defineNuxtConfig({
vite: {
server: {
proxy: {
"/api": {
target: "http://localhost:8080",
changeOrigin: true,
},
},
},
},
})이런 프록시 설정 방법도 존재한다는 것을 알았다.
하지만 Nginx를 이용해서 CORS 오류를 해결해 보기로 했다.
다시 devProxy 설정을 보자.
nitro: {
devProxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
autoRewrite: true
}
}
},위 설정에 기반해 작업했기 때문에 화면 경로에는 api라는 단어가 포함되지 않는다.
그래서 Nginx가 /api 경로로 들어오는 요청을 Nuxt 앱이 아닌 Springboot 앱으로 던져주게 설정하면 깔끔하겠다고 생각했다.
CORS 오류 해결 방법
먼저, 프론트엔드 EC2에서 실행중이던 Nginx에는 아래 설정이 존재하고 있었다.
json-stash.com:3000이 아니라 json-stash.com로 접근할 수 있도록 하는 역할만을 담당하는 모습이다.
server {
listen 80;
server_name json-stash.com;
#Nuxt
location / {
proxy_pass http://localhost:3000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
# try_files $uri $uri/ =404;
}
...여기에 아래 설정을 추가했다.
#Springboot
location /api/ {
proxy_pass http://{백엔드 EC2 private IP}:8080/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}이로써 json-stash.com/api로 시작하는 요청에 대해서는 Nginx가 프록시가 되어 스프링부트와 통신하므로
브라우저에서는 CORS 오류가 발생하지 않게 되었다.
마치며
Nginx는 WAS의 부담을 덜어주기 위한 Web Server라고 알고 있어,
WAS가 CORS 오류에 대해서는 고려하지 않아도 되게끔 하기 위해서 Nginx를 프록시처럼 사용하는 방법을 사용하였다.
그러나 이것이 맞는 접근법인지 조금은 의심이 가기는 한다.
이 기회에 Nginx에 대해 좀 더 알아보도록 해야겠다.
