AWSで静的Webサイト作成しHTTPS通信させる場合Cloud Frontと連携させる必要がりますが、かなり汎用性があり頻繁に行うのでメモとしてキャプチャー付きで残します。
手順は下記のサイトを参考にしています。
「OAC または OAI (従来) によってアクセスが制限されているオリジンとして REST API エンドポイントを使用する」の手順です。
S3で静的WebサイトをHTTPSで公開する手順
大まかな流れです。
- S3の設定
- CloudFrontの設定(HTTPSさせたいだけならここまででOK)
- ドメインの取得
- 証明書の発行
- 独自ドメインでHTTPS通信をするための設定
1. S3の設定
まずはS3のバケットを作成し、公開するHTMLファイル等を格納します。
■バケット作成
S3のダッシュボードより「バケットの作成」から公開するバケットを作成します。
↓バケット名とAWSリージョンを選択します。
↓基本的にはデフォルトの設定でOKです。
「バケットを作成」をクリックします。
■ファイルのアップロード
↓「アップロード」を押すか、この画面にそのままファイルをドロップしてもOKです。
↓今回は公開するindex.htmlをアップロードします。
「アップロード」をクリックします。
↓アップロード完了しました。
ひとまずS3での設定は完了です。
2. CloudFrontの設定
CloudFrontを設定していきます。HTTPS通信させたいだけであればCloudFrontの設定が完了すれば目的達成となります。
■ディストリビューションの作成
↓CloudFrontのダッシュボードから
「ディストリビューションの作成」をクリックし作成していきます。
なお、最低限の設定のみ記載します。
○オリジン設定
・オリジンドメイン
→今回作成したS3のバケットを設定します。
・S3バケットアクセス
→Origin access control settings (recommended)を選択
→「コントロール設定を作成」をクリックしそのまま「作成」をクリックし設定を作成しOrigin access controlへ設定
・オリジンシールドを有効にする※必須ではありません。
→「はい」を選択しオリジンシールドリージョンにS3のあるリージョンを設定
○デフォルトのキャッシュビヘイビア
全てデフォルトでもOKですが、アクセスを取りこぼさないように「ビューワープロトコルポリシー」のラジオボタンでRedirect HTTP to HTTPSを選んでも良いと思います。
○関数の関連付け – オプション
デフォルトでOKです。
○設定
・料金クラス
下記設定で十分かと思います。
→北米、欧州、アジア、中東、アフリカを使用
・デフォルトルートオブジェクト – オプション
ドメイン名のみなどファイル指定なしでアクセスされたときに返すファイルです。
先ほどS3へ格納したindex.htmlを設定しています。
「ディストリビューションを作成」をクリックし作成します。
■S3バケットポリシーの設定
ディストリビューションが作成されましたが、S3のバケットポリシーを設定してCloudFrontからの接続を許可する必要があります。
そのバケットポリシーの設定内容ですが、下記の通り表示されているはずです。
↓「ポリシーをコピー」のうえ「S3バケットの権限に移動しポリシーを更新する」をクリックしてバケットポリシー設定画面へ移動します。
↓コピーした内容を貼り付け「変更の保存」をクリックします。
↓ここまでの設定にてCloudFront経由でS3へアクセスできるようになったはずです。
無事アクセスできました。
3. ドメインの取得
ドメインを取得していきます。
新たにドメインを取得する例として３パターン記載します。
ポリシーがなければ「Route53」と「お名前.com」で欲しいドメイン検索し、安い方を購入で良いと思います。
Freenomは期間限定ですが無料でドメイン取得できるため、CloudFrontのお試し等で仕様するのが良いです、もちろんそのまま購入もできます。
Rroute 53
AWSのマネジメントコンソールでRoute53を検索します。
↓ダッシュボードから「登録済みのドメイン」をクリック
↓「ドメインの登録」をクリック
↓欲しいドメインを検索し購入
以上のステップでRoute53にてドメイン購入ができます。
Route53でドメインを購入すると自動でホストゾーン作成されるので、現状ではこれ以上設定はありません。
迷ったらRtoute53で購入するで問題ないはずです。
お名前.com
AWS以外でもWebサイトがあり、すでにお名前.comでドメイン取得済の方や
今後AWS以外でもWebサイト作成予定のある方は、お名前.comで購入し
一元的にドメインを管理することをお勧めします。
(お名前.comでの購入方法は記載しませんが、特に迷わず購入できるはずです。)
ただし、Route53で購入ではないので
ドメイン購入後、Route53にてホストゾーンの作成、お名前.com側でDNSサーバの変更処理を行う必要があります。
↓AWSのRoute53ダッシュボードより「ホストゾーンの作成」をクリック
↓取得したドメインを入力して「ホストゾーンの作成」をクリック
↓登録したホストゾーン名をクリック
↓NSレコードのチェックボックスをチェックし４つの値を確認する
↓お名前.com内にて対象ドメインの「ネームサーバーの変更」をクリック
↓「他のネームサーバを利用」タブを選択し、先ほど確認した値を４つ入力しデータ設定を進める
Freenom
Freenom一定期間無料で使えるドメインを取得できるので、一時的な実験としてWebサイト構築する際にお勧めします。
こちらで購入した場合もホストゾーンの作成と、 Freenomサイトに権威DNSをRoute53のDNSへ変更する必要があります。
4. 証明書の発行
取得したドメインでのHTTPS通信のために証明書を発行します。
↓Certificate Managerのダッシュボードにて「署名書リクエスト」をクリックします。
↓パブリック証明書リクエストを選択したまま「次へ」をクリックします。
↓完全修飾ドメイン名に取得したドメインを入力し、「次へ」をクリックします。
↓発行された証明書IDをクリックします。
↓「Route53でレコードを作成」をクリックします。
↓ホストゾーンがしっかり設定されていれば正常終了し、
ステータスも発行済みとなります。
5. 独自ドメインでHTTPS通信をするための設定
最後に次の２行程を行います。
- 発行した証明書を CloudFrontのディストリビューションへ登録
- Route53でAレコード作成
発行した証明書を CloudFrontのディストリビューションへ登録
↓CloudFrontの該当ディストリビューションの一般タブの設定項目にて「編集」をクリックします。
↓カスタムSSL証明書-オプションにて先ほど発行した証明書を選択します。
その後「設定を変更」をクリックします。
Route53でAレコード作成
↓Route53にて該当のホストゾーンを選択し、「レコードの作成」をクリックします。
↓「エイリアス」を有効にし、トラフィックルーティング先にて「CloudFrontのディストリビューションのエイリアス」を選択します。
↓作成したディストリビューションを選択します。その後「レコードを作成」をクリックし完了です。
以上で設定は全て完了となります。
取得したドメイン名でアクセスするとWebページが表示されるはずです。
コメント