記事を書くにあたって
タイトルのような公開方法はブラウザ上に多くの手法が挙げられています。
しかし、一つの記事を参考にしても上手くいきませんでした。
そのため、備忘録的に昨日（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にデプロイ