Chapter 18

SSL の設定

次にSSLサーバ証明書を導入して、 https で通信できるようにしていきます。
流れとしては、

  1. AWS Cetificate Manager の設定
  2. フロントエンドの ALB の SSL の設定
  3. バックエンドの ALB の SSL の設定
  4. SSL 設定をしたコードでの ECS のデプロイ

になります。

1. AWS Cetificate Manager の設定

Cetificate Manager のダッシュボードへいき、[証明書のリクエスト] をクリックします。

「パブリック証明書のリクエスト」 を選択し、 [証明書のリクエスト] をクリックします。

「ドメイン名の追加」 にドメインを追加します。
[この証明書に別の名前を追加] ボタンをクリックし、 *(ワイルドカード) のドメインも追加します。

項目
ドメイン名 hibriiiiidge.com(任意)
追加分 *.hibriiiiidge.com

[次へ] をクリックし、「検証方法の選択」に進みます。
「DNS の検証」を選択し、 [次へ] をクリックします。

「タグを追加」 は任意で設定します。(設定しなくても OK です。)

「確認とリクエスト」で内容を確認し、 [確定とリクエスト] をクリックします。

「検証」 画面が表示されるので、 [Route53でのレコードの作成] ボタンをクリックします。

以下のようなモーダルが表示されるので [作成] ボタンをクリックします。
これで Route53 にレコードタイプが CNAME のドメインが登録されます。

しばらくして、成功のメッセージが表示されるので、 *.hibriiiiidge.com の方も同様の手順で CNAME を作成します。

*.hibriiiiidge.com の方も作成したら、ダッシュボードに戻ってしばらく待ちます。
状況が [発行済み] になれば OK です。

2. フロントエンドの ALB の SSL の設定

ALB の SSL の設定の流れは、

  1. リスナーの追加
  2. インバウンドルールの追加

です。

ロードバランサーのダッシュボードを開きます。
フロントエンドのロードバランサーを選択し、 [リスナーの追加] をクリックします。

「リスナーの追加」の各項目に以下の値をセットします。

項目
プロトコル : ポート HTTPS: 443
デフォルトアクション 転送先/ターゲットグループ: ecs-zenn-app-service-tg-frontend
セキュリティポリシー ELBSecurityPolicy-2016-08
デフォルトの SSL 証明書 ACMから(推奨): hibriiiiidge.com-xxxxx

[保存] ボタンをクリックして、リスナーを保存します。
再度、ロードバランサーのダッシュボード画面のリスナーの項目も見ると、 HTTPS:443 のところにアラートマークが表示されています。
hover すると...

セキュリティグループの設定に警告が出ていることがわかります。
表示されているセキュリティグループをクリックし、セキュリティグループのダッシュボードに遷移し、インバウンドルールを編集します。

以下の値をセットし、 [ルールを保存] ボタンをクリックします。

項目
タイプ HTTPS: 443
ソース 任意の場所

これでフロントエンドの ALB への SSL の導入・設定が完了したので、一度 https://hibriiiiidge.com にアクセスします。

以下のように URL の左側に鍵アイコンが表示されていれば OK です。

3. バックエンドの ALB の SSL の設定

続いて、バックエンドの ALB にも SSL を設定していきます。
基本的にはフロントエンドの ALB で設定した箇所を設定する流れになります。

・リスナーの追加

・セキュリティグループの確認

・インバウンドルールの追加

ただ、バックエンドで SSL の導入・設定が完了したかどうかは画面から確認できません。
また、SSL を導入する前まではフロントエンドからバックエンドの通信に http を用いていたところが SSL を導入したことで https に変わるので、フロントエンド・バックエンド共にコードを置換する必要が出てきます。

ですので、コードの置換をし、再度フロントエンド・バックエンド共に ECS にデプロイする必要があります。

4. SSL 設定をしたコードでの ECS のデプロイ

具体的に以下のコードを置換する必要があります。

// zenn-app/frontend/nuxt.config.js
...
   axios: {
-    baseURL: process.env.NODE_ENV === "production" ? "http://backend.hibriiiiidge.com" : "http://localhost:5000"
+    baseURL: process.env.NODE_ENV === "production" ? "https://backend.hibriiiiidge.com" : "http://localhost:5000"
   }
...
 Rails.application.config.middleware.insert_before 0, Rack::Cors do
   allow do
-    origins ['http://hibriiiiidge.com', 'http://localhost:3000']
+    origins ['https://hibriiiiidge.com', 'http://localhost:3000']

     resource '*', headers: :any, methods: %i[get post put patch delete options head]
   end
 end

上記のコードを置換したら、 ECR へ image の push, サービスの作成を行いデプロイします。
最終的に、以下のように、 http の時と同じように、 []