[해결] 배포 후, 도메인을 url에 직접 입력하면 라우팅이 안됐던 문제

문제

 

router.js

const router = createRouter({
    history: createWebHistory('/'),
    routes : [
        { path: '/', component: MainPage },
        { path: '/verify', component: VerifyPage },
        { path: '/member/login', component: LoginPage },
        { path: '/seller/login', component: SellerLoginPage },
        { path: '/member/signup', component: SignUpPage },
        { path: '/seller/signup', component: SellerSignUpPage },
        { path: '/cart', component: CartPage },
        { path: '/product/read/:productIdx', component: ProductDetailPage },
        { path: '/product/register', component: ProductRegister },
        { path: '/order/complete', component: OrderCompletePage },
    ]
})

 

라우터 설정은 위와 같이 되어 있었다. 

 

도메인을 파서 www.localfoodpam.kro.kr로 로 접속해서 메인페이지에서 카트 버튼을 누르거나 로그인 버튼을 누르면 해당 페이지로 라우팅이 정상적으로 이루어졌다.

 

하지만 url에 직접  www.localfoodpam.kro.kr/cart 를 입력해서 접속하려고 하면 404 에러가 떴다.

 

 

해결

 

먼저, nginx의 설정 문제였다. 

 

SPA (Single Page Application)에서는 URL을 통해 직접 접근하는 경우 Nginx가 해당 경로를 올바르게 처리하지 못해서 404 오류가 발생할 수 있다. SPA에서는 모든 경로가 기본적으로 하나의 HTML 파일 (index.html)로 리디렉션되어야 한다. 이를 해결하기 위해서는 Nginx 설정 파일에서 모든 요청을 index.html로 리디렉션하도록 설정하면 된다. 

 

Nginx 설정 파일 접속

sudo vi /etc/nginx/sites-available/default

 

 

기존 코드

 

 

수정된 코드

    location / {
        try_files $uri $uri/ /index.html;
    }

 

---

 

요약

 

직접 URL을 입력했을 때 404 오류가 발생한 이유는 Vue Router와 같은 클라이언트 측 라우터를 사용하는 싱글 페이지 애플리케이션(SPA)에서는 브라우저가 서버에 특정 경로로 요청을 보낼 때 서버가 그 경로에 대한 처리를 할 수 있도록 설정되어 있지 않았기 때문이다.

문제의 원인

1. 클라이언트와 서버의 라우팅 차이: Vue Router는 클라이언트 측에서 라우팅을 처리한. 사용자가 /order/complete와 같은 경로로 이동할 때, Vue Router는 이 경로를 처리하여 적절한 컴포넌트를 렌더링한다.
2. 서버의 기본 동작: 서버(Nginx)는 기본적으로 요청된 경로에 해당하는 파일을 찾는다. 예를 들어, /order/complete 경로에 대해 서버는 /var/www/html/order/complete 파일을 찾으려 하지만, 해당 파일이 존재하지 않으면 404 오류를 반환한다. 
3. SPA의 라우팅 처리: SPA에서는 모든 경로 요청을 단일 진입점 파일인 index.html로 리디렉션하여 클라이언트 측 라우터가 경로를 처리하도록 해야 한다.

 

Nginx 설정에서 try_files 지시어를 사용하여 요청된 경로에 파일이 존재하지 않는 경우, index.html 파일로 리디렉션하도록 설정함으로써 문제를 해결할 수 있다.  이를 통해 브라우저가 특정 URL로 직접 접근할 때도 클라이언트 측 라우터가 경로를 처리할 수 있게 된다.