記事を書くにあたって

タイトルのような公開方法はブラウザ上に多くの手法が挙げられています。
しかし、一つの記事を参考にしても上手くいきませんでした。

そのため、備忘録的に昨日（2021/02/01）自らが上手くいった手法を紹介したいと思います。

この記事では、主に操作を紹介しますので、細かい説明については他の記事をご覧ください。

0. 環境

AWSのアカウントを持っている。

1. S3にバケットを作る

AWSのS3のページに行く
「バケットの作成」をクリック
2.1 一般的な設定

| 設定項目 | 設定内容 |
|:-:|:-:|
| バケット名 | デプロイ予定のドメイン |
| リージョン | 東京リージョン |

2.2 ブロックパブリックアクセスのバケット設定
　パブリックアクセスを全てブロックのチェックを外す
　ここで注意を促す内容が表示されるが、承認を押す

2.3 バケットを作成

2. バケットの静的ウェブサイトホスティングを有効にする

作成したバケットを選択し、「プロパティ」をクリック
プロパティの中の「静的ウェブサイトホスティング」の編集をクリック
2.1 静的ウェブサイトホスティングを有効にする
2.2 設定項目が現れるので、設定を行う

| 設定項目 | 設定内容 |
|:-:|:-:|
| ホスティングタイプ | 静的ウェブサイトをホストする |
| インデックスドキュメント | index.html |
| エラードキュメント | error.html |
| リダイレクトルール | 空白 |
インデックスドキュメントはURLに入った時に最初に見せるファイル→index.htmlでなくとも良い
エラードキュメントはエラーが発生した時に見せるファイル→error.htmlでなくとも良い

2.3　「変更の保存」をクリック

3. バケットポリシーを設定

プロパティの隣のアクセス許可をクリック
バケットポリシーの「編集する」をクリック

2.1 バケットポリシーを記述する(以下をコピペ)

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::intro.itto-system.com/*"
        }
    ]
}

　　これはAWS側から提供されている誰でもアクセス可能な設定

4. index.htmlをS3バケット内に配置

プロパティの隣の「オブジェクト」をクリック
「アップロード」をクリック
ファイルとフォルダから「ファイルの追加」をクリック
なんでもいいのでindex.htmlというタイトルのhtmlファイルを選択して「開く」をクリック

5. オブジェクトにアクセスできるか確認

プロパティをクリック
静的ウェブサイトホスティングの項目内のURLをクリック
アップロードしたindex.htmlを開ける

6. Cloud9でアップロードしたファイルの編集

AWSのサービス一覧からCloud9へ移動
「Create environment」をクリック
Name欄に任意の名前を設定
その他の設定は全てデフォルトのまま起動
適当なディレクトリを作成し、先ほどアップロードしたindex.htmlをそのディレクトリ内にコピーする（ローカルから）
index.htmlを編集する
index.htmlを以下のコマンドにてアップロードする

作成したディレクトリに移動し、実行

aws s3 cp index.html s3://xxxxxxxxxx

xxxxxxxxxxはS3バケット名
　
8. 一括でアップロードする方法

作成したディレクトリに移動し、実行

aws s3 cp . s3://xxxxxxxxx --recursive

7. 独自ドメインを取得

AWSのサービス一覧からRoute53へ移動
Domain registrationをクリック、もしくは登録済みドメインをクリック
ドメインの登録をクリック
ドメイン名を記述する
使用可能であればカートに入れ、使用する年数を設定し、次に進む
連絡先等を設定する
メールを確認して承認する
規約に同意し、ドメイン申請を完了させる

8. CertificateManagerで証明書を発行

AWSのサービス一覧からCertificateManagerへ移動
!!右上のリージョン選択から「米国東部（バージニア北部） us-east-1」を選択!!
「証明書のリクエスト」をクリック
パブリック証明書のリクエストを選択し「証明書のリクエスト」をクリック
ドメイン名の追加で公開予定のドメイン名を記述
検証方法の選択でDNSの検証を選択し、次へ
タグはつけず、確認をし、「確定とリクエスト」をクリック
「DNS設定をファイルにエクスポート」という青い文字をクリック
ダウンロードされたファイルを開いておく
AWSのサービス一覧からRoute53へ移動
ホストゾーンからレコードを作成

設定項目	設定内容
レコード名	ダウンロードしたファイルのRecord Nameの内容(ドメインが被っていたら調整)
レコードタイプ	CNAME
値	ダウンロードしたファイルのRecord Valueの内容

CertificateManagerへ移動し、作成した証明書の状況が発行済みになるまで待機（10分位かかる）

9. CloudFrontを設定

AWSのサービス一覧からCloudFrontへ移動
Create Distributionをクリック
Get Startedをクリック
設定を行う(下の表内の項目以外はいじらない)

設定項目	設定内容
Origin Domain Name	作成したS3バケットを選択
Origin ID	Origin Domain Nameを設定すると自動で入る
Viewer Protocol Policy	Redirect HTTP to HTTPSを選択
Alternate Domain Names(CNAMEs)	公開予定のドメインを入力
SSL Certificate	Custom SSL Certificate (example.com)を選択し、先ほど作成した証明書を選択
Default Root Object	index.htmlと記述

Create Distributionをクリック
作成したDistributionのStatus欄がDeployedになるまで待機（5分位）

10. Route53にAレコードを追加

AWSのサービス一覧からRoute53へ移動
ホストゾーンからレコードを作成

設定項目	設定内容
レコード名	公開予定のドメイン名
レコードタイプ	A
エイリアス	クリックしONに変更
トラフィックのルーティング先	CloudFrontディストリビューションへのエイリアス→先ほど作成したDistributionを選択

ブラウザから設定したドメインに移動できるか確認

https://XXXXXXXX

移動できれば公開完了

11. 静的ウェブサイトホスティングのURLからアクセスできないようにする

今の状態だと、設定したURL、静的ウェブサイトホスティングのURL両方からアクセス可能になっている。
CloudFrontを経由したことで、S3バケットの静的ウェブサイトホスティング機能がなくても公開できる。

AWSのサービス一覧からS3へ移動
プロパティから静的ウェブサイトホスティングの編集する
静的ウェブサイトホスティングを無効にする

　
　
以上で公開設定完了です。

お疲れ様でした!!

最後に

冒頭にもあるように一つの記事を参考にしただけでは上手くいかず、多くの記事を参考にしまとめたような記事になっております。

上手くいかなかったことをここで発表するのは良くないと思い、参考にした記事のURLは紹介しませんでした。

railsを用いたwebアプリのAWSによるデプロイの記事も書いていますので、ご覧ください。
githubにあるrailsアプリをAWSにデプロイ