목적

최근 업무로 어드바이스를 할 기회가 늘어나고 있는 한편, 실제로 스스로 손을 움직여 출력하는 기회가 줄어 버리고 있는 것에 위기감을 기억했습니다. 우선 자신의 웹사이트를 다시 만드세요.

이전 WordPress에서 사이트를 만든 적이 있습니다만, 블로그 형식은 갱신이 멈추어 버리므로, 정적 사이트를 만들어 거기에 각종 링크를 붙이는 형식으로 했습니다.

예전에 한 번 해본 적이 있기 때문에 간단하다고 생각했습니다만, 도메인 설정이나 SSL 증명서의 작성 등, 일상 업무로 그다지 하지 않는 것에 수고 걸었으므로, 그 점을 공유할 수 있으면 좋겠습니다.

예상한 흐름

1. HTML과 CSS로 추천 페이지 만들기
2.S3에 업로드
3. CloudFront에서 URL 게시
4. 무무 도메인에서 자신의 도메인을 얻기
5. Route53에서 도메인 설정

실제 절차

1. HTML과 CSS로 추천 페이지 작성 및 도메인 취득
2.S3에 업로드
3.S3에 업로드했는데, 로그 파일의 출력처 등 검토해야 하는 것을 깨닫고 번거로움
4.Cloudfront에서 공개하려고 하지만 SSL 인증서 가져오기, Route53 인증, 이름닷컴 설정 등으로 번거로움
5. Route53의 무무 도메인 설정

결론

공개한 웹페이지는 이쪽이 됩니다.
htps //w w. 혼조 핫토리 아 rch. 코m/

구성도

1. HTML과 CSS로 추천 페이지 만들기

우선은 정적 사이트가 되는 html을 작성했습니다.
오랜만에 html과 CSS를 썼기 때문에, LIG님의 블로그를 참고로 자기 소개의 내용 검토 10분, 사이트 디자인 20분 정도로 빨리 작성했습니다.
htps : // ㎃진 c. 이. jp/230345

2.S3에 업로드

아래의 설정을 하고 업로드했습니다.
아래의 자료를 참고로 했습니다. 감사합니다 클래스 방법입니다.
htps : // v.ぁsss d. jp / c ぉ d / 아 ws / c ぉ df long ts 3-u b /

3.S3에 업로드했는데, 로그 파일의 출력처 등 검토해야 하는 것을 깨닫고 번거롭다

크라메소님의 기사에서는, 콘텐츠 관리자와 서비스의 관리자가 다르다고 하는 상정으로 만들어져 있기 때문에, 대각선 읽을 때에 혼란해 버렸습니다. 독해력이 낮다.

최종적으로는 IAM 이외는 기사대로의 설정을 실시했습니다.
IAM은 권한을 그룹으로 가졌습니다. (Billing과 Support는 작업용으로 붙였습니다)

4.Cloudfront에서 게시하려고하지만 SSL 인증서 가져 오기,

CloudFront 설정이 오랜만에 너무 어려웠습니다.
결국 ACM에서 인증서를 발급하고 Route53에서 DNS 설정을 수행했습니다.
올바른지 여부 Deploy 될 때까지 30 분 정도 대기 시간이 발생합니다. 조금 곤란했습니다.



오류 페이지도 Cloudfront에서 설정합니다.

5. Route53에서 도메인 설정

Route53에서 호스팅 영역을 만든 후 A 레코드를 추가했습니다.



무무도메인측의 설정은 Route53의 NS측의 설정을 옮깁니다.

참고 자료

SORACOM 엔지니어 블로그 최초의 「기술 블로그」쓰는 방법의 소개 Developers.IO CloudFront를 사용하여 S3 정적 웹 사이트를 제공하는 단계
LIG CSS를 사용하여 요소의 중앙 정렬 및 문자색과 배경색을 변경해 봅시다.