プログラマーのメモ書き

伊勢在住のプログラマーが気になることを気ままにメモったブログです

独自ドメインで、メールとhttps化したWebサイトを別サーバーで運用する (2/2)

blog.mori-soft.com

の続きです。 ここから、https でアクセス可能なWebサイトの公開のための作業になります。

Amazon Certificate Manager によるSSL証明書の取得

ドメイン所有者宛てに送られるメールを受け取れるようになったので、SSL証明書の申請を行います。 SSL証明書は、リージョン毎に作成されるようです。

ただし、CloudFront で使用できる証明書は us-east-1 のリージョンのもののみなので、このリージョンに対して証明書の申請をすることに注意してください。

詳しくは、

よくある質問 - AWS Certificate Manager(簡単に SSL/TLS 証明書を作成、管理、配置) | AWS

にある『Q: 複数の AWS リージョンで同じ証明書を使用できますか?』に記載されています。

AWSのコンソールにログインして、Certificate Manager を開きます。 リージョンとして、us-east-1 (米国東部(バージニア北部))を選択します。 『証明書のリクエスト』を押します。

f:id:junichim:20170915102906p:plain

ドメイン名を入力する欄があるので、今回使用する独自ドメイン名を入力します(Zone Apexとして入力します)。 ワイルドカード証明書も取ることができるので、『この証明書に別の名前を追加』ボタンを押して、サブドメインのワイルドカード証明書も申請しておきます(今回の目的には不要なのですが、別件で使うかもしれないので)。

f:id:junichim:20170915103130p:plain

ちなみに、ワイルドカード証明書だけでは、Zone Apex はカバーされないのでご注意ください。

次に進むと確認画面が表示されます。

f:id:junichim:20170915103547p:plain

ここで、『確定とリクエスト』を押すと、ドメイン所有者に対してメールによる確認が行われます。

f:id:junichim:20170915104222p:plain

メール記載のリンクをクリックして、表示される確認内容に問題がなければ、承認します。 承認後、コンソールの画面に戻り『続行』と押すと、問題なければ、証明書一覧の画面が表示され、ステータスが『発行済み』となります。

f:id:junichim:20170915104848p:plain

こんな感じになってれば、証明書が発行できてます。

S3のホスティング

さて、いよいよホスティングするS3の設定をします。

まずは、バケットを作成します。S3で独自ドメインを割り当てる場合は、サブドメインでもZone Apexでもバケット名をそのドメインの形式にする必要があります。

例えば、独自ドメイン名が example.com なら、バケット名も example.com になります。

また、S3でホスティングする場合、誰でも見れる必要があるため、アクセス許可(アクセスコントロールリストやバケットポリシー)を追加しますが、今回は、CloudFront経由でのアクセスのみに制限するので、現時点では、アクセス許可はデフォルトのままとします(パブリックアクセス許可を与えません)。

なので、この時点ではブラウザで確認できないのでご注意ください。

表示するためのファイルをindex.htmlとしてアップロードしておきます。

Hello WOrld!

公開するバケットの『プロパティ』『Static website hosting』を選択して

f:id:junichim:20170915110643p:plain

設定画面で、

f:id:junichim:20170915110934p:plain

『このバケットを使用してウェブサイトをホストする』を選んでおきます。

CloudFront の設定

S3の設定ができたら、CloudFrontでディストリビューションを作成します。

設定内容としては、httpsでのアクセス(httpはhttpsにリダイレクト)とし、必ずCloudFront経由でS3にアクセスするようにしています。

デフォルトの設定値と異なる箇所を以下に示します。

  • Origin Domain Name : S3のバケット名を選択
  • Restrict Bucket Access : Yes
  • Origin Access Identity : Create a New Identity
  • Grant Read Permissions on Bucket : Yes, Update Bucket Policy
  • Viewer Protocol Policy : Redirect HTTP to HTTPS
  • Alternate Domain Names : 独自ドメイン名
  • Default Root Object : index.html

なぜか、この時点で SSL Certificate として Custom SSL Certificate を選択できなかったので、一旦このままディストリビューションを作成します。

なお、CloudFront経由でS3にアクセスする方法については

blog.mori-soft.com

に記載があるので、ご参考にしてください。

Route53 の設定

独自ドメインに対して Alias レコードを設定します。

f:id:junichim:20170915111507p:plain

レコードタイプとして Aレコードを選択して、AliasをYesにします。

Alias Target として、CloudFront のアドレスを選択します。

CloudFront で証明書を指定

最後に、CloudFrontのディストリビューションを再度開き、『General』タブで『Edit』を行います。

f:id:junichim:20170915111932p:plain

SSL Certificate として Custom SSL Certificate を選択し、その下のドロップダウンリストからACMで取得した証明書を選択します。

これで設定完了です。

確認

さて、ブラウザでアクセスしてみましょう。

f:id:junichim:20170915112319p:plain

httpsでアクセスしてもちゃんと表示されています。 ちなみに、http//独自ドメイン/ でアクセスしても表示されます。

さいごに

設定は非常に楽しかったのですが、実際の料金がどれぐらいになるかはちょっと気になるところです。

Route53, CloudFront, S3

でそれぞれ費用が発生するので、アクセス数次第では結構いいお値段になるかもしれません(まあ、そうなったらうれしくもあるんですが)。

これについては、載せたい内容が固まって、本格的にリリースできてから改めて検証したいと思います。

参考

メールの部分以外はこちらを参考にしました。

qiita.com