[Today's Bug(Nginx)] proxy_pass가 안 먹혀요...

📢 이 버그 좀 보세요!

버그 다시 띄우기 귀찮아요....
대략 상황을 정리하자면, 서버는 AWS 사용중, BE: Spring boot(REST API로 호출 예정), FE: Vue.js 3, web server: Nginx 사용중에 Vue에서 REST 방식으로 api를 호출할 예정이었다. 대충 다른 블로그 참고하면서 이런 저런 세팅하는데 CORS 오류도 나고요 404에러도 나고요... 도대체 어찌합니까..? 

처음 local과 nginx 세팅은 아래와 같다.

local에서 실행시 (vue.config.js 세팅. pathRewrite 아래와 같이 적어줘야 함.) 

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:9000", // 요청할 서버 주소
        changeOrigin: true,
        pathRewrite: {
          "^/api": "",
        },
      },
    },
  },
});

nginx으로 실행시

        location / {
        # 이것은 VUE로 올린 FE 프록시 설정
        # First attempt to serve request as file, then
        # as directory, then fall back to displaying a 404.

        root /var/lib/jenkins/workspace/dbti/dist;
        proxy_pass http://localhost:8888/;
        proxy_redirect off;
        charset utf-8;

        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Fowoarded-Proto $scheme;
        proxy_set_header X-NginX-Proxy true;
                try_files $uri $uri/ =404;
        }

        location /api {
        # 요것은 SPRING BOOT로 올린 BE 프록시 설정
        proxy_pass http://localhost:9000/;
        proxy_redirect off;
        charset utf-8;
        proxy_set_header X-Real-IP $remote_addr; # 실제 접속 IP
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        }

돌렸는데 계속 404뜸..... whitelabel 오류 남... 왜? ㅠ 왜? 어제 야근까지 해가면서 못 찾음. 그러던 도중 아래와 같은 강같은 글을 보았다.

https://serverfault.com/questions/1102199/nginx-reverse-proxy-not-working-when-multiple-ports-defined-for-rest-api

nginx reverse proxy not working when multiple ports defined for REST api

🐞 버그가 나타난 이유?

위의 링크를 보면 proxy설정시 prefix에 /를 끝에도 붙이라고 되어있다... 왔?! ㅠ 이렇게 간단한걸... 근데 생각해보면 / 경로도 /를 꼭 넣어주는 거 보면 맞는 말임...

#Generally, you should always prefer

location /prefix/ {
    ...
}
#over the

location /prefix {
    ...
}
#unless you are proxying a single API endpoint rather than a whole API (or another web app). When you use an URI prefix with the proxy_pass directive (that is, proxy_pass http://localhost:5000/; rather than proxy_pass http://localhost:5000;, the trailing slash counts as an URI prefix here), nginx will strip the prefix specified in location directive from your request URI and prepend it with the prefix specified in proxy_pass. Use

location ^~ /api/ {
    ...
    proxy_pass http://localhost:5000/;
}

 

🕸 어떻게 이 버그를 잡을까?

이 내용은 위와 같습니다 드디어 해결 완!