Catch Tech
トップ
記事一覧

Google Cloudで複数のサブドメインにSSL証明書を一括で登録するには？

Google Cloudで複数のサブドメインにSSL証明書を一括で登録するには？

2024/08/29 00:36

Catch Techは、こんなコンセプトで作成されています。

  • メディアごとに記事を登録できるようにする
  • サブドメインでメディアを作成できるようにする
  • 管理画面でメディアを作成できるようにする

サブディレクトリで複数メディアを運用する方法もあるのですが、

  • メディアごとに専門にしたい内容が異なる
  • GoogleのSEOが、ドメインごとにタグ付けをしているのではないかという仮説
  • SaaSとして公開できたらいいな、、

っていう訳があってサブドメインにしました！

そこで困ってくるのが、『複数のサブドメインのデプロイとSSL証明書をどうしよう😭』でした、、
今回は、SSL証明書の登録方法についてです！

ちょっと愚痴

第1関門 - ワイルドカードが使えない

管理画面でメディアを作成後、Google Cloudのコンソールでサブドメインを追加みたいなことは面倒なのでやりたくないです！

調べてみたところ、「*（ワイルドカード）」で登録すれば操作する必要が無くなるらしい！
早速、Cloud Runでワイルドカードを追加をしてみようとしたところ、、、

「Cloud Run のドメイン マッピング」ではワイルドカードは使えませんでした、、
まじか😇

しょうがないので、「カスタム ドメイン - Google Cloud Load Balancing」でデプロイをすることに
（大変そうで嫌だったので、1時間くらい格闘していました、、）

第2関門 - SSL証明書がつかない

「カスタム ドメイン - Google Cloud Load Balancing」では、ワイルドカードでサブドメインを追加できました！
（別の記事にまとめます！）

アクセスしてみたところ、、

ベースドメイン（ https://catch-tech.jp/ ）は無事にアクセスできました！

Catch Techのトップページ

サブドメインを確認してみたところ、サイトが表示されるURLの左に怪しいマークが、、

Catch Tech - Reactのトップページ

ワイルドカードを使っている場合、サブドメインにはSSL証明書が正しくつかないようでした😇

ググってみても、日本語の資料はなさそう、、、
みんなワイルドカードを使わずに頑張っているのか、、？

しょうがないので英語で調べてみたところ、良さそうな記事を発見！
GoogleマネージドSSL証明書とDNS認証によるワイルドカードでウェブサイトを保護する（Secure Your Website with a Google Managed SSL Certificate With Wildcard Using DNS Authorization）

書かれている通りに動かしてみたら、無事設定ができました！

英語にアレルギーがある仲間が他にもいると思うので、日本語で簡単にやることをまとめていこうと思います！
（Google CloudのSSL証明書の仕組みとやっていることの解説は、長くなるので別の記事にまとめます！）

公式ドキュメントを見ながらでもいけそうですが、ごちゃごちゃしていたり色々と書いてあってわかりにくかったので、、

前提条件

  • Google Cloudのロールが割り当てられている
    • Certificate Manager オーナー
    • Compute ロードバランサ管理者または Compute ネットワーク管理者
    • DNS 管理者（Cloud DNSを使っている場合）
  • gcloud コマンドが使える、環境が整っている
  • ロードバランサを作成している

gcloud インストールの記事はこちら！

1. DNS認証を作成する

DNS認証を作成します。

gcloud certificate-manager dns-authorizations create {{ AUTHORIZATION_NAME }} \
    --domain="{{ DOMAIN_NAME }}"

# AUTHORIZATION_NAME: DNS認証の名前（自由に）
# DOMAIN_NAME: DNS認証を作成するドメイン

# 例
gcloud certificate-manager dns-authorizations create dns-auth-catch-tech-jp \
    --domain="catch-tech.jp"

作成したDNS認証からCNAMEのデータを確認する。

gcloud certificate-manager dns-authorizations describe {{ AUTHORIZATION_NAME }}

# AUTHORIZATION_NAME: 上で設定したDNS認証の名前

# 例
gcloud certificate-manager dns-authorizations describe dns-auth-catch-tech-jp

ここで、作成されたDNS認証の data をメモしておきます。

DNS認証からCNAMEのデータを確認

2. DNSにCNAMEを追加する

「Xserverドメイン」や「さくらのドメイン」など、設定しているドメインのDNSの管理画面でCNAMEを追加します。

DNS認証からCNAMEのデータを確認

ホスト名：　_acme-challenge
内容：　1.で作成した data
　（末尾の「.」があると動かないことがあるので、削除してください
　（例： **.authorize.certificatemanager.goog ）

3. SSL証明書を生成する

DNSにCNAMEレコードを追加したら、ワイルドカードを使ったSSL証明書を生成します。

gcloud certificate-manager certificates create {{ CERTIFICATE_NAME }} \
    --domains="*.{{ DOMAIN_NAME }},{{ DOMAIN_NAME }}" \
    --dns-authorizations={{ AUTHORIZATION_NAME }}

# CERTIFICATE_NAME: SSL証明書の名前（自由に）
# AUTHORIZATION_NAME: 上で設定したドメイン
# AUTHORIZATION_NAME: 上で設定したDNS認証の名前

# 例
gcloud certificate-manager certificates create catch-tech-jp-cert \
    --domains="*.catch-tecj.jp,catch-tecj.jp" \
    --dns-authorizations=dns-auth-catch-tech-jp

作成したSSL証明書のステータスを確認します。

gcloud certificate-manager certificates describe {{ CERTIFICATE_NAME }}

# CERTIFICATE_NAME: 上で設定したSSL証明書の名前

# 例
gcloud certificate-manager certificates describe catch-tech-jp-cert

state が ACTIVE になるまで待ちます。
（DNSの仕組み上、反映まで数分〜数時間かかります。のんびりご飯を食べたりしていてください🍽️）

DNS認証からCNAMEのデータを確認

4. 証明書をロードバランサにデプロイする

証明書マップを作成します。

gcloud certificate-manager maps create {{ CERTIFICATE_MAP_NAME }}

# CERTIFICATE_MAP_NAME: 証明書マップの名前（自由に）

# 例
gcloud certificate-manager maps create catch-tech-jp-map

証明書マップにエントリを作成します。

gcloud certificate-manager maps entries create {{ CERTIFICATE_MAP_ENTRY_NAME }} \
    --map="{{ CERTIFICATE_MAP_NAME }}" \
    --certificates="{{ CERTIFICATE_NAME }}" \
    --set-primary

# CERTIFICATE_MAP_ENTRY_NAME: 証明書マップエントリの名前（自由に）
# CERTIFICATE_MAP_NAME: 上で設定した証明書マップの名前
# CERTIFICATE_NAME: 上で設定したSSL証明書の名前

# 例
gcloud certificate-manager maps entries create catch-tech-jp-entry \
    --map="catch-tech-jp-map" \
    --certificates="catch-tech-jp-cert" \
    --set-primary

最後に、証明書マップをターゲットプロキシに添付します。
（ロードバランサのプロキシ名は、証明書マネージャの「使用リソース」に記載されています。）

gcloud compute target-https-proxies update {{ PROXY_NAME }} \
    --certificate-map="{{ CERTIFICATE_MAP_NAME }}" \
    --global

# PROXY_NAME: ロードバランサのプロキシ名
# CERTIFICATE_MAP_NAME: 上で設定した証明書マップの名前

# 例
gcloud compute target-https-proxies update {{ PROXY_NAME }} \
    --certificate-map="catch-tech-jp-map" \
    --global

5. SSL証明書が適応されているか確認

改めてサブドメインを確認してみたところ、サイトがきちんと表示られるようになりました！🎉
（ロードバランサに反映されるまでに30分くらいかかります。のんびり昼寝でもしていてください🛌）

Catch Tech - Reactのトップページ

まとめ

日本語のわかりやすい資料が見つからなくて大変でした、、
皆さんが困らないように、この記事が参考になったら幸いです。

（Google CloudでのSSL証明書の仕組みを正しく理解していたり、落ち着いて公式ドキュメントを読んでいればもう少し早く解決した気もします😅）

他にもGoogle Cloudに関する記事を投稿していくので、よかったら他の記事も読んでください。

関連記事