Vercelで、先にSSL証明書だけ発行・設定する方法

Vercelへのウェブサイト移行ではSSL証明書の事前発行が必要であり、CLIを使用して証明書をリクエストする方法が紹介されています。証明書発行後はTXTレコードを追加し、設定を確認してから証明書を発行します。SSL証明書エラーを避けるためにはcurlコマンドを使用して確認し、問題が解決されれば安全な移行が可能です。CLIのバージョンや–scopeオプションの使用にも注意が必要です。

既存サイトをVercelに移行する場合、SSLの証明書を先に発行する必要があります。証明書の発行を済ませていない場合、DNSの向け先をVercelに切り替えた後に、SSL証明書の発行を行う流れとなります。そのため、一時的にウェブサイトでSSL証明書エラーが発生してしまいます。

ドキュメントにゼロダウンタイムでの切り替えを行う方法が紹介されていますので、その方法を実際に動かしてみました。

SSL証明書の発行だけを行うには、Vercel CLIが必要

ドキュメントでも記載されていますが、記事を作成した2024年8月時点では、CLIからのみこの作業が行えます。今回は以下のバージョンでCLIを実行しました。

Vercel CLI 33.5.1

Vercel CLIでSSL証明書をリクエストする

Vercel CLIを使うには、まず設定したいサイトのプロジェクトルートでvercelコマンドを実行する必要があります。ここでプロジェクトとVercel上にあるサイトの関連づけを行います。

npx vercel
? Set up and deploy “~/test/example-app”? [Y/n] y
? Which scope do you want to deploy to? Stripe
? Found project “test/example-app”. Link to it? [Y/n] y

その後、vercel certs issueでドメインに対するSSL証明書を発行しましょう。ここで—challenge-onlyを設定すると、証明書発行のための認証用 DNSレコードを手に入れることができます。

$ npx vercel certs issue www.DUMMYDOMAIN.dev DUMMYDOMAIN.dev --challenge-only
> A certificate issuance for www.DUMMYDOMAIN.dev DUMMYDOMAIN.dev has been started [4s]
  Add the following TXT records with your registrar to be able to the solve the DNS challenge:

name                       type        value
_acme-challenge            TXT         XXXXXXXXXXX
_acme-challenge .www           TXT         XXXXXXXXXXX

引数で渡したドメインの数だけTXTレコードが発行されますので、それぞれDNSのレコードとして登録しましょう。

Organizationアカウントを使っている場合は、`—scope`を忘れない

Organization内に作成したサイト（プロジェクト）に対して作業する場合、次のようなエラーに遭遇します。

$ npx vercel certs issue www.DUMMYDOMAIN.dev DUMMYDOMAIN.dev --challenge-only
Error: You don't have permissions to access www.DUMMYDOMAIN.dev.

これはプロジェクトのあるOrganizationではなく、個人のアカウントから操作しようとしている状態になっていることが原因です。そのため、--scopeを追加して「このOrganizationで作業します」と明示的に伝えてやりましょう。

$ npx vercel certs issue www.DUMMYDOMAIN.dev DUMMYDOMAIN.dev --challenge-only --scope YOUR_ORG_NAME

TXTレコードの設定状況を確認する

発行されたTXTレコードをDNSレコードとして追加した後は、digコマンドで設定を確認できます。

$ dig TXT _acme-challenge.example.com +short
XXXXXX

$ dig TXT _acme-challenge.www.example.com +short
XXXXXXX

手間ではありますが、設定したレコード全てちゃんと確認しておきましょう。

証明書を発行してプロジェクトに割り当てる

digでそれぞれのTXTレコードに接続できていることが確認できれば、あとは証明書を発行するだけです。vercel certs issueを実行すると、検証処理が実行されます。レコードの設定が完了していれば、成功メッセージが表示されます。

$ npx vercel certs issue www.DUMMYDOMAIN.dev DUMMYDOMAIN.dev  --scope YOUR_ORG_NAME
> Success! Certificate entry for www.DUMMYDOMAIN.dev, DUMMYDOMAIN.dev created [4s]

ここでも--scopeフラグを忘れると、権限がないといわれることがありますので、Organizationを利用している場合はご注意ください。

なお、本当に設定されているかどうかは、vercel certs lsで確認できます。

$ npx vercel certs ls  --scope YOUR_ORG_NAME
Vercel CLI 33.5.1
> Certificates found under stripe [180ms]
  id                             cns                            expiration  renew  age
  cert_XXXXXXXXXXXXXXXXXXXX  - DUMMYDOMAIN.dev                      in 90d   yes   44s
                                 - www.DUMMYDOMAIN.dev

SSL証明書エラーが出ていないことを検証する

SSL証明書のエラーが発生しないことを確認するには、curlコマンドを使います。curl https://DUMMYDOMAIN.dev --resolve DUMMYDOMAIN.dev:443:76.76.21.21 -Iのように、—resolveオプションでVercelのIPアドレスで名前解決するように設定して実行しましょう。証明書の発行が完了していない場合か、エラーが起きている場合は、次のようなメッセージが表示されます。

$ curl https://DUMMYDOMAIN.dev --resolve DUMMYDOMAIN.dev:443:76.76.21.21 -I
curl: (35) LibreSSL/3.3.6: error:1404B42E:SSL routines:ST_CONNECT:tlsv1 alert protocol version

vercel certs issueを実行してから反映まで数分時間がかかることがあります。少し時間をおいて実行すると、次のように成功メッセージが表示されます。

$ curl https://DUMMYDOMAIN.dev --resolve DUMMYDOMAIN.dev:443:76.76.21.21 -I
HTTP/2 200 
accept-ranges: bytes
server: Vercel

もしそれでもHTTP400が出る時は、Vercel管理画面でドメインの設定を手動で実行してみましょう。

安全なサイト移行のために

すこし手間ではありますが、この手順を踏むことでVercelへの移行をより安全に行うことができます。また、/etc/hostsを書き換えるなどで、早い段階から本番ドメインでの検証が行えるメリットもありますので、ぜひこの手法を覚えておきましょう。