본문 바로가기

카테고리 없음

Vue.js앱을 k8s에 배포하는 경우 새로 고침 하면 404뜰 때

728x90

또는 Vue-Router로 라우팅한 주소로 접근이 잘 안되는 이슈가 있습니다.

 

Nginx라우팅 이슈로 아래 포스트와 같은 현상이 k8s에 배포 했을 때도 발생 하는 것입니다.

https://krksap.tistory.com/1931

 

아래와 같이 바꿔주면 해결 됩니다.

 

Dockerfile

# build stage
FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# production stage
FROM nginx:stable-alpine as production-stage
RUN rm /etc/nginx/conf.d/default.conf
COPY ./docker/nginx.conf /etc/nginx/conf.d/nginx.conf
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

아래 nginx.conf를 프로젝트에 넣어놓고 copy합니다.

 

 

nginx.conf

server {
    listen 80;

    location / {
        alias /usr/share/nginx/html/;
        try_files $uri $uri/ /index.html;
    }
}

 

end.

 

 

728x90