S3 + CloudFront + ACM

S3は、静的コンテンツ（HTML、CSS、JS）を保存し、提供するために使用されます。
CloudFrontは、CDN配信とHTTPSの有効化に使用されます。
ACMは、HTTPS用のSSL/TLS証明書を提供します。
Route 53（または他のDNSサービス）は、カスタムドメインの管理に使用されます。

このオプションは少し手動で設定する必要がありますが、インフラの構成に対してより多くのコントロールを提供します。

はじめに

このチュートリアルでは、staticウェブサイトを作成し、それをビルドし、静的コンテンツを取得します。つきまして、S3にアップロードし、CloudFrontに連携させ、カスタムドメインでHTTPSで提供するために、 ACMの設定も行います。

前提条件

静的ウェブ作成とビルド

メモ

本ウェブサイトはMkdocs-material を使用していますが、任意で好きな HTML を使うことも可能です。 MkDocs を使えば、Markdown を書くだけで見栄えの良いドキュメントサイトを簡単に作成できます。これから紹介する手順を実施すれば、あなたもこのようなウェブサイトを作れるようになります。💪

Pythonバーチャル環境

$ cd static-website/
$ python3 -m venv .venv
$ echo "mkdocs-material" > requirements.txt
$ source .venv/bin/activate
(.venv) $ pip install -r requirements.txt

ウェブサイト作成

(.venv) $ mkdocs new .
INFO    -  Writing config file: ./mkdocs.yml
INFO    -  Writing initial docs: ./docs/index.md
(.venv) $ cat >> mkdocs.yml # (1)!
theme:
  language: ja
  name: material
(.venv) $ mkdocs serve
INFO    -  Building documentation...
INFO    -  Cleaning site directory
INFO    -  Documentation built in 0.29 seconds
INFO    -  [23:43:12] Watching paths for changes: 'docs', 'mkdocs.yml'
INFO    -  [23:43:12] Serving on http://127.0.0.1:8000/

このラインだけ実行し、以下の3ラインをコピペして Ctrl+Dにてexit

127.0.0.1:8000 これでブラウザを起動させてください。Mkdocsのmaterialテーマのディフォルトページが開きます。

なお、ここまでは mkdocs serve によって /docs ディレクトリや mkdocs.yml の変更が自動的に検知され、ウェブサイトがライブリロードされてきました。しかし、静的サイトのファイルをS3アップロードする場合は、mkdocs build コマンドを実行する必要があります。
```
(.venv) $ mkdocs build
INFO    -  Cleaning site directory
INFO    -  Building documentation to directory: /static-website/site
INFO    -  Documentation built in 0.24 seconds
```
これにより、/site ディレクトリが作成され、そこに静的な HTML ファイルなどのコンテンツが出力されます。
```
$ ls site
404.html  assets  index.html  search  sitemap.xml  sitemap.xml.g
```
Tip
- mkdocs serve: ローカルでサイトを編集する場合
- mkdocs build: 実際にウェブコンテンツを提供する場合

S3バケツ作成＆アップロード

Amazon S3は本来オブジェクトストレージサービスですが、多くのユーザー（特に個人開発者やスタートアップ）は、 HTMLや画像などの静的コンテンツをホスティングする目的で使っています。以下の通り静的コンテンツのためのバケツを作りましょう。