개발자
류준열

pnpm create mf-app으로 만든 프로젝트에서 url로 접근시 404 뜨는 이슈

회사에서 pnpm create mf-app + pnpm workspace 기반의 프로젝트를 진행하는데 동료가 배포 환경에서 url로 직접 접근하면 404가 뜬다며 도움을 요청했다.

예시를 위해 /로 접근하면 /2로 리다이렉트 되도록 설정한 코드이다.

export const routes = [
  {
    path: "/",
    element: <RoutingManager />,
    children: [
      {
        index: true,
        element: <Navigate to={`/2`} />,
      },
      {
        path: "1",
        element: <div>App Jobs Page 1</div>,
      },
      {
        path: "2",
        element: <div>App Jobs Page 2</div>,
      },
    ],
  },
];

아래 gif를 보면 /1을 직접 입력하여 접근하면 404가 뜨지만 /로 접근했을때는 /2로 리다이렉트 되는 코드가 잘 작동한다.

왜 url로 직접 접근하면 404가 뜨는걸까?

보통 npx create-react-app my-app 혹은 pnpm create vite react-ts 등으로 만든 리액트 프로젝트는 별도의 외부 모듈을 고려하지 않기 때문에 SPA 라우팅 처리를 클라이언트 사이드에서만 처리한다.

하지만, pnpm create mf-app 으로 생성된 프로젝트는 module federation을 사용하고 있는 구조이다.

이 구조는 여러 독립적인 어플리케이션들이 서로 통합되어 동작하는 방식이다. 이는 때때로 각 어플리케이션들이 자체적으로 라우팅을 처리하거나 서버에서 별도 경로 처리가 필요할 수 있기 때문에 모든 경로를 index.html로 리다이렉트 시키지 않는다.

그래서 build된 파일을 serve할때는 SPA 모드로 동작하도록 -s 옵션을 추가해준다.

/// pnpm create mf-app 으로 만들면 자동으로 build:start 명령어가 생성되는데 -s만 끝에 붙혀준다.
{
  ...
  "scripts": {
    ...
    "build:start": "cd dist && PORT=3001 npx serve -s",
    ...
  },

위 명령어에서 npx serve는 정적 파일(dist)를 서빙하는 명령어이다. serve는 Node.js 기반 정적 파일 서버 도구이고 -s는 SPA 모드를 의미한다.

-s 옵션이 있으면 SPA 모드로 작동하게 되며 이는 모든 경로 요청이 index.html로 리다이렉트 된다는 의미이다. React 처럼 SPA 프레임워크로 만든 어플리케이션에서는 라우팅을 브라우저쪽에서 처리하는데 이 옵션이 없으면 서버가 경로를 찾지 못해 404 에러가 발생할 수 있다.

-s 를 붙히지 않으면 정적 파일을 그 경로에 맞춰 그대로 서빙하지만, SPA 모드로 동작하지 않기 때문에 특정 경로 요청이 제대로 작동하지 않을 수 있다.