먼저

지금까지 개인용 테스트 서버를 해외 VPSVULTR에 LAMP 환경을 세워 Let's Encrypt로 인증서를 넣었지만, Vue.js나 Firebase라든지 PWA 등을 시도할 기회가 대부분으로 잘 생각해 보니 MySQL도 PHP도 전혀 사용하지 않았다＼(^o^)/. 그래서 AWS를 사용하여 서버리스로 이행해 보기로 했다.

구성

무무 도메인에서 얻은 도메인을 Route53으로 설정합니다. 파일은 S3에 있습니다. 다만 S3만으로는 https에는 할 수 없는 것 같기 때문에, CloudFront 를 조합한다. 증명서 발행은 AWS Certificate Manager에서 발행. (물론 $ 600/월도 지불 할 수 없기 때문에 SNI SSL입니다 w)

S3에 자신의 도메인을 적용

거의 이 기사대로 잘 갔다.
무무 도메인의 경우이지만, 이름 .com라든지 함께 할까 생각한다.

무무 도메인에서 얻은 자체 도메인을 Amazon S3에 적용하는 단계

포인트로서는

Route53을 설정하기 위해 버킷 이름을 적용하려는 도메인 이름으로 설정합니다.

www 유무를 통일시키기 위해서 버킷은 www 유지 없음, 2개 준비해 한쪽에 리다이렉트를 설정한다.

Route53은 버킷 이름과 도메인 이름이 함께 있으면 자동으로 Alias ​​Target에 나와 쉽게

여기까지 http에서의 독자 도메인에서 S3의 운용이 가능했다.

AWS Certificate Manager에서 인증서 받기

절차에 따라 얻는다.
메일인증이나 DNS인증이 있으나, 메일인증이라면 whois에 기재된 메어드에 메일이 날아주지 않고 막혔으므로, DNS인증을 사용했다. Route53에서 도메인을 설정하고 있으면 "Route53에서 레코드 만들기"라는 버튼이 있기 때문에 그것을 누르는 것이 매우 빠르다.

주의점으로서는 증명서의 도메인은 와일드 카드를 사용할 수 있으면(자) 하지만, *.hogehoge.com 라고 하면 hogehoge.com 자체는 증명서 에러가 된다고 하는 함정이 있었기 때문에, 와일드 카드가 아닌 도메인도 추가로 넣어야 한다 .

AWS Certificate Manager(ACM)에서 와일드카드 인증서를 발급할 때의 참고 사항

CloudFront 설정

이쪽의 기사가 참고가 되었다.

CloudFront에서 S3 정적 웹사이트 호스팅을 SSL/TLS 지원

포인트로서는

설정을 변경 한 후 in progress가 귀엽다.

정적 호스팅으로 사용할 때 캐시를 제어하기가 어렵습니다. .

결과

추가

CloudFront에서 캐시되지 않도록 방지

모든 Allowed HTTP Methods (GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE)

Object Caching에서 Minimum TTL, Maximum TTL, Default TTL을 모두 0 (초)으로

Query String Forwarding and Caching을 Forward all, cache based on all로

오류 페이지에서 주요 HTTP 오류 코드의 TTL을 1 (초)로

http => https 리디렉션

Cloudfront 설정에서 Viewer Protocol Policy를 Redirect HTTP to HTTPS로 하면 http로 액세스가 있으면 https로 리디렉션해 준다.

WWW 있음/없음 리디렉션

WWW 없이 통일하고 싶었지만, Cloudfront를 걸고 있는 경우, 위의 S3의 버킷을 WWW 있어·없음 2개 준비하는 것만으로는 리디렉션하지 않았다.
Cloudfront측에서도 www 있는 Distributions를 추가할 필요가 있다.

다만, 리디렉션용의 Distributions는 Origin Domain Name을 설정할 때에, 자동으로 나오는 풀다운으로부터 선택하는 것이 아니고, S3의 엔드포인트( w w. 호게 호게. 작은 m. s3-웨 b해-아 p-r 손바닥 st-1. 아마조나 ws. 작은 m )를 넣지 않으면 안 된다. 여기 빠졌다. .

물론 Route53의 A 레코드(Alias를 선택)에 www 있는 Cloudfront Distributions를 추가해 둔다. 이제 드디어 www로 액세스하면 www 없이 리디렉션되게 되었다.

다음 번

API Gateway, DynamoDB, Lambda와 함께 Vue.js 백엔드 만들기

Simple Email Service와 Lambda에서 메일 양식 만들기