[nginx] location /api 로 api주소를 시작하는 이유

프로젝트가 마무리단계에 접어들고 있다. 배포 중 nginx로 고통받았던 기억이 있어서 다시 고생하지 않기 위해 기록해두려 한다...

 

엘리스에서 첫번째 프로젝트는 사실상 배포를 코치님들이 거의 맡아서 해주신 수준이라 답지를 보고 이러한 흐름으로 진행되는구나.. 하고 넘어가고, 두번째 프로젝트를 하면서 생겼던 이슈를 통해 이 내용에 대해 확실히 알게 되었다. 

이유를 모르고 진행하다 보면 결국 언젠가 큰 화를 불러오는 것 같다...ㅋㅋ 

 

문제

처음 express에 대해 배우면서 라우터, 미들웨어 등 여러 구조에 대해 알게 되었을 때 모르고 넘어갔던 부분이 몇 가지 있는데, 그 중에서 첫 진입단에서 세팅하는 부분이 기억에 난다. 아래는 내가 지금 진행중인 프로젝트의 진입단이다.

const routeLoader = (app: Application): Application => {
  app.get("/", (req: Request, res: Response) => {
    res.send("hello world");
  });

  /** 정적 파일 경로 */
  app.use("/static", express.static("public"));

  /** 라우팅 */
  app.use("/api", router);
  return app;
};

export default routeLoader;

app.use에 static으로 정적파일을 로드한다는 것과 라우터의 uri 엔드포인트에 api로 시작하는 것이 이해가 되질 않았다. 그런데 결국 직접 배포하기 전까지는 아마도... 열심히 익히고 익혀도 정확하게 이해하기엔 어려웠을 것 같다. 

 

본론으로 들어가서, 언젠가 대부분의 사이트들이 /api가 중간에 엔드포인트의 시작점으로 이루어진 것을 보고 당시에는 개발자도구가 뭔지도 모르고 개발자가 될 줄도 몰랐기에..ㅋㅋ 그냥 호기심으로 두고 있었는데, 중요한 것은 우리가 눈으로 보는 url에는 api가 없다. 

 

 

 

해결

그렇다는 것은 무언가 달라지는 구분에 있어서 시작점을 api로 넣어두고, 동적으로 처리하는 무언가가 있다는 뜻이다. 이게 사실 결론이다. 

nginx에서 url을 설정하는 부분인데, 다음은 이전에 내가 프로젝트 당시 설정하던 부분이다. 

server {
        client_max_body_size 0;
        root /var/www/html;
        server_name www.starroad.site;

        location /images {
                alias /home/elice/StarRoad_Project_Backend/dist;
        }

        location /api/ {
                proxy_pass http://127.0.0.1:3000/;
        }

        location / {
                root /home/elice/StarRoad_Project_Frontend/dist;
                try_files $uri $uri/ /index.html;
        }

image로 시작되는 부분은 backend의 dist에서,

api로 시작되는 부분은 백엔드의 진입점에서, 

메인페이지는 frontend의 dist에서 보여주는 것이다. 

 

그런데 여기서 api로 시작하는 부분이 있어야 하는데 당시 프로젝트를 하면서 엔드포인트에 분기를 api로 두지 않았다. 

api가 아니더라도 어쨌든 구분하는 무언가가 있어야 정확하게 해당 경로에서 보여줄 수 있는데, 그렇지 못했던 것이다. 

 

 

 

간단한 문제였음에도.. 결국 세팅하는 모든 것에 대한 정확한 이유를 알지 못하고 그냥 그런갑다 하고 넘어가면 결국 넘어진다....ㅋㅋ