LoginSignup
29
25

More than 1 year has passed since last update.

@Shinkijigyo_no_Hitsujiin株式会社マイスター・ギルド

S3でホスティングしているWebサイトに独自ドメインを割り当て、https化する方法

Last updated at Posted at 2022-10-27

image.png

はじめに

株式会社マイスター・ギルド新規事業部のヒツジーです。
弊社新規事業部では、新規サービスの立ち上げを目指して
日々、アイディアの検証やプロトタイプの作成などを行っています！

技術の進歩は目覚ましいので、置いてかれないように新しい技術のキャッチアップにもいそしんでいます！
本記事は、S3にホスティングしているWebサイトに独自ドメインを割り当て、https化する方法ついてご紹介します。

S3にホスティングしているWebサイトのURLはhttp://<bucket名>.s3-website-<region名>.amazonaws.com/のようになっていると思いますが、独自ドメインを割り当てhttps化させてhttps://<original-domain>のように使えるようにする方法を具体的に説明していきます！
サブドメインも合わせてhttps化したいという方は読む価値ありです。

独自ドメインを割り当て、https化する方法の概要

S3にホスティングしているだけの状態は以下のような構成図となります。
フロントシステム構成２.drawio.png

これを、独自ドメインを割り当ててhttps化するには、以下のような構成をとります。

  • CloudFront
  • Route53
  • ACM

のサービスを追加することになります。
フロントシステム構成.drawio.png

CloudFrontでは主にルーティングを行います。ドメインとホスティング先、SSL証明書の一元管理を行います。
Route53はDNSサーバとしての役割を担います。対象のドメインへの問い合わせがあればIPアドレスを返します。
ACM（AWS Certificate Manager）は対象ドメインに対してSSL証明書を発行します。

構成を見ていると単純だなと思うんですが、手続きは初めてだとちょっと面倒です。
以下に具体的な方法を記していきます。

独自ドメインの割り当てとhttps化の具体的な方法

独自ドメインは事前に購入済みであることを前提とします。

手順

  1. Route53でドメインの向き先を指定
  2. ACMでSSL証明書を発行
  3. CloudFrontでディストリビューション作成

※手順として、1, 2, 3と順番を書いていますが、一部行ったり来たりしないといけない部分もあります。

1. Route53で独自ドメインの向き先を指定

  • Route53の「ホストゾーン」ページで「ホストゾーンの作成」をクリック
    image.png

  • ドメイン名を入力し、「パブリックホストゾーン」にチェックを入れ、「ホストゾーンの作成」をクリック
    image.png

  • デフォルトではタイプがNSとSOAのレコードが作成されています。

  • レコードを追加するために「レコードを作成」をクリックします。
    image.png

まずはAレコードを作成します

  • レコード名は空のまま
  • レコードタイプ「A」を選択
  • エイリアスでトラフィックのルーティング先をCloudFrontを選択
  • 「レコードを作成」ボタンをクリックし、Aレコードを作成します
    image.png

次にサブドメインのCNAMEレコードを作成します

  • レコード名にサブドメインを入力します。例えば「www」
  • レコードタイプ「CNAME」を選択
  • 値のところにルートドメインを入力します

これでサブドメインへのアクセスはルートドメインへルーティングされます。
image.png

2. ACMでSSL証明書を発行

注意１：リージョンはバージニア北部にしましょう。
注意２：サブドメインも利用したい場合は、証明書1つに対して、http://<domain>と http://*.<domain>の両方を紐づける必要があります。
これをやっていないと後で、証明書を作り直すはめになります（なりました）。

  • ACMのサービス画面で「証明書をリクエスト」ボタンをクリック
    image.png

  • 「パブリック証明書をリクエスト」にチェックを入れ、「次へ」をクリック
    image.png

  • 「完全修飾ドメイン名」に購入済みの独自ドメインを入力します。サブドメインにもhttps化したい場合は、ここで「*.(domain)」のようにワイルドカードで入力しておきましょう。
    image.png

  • SSL証明書の詳細画面にて、「Route 53でレコードを作成」をクリックし、「レコードを作成」します
    image.png

  • ステータスが「発行済み」になるまで待つ。早くて30分くらいです。ドメインを購入していないと発行済みにはなりませんのでご注意ください。
    image.png

3. CloudFrontでディストリビューション作成

  • CloudFrontのサービス画面にて「ディストリビューションを作成」をクリック
    image.png

  • オリジンドメインでホスティングしているs3バケットを選択します
    image.png

（ここは人によりますが）

  • ビューワープロトコルポリシーで「redirect HTTP to HTTPS」をチェック

  • 許可されたHTTPメソッドで「GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE」をチェック
    image.png

  • 代替ドメイン名にルートドメインとサブドメインを追加します

  • カスタムSSL証明書にACMで作成したSSL証明書を選択します（ここはACMで作成後に選択、もしくは先にSSL証明書を作成します）
    image.png

最後に「ディストリビューションを作成」ボタンをクリックで、作成完了です。

最後に

以上が、S3でホスティングしているWebサイトに独自ドメインを割り当て、https化する方法となります。
CloudFrontは1つのSSL証書しか紐づけられないので、サブドメインも含めた複数のドメインもhttps化するためには、証明書の発行側で複数のドメインを紐づけないといけません。
ここの部分は詰まった部分だったんで、同じことをしたい人にとっては、このドキュメントが役立つかと思います。

29
25
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
29
25