nginx 서버에서 404를 나타내는 react.display 응용 프로그램

nginx 서버에서 404를 나타내는 react.display 응용 프로그램

react.js 어플리케이션을 서버에 업로드했습니다.nginx 서버를 사용하고 있습니다.애플리케이션은 정상적으로 동작하고 있습니다.그러나 다른 페이지로 이동하여 새로 고치면 사이트가 작동하지 않습니다.404 Not found(찾을 수 없음) 에러가 표시된다.

어떻게 하면 해결할 수 있을까요?

이 경우react.js어플리케이션 로드, 루트는 프런트 엔드로 처리됩니다.react-router예를 들어 다음과 같이 입력합니다.http://a.com그런 다음 다음 다음 페이지로 이동합니다.http://a.com/b이 루트 변경은 브라우저 자체에서 처리됩니다.이제 URL을 새로 고치거나 열 때http://a.com/b새 탭에서 요청은 다음 주소로 이동합니다.nginx특정 루트가 존재하지 않기 때문에 404를 얻을 수 있습니다.

이를 방지하려면 일치하지 않는 모든 루트의 루트 파일(일반적으로 index.html)을 로드하여nginx파일을 전송하면 브라우저의 리액트 앱에 의해 경로가 처리됩니다.이를 위해서는 다음 사항을 변경해야 합니다.nginx.conf또는sites-enabled적절히

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

이것이 말해준다nginx특정된 것을 찾다$uri를 찾을 수 없는 경우는, 송신합니다.index.html브라우저로 돌아갑니다.(자세한 것은, https://serverfault.com/questions/329592/how-does-try-files-work 를 참조해 주세요).

여기에 제시된 답변은 정확합니다.하지만, 저는 이 문제를 해결하기 위해React도커 컨테이너의 응용 프로그램.문제가 발생하였습니다.nginx는 도커 컨테이너 내에서 설정합니다.

순서 1: 도커 파일 준비

# Stage 1
FROM node:8 as react-build
WORKDIR /app
COPY . ./
RUN yarn
RUN yarn build

# Stage 2 - the production environment
FROM nginx:alpine
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=react-build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

명령어가 있는 행 참조:COPY nginx.conf /etc/nginx/conf.d/default.conf여기, 도커에게 복사하라고 합니다.nginx.conf파일을 도커 호스트에서 도커 컨테이너로 보냅니다.

순서 2: 사용nginx.conf응용 프로그램 루트 폴더에 있는 파일

server {
    listen       80;
    server_name  localhost;

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

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

순서 3: 도커 이미지를 빌드하여 실행합니다.

$ docker build . -t react-docker

이렇게 하면 도커 이미지가 정상적으로 빌드됩니다.그것을 확인하려면 , 실행한다.

$ docker images

지금 실행

$ docker run -p 8000:80 react-docker 

http://localhost:8000으로 이동합니다.

이것은 이 블로그에서 영감을 얻었다.

저에게 해결책은 다음과 같습니다.

location / {
            root /var/www/myapp/build;
            index index.html;
            try_files $uri /index.html$is_args$args =404;
    }

오랜 시간이 흐른 후, 드디어 이 작업을 실시하게 되었습니다.

try_files $uri /index.html$is_args$args =404;

마지막 arg(=404)가 이것을 가능하게 했다.

nginx를 사용하여 리액트를 처리하는 동안 이 방법이 효과가 있었습니다.

nginx.conf(또는 default.conf) 파일의 위치 섹션을 다음과 같이 편집합니다.nginx.conf 파일은 /etc/nginx/sites-available/yoursite 어딘가에 있습니다.

location / {
   # First attempt to serve request as file, then
   # as directory, then redirect to index(angular) if no file found.
   try_files $uri $uri/ /index.html;
}

따라서 완전한 nginx.conf 설정은 다음과 같습니다.

   server {
        listen 80 default_server;
        server_name  localhost;

        root   /usr/share/nginx/html;
        index  index.html index.htm;

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

이 문제는 http:///some/path 경로에 있을 때 refresh 키를 누르면 404 오류 페이지가 나타납니다.ngnix 설정의 이 추가 행으로 문제를 해결할 수 있습니다.

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

추가 후 nginx 서비스를 재시작합니다.

이건 내게 효과가 있었다.

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

도 저처럼 하고 계신다면 nextj에 nextj, nextj, nextj는 nextj, nextj는 nextj, nextj는 nextj, nextj는 nextj, nextj는 nextj, nextj는 nextj, nextj는 nextj, nextj는 nextj, nextj는 nextj는 no, , no, nextj는 no, nextj는 no, nextj는 no, nextj, nnext.config.js

module.exports = {
  trailingSlash: true,
}

그리고 당신의 프로젝트를 다시 만드세요.

참고: https://nextjs.org/docs/api-reference/next.config.js/exportPathMap#adding-a-trailing-slash

사이트 사용에서 다음 명령을 사용해 보십시오.

sudo nano /etc/nginx/sites-available/Your_WEB_Folder

try_files $uri $uri/ /index.html;

타워를 가져와!

언급URL : https://stackoverflow.com/questions/43555282/react-js-application-showing-404-not-found-in-nginx-server