Nginx에서 모든 Angular 요청을 index.html로 리디렉션하는 방법

Nginx에서 모든 Angular 요청을 index.html로 리디렉션하는 방법

Angular를 서버하기 위한 간단한 Nginx config 파일을 만들었습니다.

server {
  listen 80;
  listen [::]:80;

  root /path/to/apps/myapp/current/dist;
  access_log /path/to/apps/myapp/current/log/nginx.access.log;
  error_log /path/to/apps/myapp/current/log/nginx.error.log info;

  index index.html;

  location ^~ /assets/ {
    gzip_static on;
    expires max;
    add_header Cache-Control public;
  }

  location / {
    try_files $uri $uri/ =404;
  }
}

그리고 역시 모든 것이 잘 작동합니다.Angular UI Router를 사용하고 있기 때문에 모든 페이지를 다음으로 전달하고 싶습니다.index.html그래서 Angular가 인수할 것입니다. (그래서 요청합니다.example.com/users/newNginx에서 로 리디렉션됩니다.index.html, Angular UI가 처리할 수 있도록) 페이지 재로드, 링크 등을 위해 사용합니다.

어떻게 하면 이것을 이룰 수 있을까요?

저는 다음과 같은 옵션을 가지고 놀았습니다.

server {
    #implemented by default, change if you need different ip or port
    #listen *:80 | *:8000;
    server_name test.com;
    return 301 $scheme://www.test.com$request_uri;
}

이 답변에 명시되어 있습니다.하지만 모든 요청에 따라 업무와 유사한 것을 할 수 없었습니다.

제안해 주시면 감사하겠습니다.

거의 다 이해했습니다. 리처드가 보여주듯이 목록에 index.html을 추가하면 try_files가 올바른 파일입니다.그러나 =404를 끝까지 제거할 필요는 없으며, 실제로는 제거하지 않는 것이 좋습니다.

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

위의 변경 사항이 실행되면 다음과 같이 구성을 다시 로드합니다.

• $uri는 요청을 파일로 시도할 것이고, 실패할 경우 다음 파일로 이동합니다.
• $uri/는 요청을 folder/index로 시도할 것입니다. 그런 다음 html을 시도하여 모든 요청을 index.angular app이 라우팅할 수 있는 html을 시도합니다(또한 URL에 #가 사용되지 않도록 html5 모드를 사용해야 합니다).
• =404는 기본적으로 다음과 같이 최종적으로 활용할 수 있습니다.저는 이것을 파일, 폴더, index.html로 시도해 보았습니다.index.html이 실패하거나 어떤 이유로든 존재하지 않으면 404 오류를 제공합니다.

왜 =404일까요?

모든 것이 잘 되면 마지막 것은 절대 사용되지 않으며 라우팅은 파일, 폴더, 각진 앱만 시도합니다.그것으로 끝입니다.하지만 저는 모든 베이스를 커버할 수 있도록 =404를 끝에 두는 것이 좋은 연습이라고 생각합니다.

index.html catchall에 대한 중요한 참고 사항

try_files에서 =404를 사용하든 안하든 index.html에 모든 것을 지시함으로써 기본적으로 index.html가 존재하지 않는 한 웹 서버에서 404개의 오류를 처리할 수 있는 기능을 잃게 됩니다.=404인입).즉, Angular JS 내에서 'Not Found' URL과 누락된 페이지를 처리해야 하며, 사용하는 오류 페이지가 404가 아닌 HTTP 200 응답을 반환한다는 점을 고려해야 합니다(index.html로 이동하는 순간 사용자에게 페이지를 제공하므로 200).

위 내용에 대한 추가 확인을 위해 Google try_files angular js를 사용하면 대부분의 예에서 =404를 사용할 수 있습니다.

참조:

• http://nginx.org/en/docs/beginners_guide.html#control
• http://ajbogh.blogspot.ca/2015/05/setting-up-angularjs-html5-mode-in.html (단 하나의 예시)

.try_files다음과 같은 지시:

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

자세한 내용은 이 문서를 참조하십시오.

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

이거 나한테 통했어요.

언급URL : https://stackoverflow.com/questions/35038155/how-to-redirect-all-angular-request-to-index-html-in-nginx