Firebase CLI: "단일 페이지 앱으로 구성(모든 URL을 /index.html에 다시 쓰기)"

Firebase CLI: "단일 페이지 앱으로 구성(모든 URL을 /index.html에 다시 쓰기)"

방금 Firebase CLI를 사용하여 정적 호스팅 프로젝트를 시작했습니다."단일 페이지 앱으로 구성" 옵션을 활성화하면 정확히 어떻게 됩니까?수정된 파일이 정확히 무엇인지, Firebase 백엔드에 어떤 영향을 미치는지에 대한 설명을 찾고 있습니다.

그 옵션은 단순히 플래그를 설정합니다.firebase.json모든 URL을 리디렉션할 파일/index.html.

"rewrites": [ {
  "source": "**",
  "destination": "/index.html"
} ]

자세한 내용은 Firebase Hosting 설명서를 참조하십시오. 여기에는 다음과 같은 자세한 예도 포함되어 있습니다.

"hosting": {
  // ...

 // Add the "rewrites" attribute within "hosting"
  "rewrites": [ {
    // Serves index.html for requests to files or directories that do not exist
    "source": "**",
    "destination": "/index.html"
  }, {
    // Serves index.html for requests to both "/foo" and "/foo/**"
    // Using "/foo/**" only matches paths like "/foo/xyz", but not "/foo"
    "source": "/foo{,/**}",
    "destination": "/index.html"
  }, {
    // Excludes specified pathways from rewrites
    "source": "!/@(js|css)/**",
    "destination": "/index.html"
  } ]
}

전체 예:

{
  "hosting": {
    "public": ".",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

예로 설정하면 다음과 같은 잘못된 URL이 모두 표시됩니다.www.example.com/some-invalid-url로 리디렉션됩니다.index.html당신 사이트의 좋은 점입니다.사용자 정의로 설정할 수도 있습니다.404.html.

화력 기지제이손

{

  "hosting": {
    "public": "pubic",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "cleanUrls": true
  }
}

보너스: 설정cleanUrls로.true제거할.html배포된 웹 사이트 URL의 확장 또는 모든 URL을 제외한.html으로 리디렉션됩니다.index.html.

참고로 SSR(Server-Side Rendering)을 사용하려면 No를 입력하고 다음을 설정합니다.rewrites다음과 같이:

"rewrites": [
  {
    "function": "angularUniversalFunction",
    "source": "**"
  }
]

결국, 무엇을 선택하든 소방 기지에서 언제든지 변경할 수 있습니다.json 파일.

공식 파이어베이스 설명:

작년 1분기와 2분기에 이 옵션을 사용했지만 아무런 효과가 없는 것처럼 보였지만, 요즘에는 이 옵션을 적용하면 확실히 상황이 크게 달라집니다.여기에 이 기능에 대한 완전한 공식 설명이 나와 있습니다.

https://firebase.google.com/docs/hosting/url-redirects-rewrites#section-rewrites

같은 페이지의 다음 섹션에는 헤더 사용에 대한 유용한 정보도 있습니다.

언급URL : https://stackoverflow.com/questions/37667626/firebase-cli-configure-as-a-single-page-app-rewrite-all-urls-to-index-html