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

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

 

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

https://krksap.tistory.com/1931

 

아래와 같이 멀티 스테이지 빌드(Multi Stage Build)로 바꿔주면 해결 됩니다. 여기에서 핵심은 nginx.conf파일에 설정을 변경해서 넣어주는 것입니다.

 

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;
    }
}

 

위 Dockerfile에 대해 조금 설명을 해보자면 FROM이 두번 나오는 것을 볼 수 있습니다. 그리고 첫번째 FROM에도 as가 있고 두번째 FROM에도 as가 있습니다. as뒤에 나오는 이름은 자유롭게 써도 됩니다.

 

중요한 것은 production stage에 두번째 COPY입니다.

# 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

위 코드의 맨 아랫줄에 COPY --from=build-stage /app/dist /usr/share/nginx/html 으로 되어 있습니다. 앞에서 as build-stage에서 빌드해서 /app/dist 에 있는 파일을 /usr/share/nginx/html로 복사하라는 뜻 입니다.

 

 

end.