리액트 라우터가 aws s3 버킷에서 작동하지 않음
했습니다.build/AWS S3를 이용하다
if if if if 。www.mywebsite.com 해서 제가 을 하면 a[프로젝트] ★★★★★★★★★이지로 이동하기 위한 태그가 오른쪽 페이지로 이동합니다.단, URL을 www.mywebsite.com/projects 404가 404입니다.
여기 .App.js 삭제:
const App = () => (
<Router>
<div>
<NavBar/>
<Switch>
<Route exact path="/" component={Home}/>
<Route exact path="/projects" component={Projects}/>
<Route exact path="/about" component={About}/>
<Route component={NoMatch}/>
</Switch>
</div>
</Router>
);
이미 해결하셨는지 모르겠네요.저도 같은 문제가 있었어요.
왜냐하면 AWS S3는 당신이 가지고 있지 않은 폴더(프로젝트)를 찾고 있기 때문입니다.
문서를 「」로 포인트 .index.html.
이건 나한테 효과가 있었어.리액트 라우터에서 에러 페이지를 처리할 수 있습니다.
업데이트 2020년 5월 1일:
이 게시물은 매우 활성화되어 있기 때문에 답변을 업데이트해야 합니다.
이 문제를 해결하기 위한 몇 가지 옵션이 있습니다.
- index.html은 Alan Friedman이 제안한 오류 문서 상자에 넣을 수 있습니다.
- 버킷(리다이렉트에 사용하는 코드가 아닌 실제 코드가 있는 버킷)으로 이동합니다.-> 속성 -> 정적 웹 사이트 호스팅:
- 은 '해키 '해키'가 아니라 '해키'가 '해키'이기 .
react-router동작: 프런트 엔드로부터의 요구를 처리하고, 유저를 다른 루트로 라우팅 합니다만, 전체적으로 React 앱은 1 페이지 분량의 애플리케이션입니다. - 서버 측 React를 원할 경우 Next.js 사용을 고려하십시오.
지정된 오류 파일 error.html을 React 앱의 공용 폴더와 정적 웹 사이트 호스팅: 오류 문서 상자에 넣을 수 있습니다.이것도 효과가 있어요.시험해 봤어요.
[ AWS CloudFront ]> [ CloudFront Distributions ]> [ The distribution of your bucket ]> [ Error Pages ]를 사용하여 원하는 에러 코드를 추가합니다.사용하지 않으면
react-router(아래 예시와 같이) 버킷은 Error 403으로 응답하므로 error.html로 응답할 수 있습니다.
- ★★★의
TypeScript, 재재 ,react-router는 지원되지 않으므로 옵션2와 3을 검토해 주십시오.그들은 향후 버전에서 라이브러리를 업데이트할 것이다.6.*이 줄에 의하면
이 S3 버킷이 CloudFront 배포에서 제공되는 경우:
CloudFront 배포에서 404개의 오류를 index.html로 라우팅하고 200개의 응답 코드를 반환하는 사용자 지정 오류 페이지(AWS Docs)를 만듭니다.이렇게 하면 응용 프로그램이 루팅을 처리합니다.
커스텀 에러 페이지
4xx를 index.html로 리다이렉트 하는 것은 효과가 있지만, 그 솔루션에서는 Google이 이러한 페이지를 크롤링 할 수 없는 것과 같은 다른 많은 문제에 빠질 수 있습니다.S3 버킷의 리다이렉션 규칙을 사용하여 이 문제를 해결했습니다.
아래 구성이 해결되었습니다.
관련 클라우드 프런트 배포의 오류 페이지를 업데이트하여 응답 페이지 경로의 http 상태 코드 404-not-found에서 코드 200-OK에 대한 사용자 지정 오류 응답을 / 및 거의 0으로 표시
이 스레드에는 리다이렉션규칙을 사용하여 S3 버킷을 설정하는 방법이 몇 가지 있습니다.이 방법은 일반적으로 Origin으로 구성된 S3를 통해 CloudFront를 통해 React 라우터를 사용하여 React 단일 페이지 애플리케이션을 호스팅하는 사용 사례에도 효과가 있었지만, 최근에 출시된 새로운 기능인 CloudFront Functions를 통해 다른 접근 방식을 시도하기로 결정했습니다.주된 아이디어는 URL이 CloudFront 캐시에 도달하기 전에 URL을 다시 쓰는 것입니다.이것에 의해, 클라이언트측의 React Router에 의해서 작성된 URL이 애플리케이션 도메인 루트를 가리키도록 고쳐집니다.
CloudFront 함수에 대한 자세한 내용은 https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/cloudfront-functions.html를 참조하십시오.
주된 아이디어는 CloudFront 함수를 사용하여 정적 파일(.js, .CSS, .html 등)을 대상으로 하지 않는 요청의 URI를 다시 쓰는 것입니다./index.filename 파일을 가리키도록 합니다.이 함수는 뷰어 요청 트리거의 일부로 실행되며 CloudFront가 요청된 개체가 CloudFront 캐시에 있는지 확인하기 전에 실행됩니다.이것에 의해, 리액트라우터에 의해서 생성된 클라이언트가 송신한 URI 는, 컨텐츠가 오리진서버로부터 요구되기 전에 고쳐 쓰이기 때문에, S3 에서는 리다이렉트를 실시할 필요가 없습니다.동시에 요청되었지만 원본에 더 이상 존재하지 않는 파일은 예상대로 404를 반환하고 다른 모든 정적 컨텐츠는 요청대로 처리됩니다.
CloudFront 기능은 다음과 같습니다.
function handler(event) {
var request = event.request;
if (!request.uri.includes('.')) {
request.uri = "/index.html";
request.querystring = {}
}
return request;
}
URL 재작성 규칙을 원하는 만큼 복잡하게 만들 수 있지만 놀랍게도 이 작은 코드 조각은 제 사용 사례에 적합합니다.또한, Lambda@Edge 함수와 달리 CloudFront Functions는 훨씬 가볍고 AWS 콘솔을 통해 함수 코드를 변경하고 테스트한 후 몇 초 안에 도입함으로써 거의 실시간으로 실험할 수 있습니다.단, 언어 제한이 있으므로 모든 JavaScript 언어 기능이 지원되는 것은 아닙니다.이 페이지에는, 사용 가능한 다음의 정보가 기재되어 있습니다.
사례 사용 S3의 Cloudfront:
https://hackernoon.com/hosting-static-react-websites-on-aws-s3-cloudfront-with-ssl-924e5c134455
3b) AWS CloudFront — 오류 페이지 CloudFront 배포 생성 후 상태가 진행 중일 때 오류 페이지 탭으로 진행합니다.Customize Error Response를 사용하여 응답 코드 404 및 403을 처리합니다.
Google은 1주일 또는 604800초의 캐싱을 권장합니다.여기서 하고 있는 것은 누락된 HTML 페이지를 처리하도록 CloudFront를 설정하는 것입니다.이것은 일반적으로 사용자가 비활성 경로를 입력하거나 특히 루트 경로 이외의 경로를 새로 고칠 때 발생합니다.
이 경우:
CloudFront는 S3 버킷에 존재하지 않는 파일을 찾습니다.버킷에는 html 파일이 1개밖에 없습니다.이것은 이 프로젝트 예시와 같은 싱글 페이지 애플리케이션의 경우 index.html입니다.A404 응답이 반환되고 커스텀 오류 응답 셋업으로 인해 파일이 하이잭됩니다.대신 200 응답 코드와 index.html 페이지를 반환하겠습니다.index.html 파일과 함께 로드되는 리액트라우터는 url을 참조하여 루트 경로 대신 올바른 페이지를 렌더링합니다.이 페이지는 조회된 경로에 대한 모든 요청에 대해 TTL 기간 동안 캐시됩니다.왜 403도 처리해야 하죠?이 응답 코드는 404가 아닌 Amazon S3가 존재하지 않는 자산에 대해 반환하기 때문입니다.예를 들어, https://yourdomain.com/somewhere의 URL은 존재하지 않는 (확장자가 없는) 어딘가에 있는 파일을 찾습니다.
PS. 이전에는 404를 반환하고 있었지만, 현재는 403을 반환하고 있는 것 같습니다.어느 쪽이든 양쪽 응답 코드를 처리하는 것이 가장 좋습니다).
이 질문에는 이미 몇 가지 훌륭한 답이 있습니다.지금은 오래된 질문이지만, 오늘 이 문제에 직면했기 때문에 이 답변이 도움이 될 것이라고 생각합니다.
S3에는 2종류의 엔드 포인트가 있습니다.이 에러가 발생했을 경우 CloudFront Distribution의 [Origin Domain Name]필드에서 S3 버킷을 엔드포인트로 직접 선택했을 가능성이 있습니다.
으로 나올 수 있어요.bucket-name.s3.amazonaws.com완전히 유효한 엔드 포인트입니다.실제로 AWS는 이를 기본 동작으로 예상하고 있는 것처럼 보입니다. 이 항목은 CloudFront 디스트리뷰션을 생성할 때 표시되는 드롭다운 목록에 있습니다.
그러나 이렇게 한 후 오류 페이지를 설정하면 문제가 해결될 수도 있고 해결되지 않을 수도 있습니다.
그러나 S3에는 전용 웹 사이트 엔드포인트가 있습니다.이것은 S3 버킷> 속성> 스태틱웹 사이트 호스팅에서 액세스 할 수 있습니다(위쪽에 링크가 있습니다).
CloudFront에 표시되는 원래 자동 입력 링크 대신 이 링크를 사용해야 합니다.배포 생성 중 또는 생성 후 오리진 및 오리진 그룹 탭에서 편집한 다음 캐시를 비활성화할 수 있습니다.
과 같습니다.bucket-name.s3-website.region-name.amazonaws.com.
이것이 전파되어 변경되면 문제가 해결됩니다.
.tl에서 dr: CloudFront는 S3를 사용합니다.대신 S3 웹 사이트 엔드포인트를 사용하십시오. 도메인은 있어야 합니다.my-application.s3-website.us-east-1.amazonaws.com 르르my-application.s3.amazonaws.com
웹 사이트 엔드포인트에 대한 자세한 내용은 AWS 설명서를 참조하십시오.
여기에는 많은 답변이 있기 때문에, 지금까지의 답변에 대해 조사를 실시해, 다양한 어프로치의 장단점을 비교하려고 합니다.
| 접근 | 묘사 | 장점 | 단점 | 답들 |
|---|---|---|---|---|
| CloudFront 기능 | 의 루트 : AWS CloudFront SPA).index.html |
에러도 리다이렉트도 없고, SEO에 좋은 것 같습니다.AWS는 문서 중 하나에서 이 방법을 제안합니다. | 추가 비용(단, 이 프리 계층에서는 매월 200만 번의 호출을 무료로 실행할 수 있으며, 그 이후에는 100만 번의 호출당 10c만 가능합니다).도입/관리를 위한 추가 인프라스트럭처 | KG |
| 웹 사이트로서의 호스트 | REST API가 아닌 웹 사이트를 호스트하도록 S3 버킷을 설정합니다. | 이렇게 설정되면 S3에 의해 자동으로 처리되는 라우팅. | Orign 액세스 ID를 사용할 수 없습니다.오히려 S3 엔드포인트는 HTTP를 통해 공개되므로 커스텀헤더를 사용하여 접근을 제한해야 합니다.이것은 더 복잡합니다. | FV |
| 에러 리다이렉트(404 및 403) | 대부분의 답변들은 이것에 대한 풍미를 제공하는 것 같다.후 404 3 403 、 403 40 、 그 、 403 40 、 그 、 403 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40index.html(또는 SPA 루트 문서의 내용에 관계없이) 에러 페이지로 표시됩니다. |
구현이 용이합니다. | 클라이언트가 루트 이외의 URL 에 액세스 하려고 할 때마다, 클라이언트의 리다이렉트를 발생시킵니다.이것은 SEO 에 악영향을 줄 가능성이 있는 것이 분명합니다. | AR, V, MG, PB, K, KS |
| URL 해시 / 해시방 | 일부 솔루션에서는 URL 내의 해시를 사용하여 서브페이지를 라우팅합니다. | 리다이렉트나 추가 AWS 리소스 비용도 들지 않습니다. | 이러한 접근법에는 문제가 있는 것 같습니다.여기를 참조해 주십시오.URL의 해시는 보기 흉하다고 생각되는 사람도 있습니다.이를 완화하는 방법은 있는 것 같지만, 그 복잡성은 한층 더 높아집니다. | AA, B |
주의: 이 답변은 다른 답변에서 읽은 내용을 바탕으로 하고 있습니다.CloudFront Function(CloudFront 기능) 접근법 이외에는 완전히 테스트하지 않았습니다.이 접근법이 효과가 있는 것을 확인할 수 있습니다.
S3 버킷에서의 리액트 및 404개의 서브페이지 문제 수정과 같은SPA 웹사이트를 호스트하기 위해 100% 기능 및 테스트 완료
- amazon 콘솔에 로그인
- 클라우드 전면 검색
- 배포 선택
- 오류 페이지 탭을 선택하고 사용자 지정 오류 응답 생성을 클릭합니다.
- 여기에 응답 규칙 만들기
- 오류 규칙 저장
완료했습니다!
다른 방법을 추가하겠습니다. CloudFront Function 옵션은 SEO에 좋지 않은 소프트-404를 반환한다는 점을 제외하고 매우 우수하기 때문입니다.
이 메서드는 CloudFront 함수와 CloudFront Distribution Custom Error 페이지를 모두 사용하여 상태 코드가 200인 유효한 URI와 상태 코드가 404인 비활성 URI를 반환합니다.
기능:
이 기능은 React Router v6 Quick Start 가이드에서 지정된 라우팅 설정용으로 설계되었습니다./invoices ★★★★★★★★★★★★★★★★★」/expenses 루트 에 네스트 ./의 catch-all , 의 ""*. 는 URI에 됩니다.validPaths/index.html그대로 다른 요구를 허용합니다.하도록 이 .또, 이 가 SPA를 할 수도 있습니다.request.uri validPaths.
function handler(event) {
var request = event.request;
var validPaths = ['/','/invoices','/expenses'];
if( validPaths.includes(request.uri) ){
request.uri = "/index.html"
}
return request;
}
유효한 정적 자산 요청은 정적 자산을 반환하지만 페이지 또는 자산에 대한 잘못된 요청은 상태 코드가 403인 XML에서 오류를 반환합니다.
오류 핸들러:
403s를 404s + /index.html로 바꾸는 커스텀 에러 응답과 조합하면 소프트 404s를 반환하지 않고 리액트 라우터를 정상적으로 동작시킬 수 있는 앱이 있습니다.로컬 검색 엔진 크롤러가 기뻐할 것입니다.
CloudFront Distribution Custom Error Response Form 이미지 링크: 포인트가 부족하여 인라인에 표시할 수 없습니다.
기타 의견:
이 접근방식의 단점은 함수의 유효한 URI 목록을 수동으로 유지해야 한다는 것입니다.이 글에서 설명하는 것과 유사한 다른 접근법이 있습니다.
이 접근방식에서는 S3 스태틱웹 사이트 엔드포인트가 아닌 OAI에 의해 접근이 제한되는 REST API를 엔드 포인트로 사용해야 합니다.이렇게 하면 웹 사이트에 대한 모든 트래픽이 CloudFront 배포를 통해 전송되어 개인 컨텐츠(해당하는 경우)를 보호할 수 있을 뿐만 아니라 CloudFront 로그를 사용할 경우 로그가 완성됩니다.
이 실이 저에게 큰 도움이 되었습니다.것은 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★aws-cdk★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★aws-cdk에 추가하겠습니다. 만약 당신이 이 비디오가aws-cdk기반 솔루션
에는, 「이렇게 하다」가 추가되어 있습니다.index.html및됩니다.경우 오류 했습니다./index.html★★★★★★에404 ★★★★★★★★★★★★★★★★★」403 200
// imports...
// import * as cdk from '@aws-cdk/core';
// import * as s3 from '@aws-cdk/aws-s3';
// import * as cloudfront from '@aws-cdk/aws-cloudfront';
// following code snippet has to be added in a
// class which extends to a Construct or a Stack
const bucket = new s3.Bucket(this, '<Specify a name>', {
bucketName: '<add your bucket name>',
websiteIndexDocument: 'index.html',
websiteErrorDocument: 'index.html',
blockPublicAccess: s3.BlockPublicAccess.BLOCK_ALL,
removalPolicy: cdk.RemovalPolicy.DESTROY, // edit it according to your use case, I'll change it though
autoDeleteObjects: true,
});
const cloudFrontOAI = new cloudfront.OriginAccessIdentity(this, 'OAI');
const distribution = new cloudfront.CloudFrontWebDistribution(this, props?.stackName + 'AbcWebsiteDistribution', {
defaultRootObject: "index.html",
errorConfigurations: [{
errorCode: 404,
responsePagePath: "/index.html",
responseCode: 200
}, {
errorCode: 403,
responsePagePath: "/index.html",
responseCode: 200
}],
originConfigs: [
{
s3OriginSource: {
s3BucketSource: bucket,
originAccessIdentity: cloudFrontOAI,
originPath: "/artifacts" // change this based on your use case
},
behaviors: [{ isDefaultBehavior: true }]
}
]
})
bucket.grantRead(cloudFrontOAI.grantPrincipal);
이 문제에 대해 정말 도움이 된 답변은 다음과 같습니다.
https://stackoverflow.com/a/56655629/6211961
https://stackoverflow.com/a/58978355/6211961
https://stackoverflow.com/a/64201582/6211961
왜 그런 이유
당신의 문제는 리액트 앱/자바스크립트에 대한 라우팅에 대한 책임을 떠넘기려는 것입니다.리액션은 링크클릭을 듣고 브라우저 URL 바에서 루트를 갱신할 수 있기 때문에 링크는 기능합니다.그러나 스크립트(index.html 및 bundle.js 또는 앱 코드가 있는 곳)가 로드되지 않은 위치로 이동하면 JavaScript가 로드되지 않고 요청을 처리할 기회가 없습니다.대신 서버가 실행 중인 모든 작업이 요청을 처리하고 이 위치에 리소스가 있는지 확인한 후 404 오류 또는 발견된 다른 오류를 반환합니다.
해결 방법
코멘트에 기재되어 있듯이, 404 에러의 리다이렉트가 필요한 것은, 이 때문입니다.이것은 Amazon만의 것이 아니라 리액트 앱을 설정하기 위한 일반적인 요건입니다.
이 문제를 해결하려면 서버에서 라우팅을 처리하는 것과 라우팅을 구성하는 방법을 알아내야 합니다.예를 들어 Apache 서버가 있는 경우 .htaccess 파일에서 다음과 같은 문제를 처리할 수 있습니다.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
이 파일을 사용하면 서버가 찾을 수 없는 오류를 index.html로 리디렉션할 수 있습니다.서버상의 다른 라우팅 규칙에 영향을 줄 수 있기 때문에 리액트 앱에 플레이스가 있고 다른 것에 간섭하지 않는 것이 가장 간단합니다.
승인된 답변에 설명된 대로 구성을 사용했는데도 이 문제가 발생했습니다. 그러나 AWS Cloudflare Manager를 사용 중인 경우에도 403개의 오류가 발생할 경우 배포 설정의 "Error Pages" 탭에 다음과 같은 구성으로 오류 페이지를 생성할 수 있습니다.
Error Code: 404,
Customize Error Response: Yes,
Response Page Path: /index.html,
HTTP Response Code: 200
브라우저 라우터에 루트 처리를 전달하기 위한 오류 페이지 구성
적절한 서버 관리자에 대해서는 잘 모르지만, 이것이 중대한 문제인지, 우연인지 아닌지에 대해서는 누군가가 가르쳐 주셨으면 합니다.
hosting static 및 default with index.default with index.description 여기에 이미지 설명을 입력합니다.
오류 페이지가 있는 CloudFront 추가
404 error-> index.html->status 200
이전 답변과 같이 문제를 해결하는 가장 좋은 방법은 폴백 전략을 재정의하는 것입니다.클라이언트 측 라우팅과 서버 측 라우팅, 특히 React JS의 다양한 라우팅 접근법에 대해 자세히 알아보려면 이 문서를 참조하십시오.
가 를를사 it it it it it를 사용해서 고쳤어요.HashRouterRouter
import { Switch, Route, HashRouter } from 'react-router-dom';
const App = () => (
<HashRouter>
<div>
<NavBar/>
<Switch>
<Route exact path="/" component={Home}/>
<Route exact path="/projects" component={Projects}/>
<Route exact path="/about" component={About}/>
<Route component={NoMatch}/>
</Switch>
</div>
</HashRouter>
);
이 앱은 다음과 같은 방법으로 사용할 수 있습니다.https://your-domain.s3.amazonaws.com/index.html?someParam=foo&otherPram=bar/#/projects
상에서 " " "와 같은"https://localhost:3000/?someParam=foo&otherPram=bar/#/projects
S3의 변경은 필요 없었다.
NextJs를 사용하고 있는데 같은 문제가 있었습니다.나의 해결책은 라우팅 정보를 확인하고 그것이 맞지 않으면 푸시하는 것이었다.
const router = useRouter();
useEffect(() => {
if (!router.pathname.startsWith(router.asPath)) {
router.push(router.asPath);
}
});
S3 측에서는 에러 페이지를 index.html로 라우팅하는 것 이외에는 변경할 필요가 없었습니다.
버전에서는 " " " 입니다.Route의 자녀로 되어 있다의 있다.Routes그러니까따로마무리를해야 요.RouteRoutes.
<Routes>
<Route path="/home" element={<Home/>}
</Routes>
언급URL : https://stackoverflow.com/questions/51218979/react-router-doesnt-work-in-aws-s3-bucket
'programing' 카테고리의 다른 글
| SQL Server에서 여러 열을 동시에 변경하는 방법 (0) | 2023.04.07 |
|---|---|
| C# var 키워드에 상당하는 VB.NET (0) | 2023.04.07 |
| Spring Boot 2로 업그레이드한 후 Object Mapper가 기본 컨스트럭터 없이 역직렬화할 수 없음 (0) | 2023.04.02 |
| 리액트 테스트 라이브러리를 사용하여 장치 테스트에서 작동하도록 RizeObserver를 시뮬레이션하는 방법 (0) | 2023.04.02 |
| .htaccess & WordPress: RewriteRule에서 폴더 제외 (0) | 2023.04.02 |