99.9%의 가동 시간 정적 사이트 배포를 위해 Cloudflare 및 AWS S3 사용

서버를 유지하고 구성할 필요 없이 99.9%의 가동 시간과 거의 무료의 정적 사이트 배포 솔루션을 찾을 수 있도록 도와주는 간단한 안내서를 사용하십시오.이 문서에서는 Cloudflare를 CDN 서비스로, AWS S3를 파일 저장소로 사용합니다.
Cloudflare는 전 세계에 150여 개의 데이터 센터를 보유하고 있으며, 그 기본 계획(무료)은 대부분의 사이트에 충분하다.기능은 기본이지만 99.9%의 가동 시간, 무료 SSL 인증서, DDoS 보호, Brotli 압축, 자동 JS/CSS 축소, 대상 서버 IP 숨기기, 적절한 캐시 설정을 얻을 수 있습니다.
우리가 이 글을 쓰기로 결정한 것은 인터넷상의 대다수 다른 안내서들이 군더더기 설정으로 가득 차 있기 때문이다. 이런 설정들은 무의미하고 다른 사이트에서 복사/붙여넣은 것 같다.

시작 요구 사항

AWS 계정

기존 NS의 Cloudflare 계정으로 마이그레이션

Cloudflare로 마이그레이션하는 것은 매우 간단한 과정입니다. 왜냐하면 그들은 매우 좋은 UI/UX를 가지고 있기 때문입니다.그들은 당신의 DNS 기록을 스캔하고 기존의 것을 추가하라고 건의할 것입니다.

이해득실

✅ 고성능 CDN 무료 제공;
✅ 99.9%의 정상 운행 시간;
✅ 무료 SSL 인증서;
✅ 구성과 사용이 간단합니다.
❌ 현재 사이트 이름이 bucket 이름으로 사용되고 있음을 발견하면 S3를 Cloudflare와 함께 사용할 수 없습니다.
❌ 무료 계획 중 https 사이트는 1급 하위 도메인 호환성만 있습니다.

1. S3 Bucket 만들기

AWS 콘솔을 통해 S3로 이동하고 "bucket 만들기"를 눌러야 합니다.

다음 화면에서 버킷 이름을 선택하고 영역을 정의합니다.bucket 이름은 웹 사이트 이름과 같아야 합니다.이것은 AWS의 요구입니다. 이 요구 사항이 없으면 Cloudflare를 통해 사이트에 접근할 수 없습니다.이 사이트는 어쨌든 Cloudflare에서 캐시되기 때문에 구역은 중요하지 않다.


이 화면 다음에'다음'을 누르면 버킷이 생성될 때까지 누르십시오.이 설정에서는 내용을 변경할 필요가 없습니다.주의: 이 단계에서 "Bucket name already exists"메시지를 받으면 본고의 끝부분의 "난해한 답"부분을 참고하여 상세한 정보를 보십시오.

2. IAM 사용자를 생성합니다.

우선 다음 링크를 통해 AWS 명령줄 도구를 설치해야 합니다.준비가 되면 AWS의 IAM 탭으로 이동하고 Users로 이동한 다음 user를 추가합니다.웹 사이트 내용이 발표되었음에도 불구하고 이 사용자의 추가 권한이 필요하지 않기 때문에 프로그래밍 접근을 확인하십시오.


기본적으로 사용자는 추가 권한 없이 생성됩니다.사용자 자격 증명이 있는 성공 페이지에 들어갈 때까지 다음을 클릭하십시오.

다운로드.csv 및 보안 저장.AWS CLI에는 이러한 세부 정보가 필요합니다.

3. 사용자에게 올바른 권한 설정

사용자를 만든 후 해당 사용자를 클릭한 다음 권한 탭에서 인라인 정책 추가 를 클릭합니다.

정책 생성기 페이지가 표시되고 다음 설정이 표시됩니다.

행동 — PutObject 및 DeleteObject 작성 섹션 사용하기;PutObjectacl 권한 섹션
참고 자료 - ARN bucket 이름입니다. 이 ARN:aws:s3:::medium 작은 위젯처럼 보입니다.픽셀 점.io/*
JSON 보기에서는 이렇게 해야 한다


정책을 보고 이름을 입력합니다.우리는 현재 권한 설정을 마쳤습니다. 현재awscli를 설정하여 당신의 사이트를 전송할 수 있습니다.

4. AWS CLI 배포

터미널로 이동하여aws 설정을 실행합니다.당신은 에서 온 증빙서류를 작성하도록 요구받을 것입니다.IAM 사용자가 작성하는 동안 다운로드한 csv 파일입니다.액세스 키 ID 및 기밀 액세스 키를 입력합니다.다른 필드는 선택할 수 있습니다. "차로 돌아가기"를 누르기만 하면 됩니다.

그러면 AWS CLI를 사용하여 웹 사이트를 배포할 수 있습니다.웹 사이트 폴더로 이동;색인을 포함해야 합니다.html 및 기타 파일.다음을 수행합니다.

aws s3 cp {folder name} s3://{bucket name} --recursive --acl public-read

인스턴스:
aws s3 cp dist/s3://테스트.픽셀 점.io --차례로 돌아가다 --배제DS_스토어' --acl 공용 읽기
명령에서, 우리는 폴더를 S3의 원격 버킷으로 복사합니다.--recursive 모든 중첩 폴더 복사하기;
가지다 — 복사할 필요가 없는 파일 목록(예: 임시 파일, IDE 파일 또는 운영 체제와 관련된 파일)을 제외합니다.--acl 대중이 읽는 것은 당신의 사이트를 방문할 수 있도록 하는 필수 조건이다.
우리는 폴더를 동기화하지 않고 복사를 사용합니다. 동기화가 예상대로 작동하지 않기 때문에 수정된 후에도 일부 파일은 저장소에 복사되지 않습니다.

5. 사이트 게시

웹 사이트를 최종적으로 발표하려면 S3 저장소 목록으로 이동하여 이 저장소를 클릭한 다음 속성 탭을 선택하십시오.정적 사이트 위탁 관리를 사용하고 색인을 입력하십시오.html을 인덱스 파일로 합니다.사이트의 URL을 복사하고 "저장"을 누르십시오

마지막 단계는 Cloudflare DNS 설정으로 이동하여 새 CNAME 레코드를 추가하는 것입니다.위에서 설명한 바와 같이 버킷 이름은 CNAME와 같아야 합니다.Cloudflare의 도메인 이름 필드에서 S3에 웹 사이트를 가리키는 링크를 설치해야 합니다. "http"와 "/"를 포함하지 않습니다. 아래와 같습니다:test.픽셀 점.io.s3-website-us-east-1.amazonaws.일반 도메인 이름 형식입니다.이름 필드에서 사이트 이름을 필드가 없는 위치에 두어야 합니다.예를 들어 "test.pixelpoint.io"에 대해 우리는 "test"를 하나의 이름으로만 사용할 것입니다.

그렇습니다.현재 당신의 사이트는 당신이 선택한 도메인 이름을 통해 접근할 수 있을 것입니다.

문제 해결

Cloudflare의 SSL 섹션에서 유연성 설정이 활성화되어 있는지 확인합니다. 그렇지 않으면 SSL 인증서 문제가 발생할 수 있습니다.

www에서 비www역으로 방향을 바꾸려면 이를 일급 자역(Cloudflare 제한)으로 삼아야 합니다.Cloudflare의 페이지 규칙 부분을 통해 이 점을 실현하거나 S3에서 리디렉션 규칙을 사용하여 새 버킷을 만들 수 있습니다.

Bucket 생성 중에 "Bucket name already exists"오류가 발생하면 이 솔루션은 Cloudflare를 사용할 수 없기 때문에 귀하에게 적용되지 않습니다.