Nginx 뒤의 VueJS 라우터 이력 모드

Nginx 뒤의 VueJS 라우터 이력 모드

마이 이슈

Nginx 뒤에 VueJS 라우터를 이력 모드로 설정하는 방법에 대한 공식 매뉴얼을 읽어보았습니다.또, 다음의 문서를 참조해 주세요.

Stackoverflow - vue-router, nginx 및 직접 링크

Stackoverflow - 도커에서 Vue-router의 nginx를 설정하는 방법

이 모든 것을 확인하고 여러 번 변경해도 루트에 직접 링크를 제공할 수 없으며 올바르게 로딩할 수 없습니다(일명 404)./).

내 환경

nginx 도커 이미지를 만듭니다(nginx:alpine정적 VueJS 파일을 처리하도록 합니다.

마이 컨피규레이션

도커 파일

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

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

Nginx 설정

Nginx 버전: 1.16.1

user                    nginx;
worker_processes        1;
error_log               /var/log/nginx/error.log warn;
pid                     /var/run/nginx.pid;
events {
    worker_connections  1024;
}

http {
    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;
    log_format          main '$remote_addr - $remote_user [$time_local] "$request" '
                             '$status $body_bytes_sent "$http_referer"'
                             '"$http_user_agent" "$http_x_forwarded_for"';
    access_log          /var/log/nginx/access.log main;
    sendfile            on;
    keepalive_timeout   65;
    server {
        listen          80;
        server_name     _ default_server;
        index           index.html;
        location / {
            root        /usr/share/nginx/html;
            index       index.html;
            try_files   $uri $uri/ /index.html;
        }
    }
}

그래서 저는 직장에서 다른 개발자에게 연락했고, 그들이 셋업을 검토하고 있을 때 Docker file에 오타가 있다고 지적했습니다.

COPY prod_nginx.conf /etc/nginx/nginx.confg

필요조건:

COPY prod_nginx.conf /etc/nginx/nginx.conf

바보 같은 작은 오타!일단 이 문제를 해결하자, Nginx와 Router가 작동했어요!

언급URL : https://stackoverflow.com/questions/58137496/vuejs-router-history-mode-behind-nginx