お名前.comドメインでサブドメインをさくらインターネットのIPに向けて静的サイトを公開するまで【DNSとSSLでハマった話】

サブドメインで静的サイトを設置する機会がありました。
メインドメインはお名前.comで管理しており、サーバーはさくらインターネット。
この「お名前ドメイン × さくらサーバー」の組み合わせで、サブドメインを使って静的サイトを公開する際に、DNS設定とSSL設定の順序で少しハマったので、備忘録としてまとめます。

全体の流れ

さくらインターネットのサーバー情報からIPアドレスを確認
お名前.comのDNS設定でサブドメインをAレコード登録
さくらのコントロールパネルでサブドメインを追加
静的ファイルをアップロード
SSL（Let’s Encrypt）を設定
動作確認

1. さくらインターネットでサーバーのIPアドレスを確認

さくらのコントロールパネルにログインし、「サーバー情報」→「サーバー基本情報」を開きます。
ここに表示されている IPv4アドレス（例：153.xxx.xxx.xxx）をメモしておきます。
このIPアドレスが、サブドメインを向ける先になります。

2. お名前.comのDNS設定でAレコードを登録

お名前.com Navi にログインし、対象ドメインの「DNS設定」を開きます。
「DNSレコード設定を利用する」から次のようにAレコードを追加します。

種別	ホスト名	TTL	VALUE（IPアドレス）	優先度
A	ch	600	153.xxx.xxx.xxx	―

これで ch.nh-hotline.com がさくらのサーバーIPに紐づきます。
設定反映には数分〜最大1時間ほどかかります。

3. さくらのコントロールパネルでサブドメインを追加

さくらのコントロールパネルで「ドメイン/SSL設定」→「ドメイン追加」からサブドメイン追加します。
公開ディレクトリを指定します。

FTPでこのフォルダに index.html や css、js フォルダなどをアップロードします。

4. SSLを設定

サブドメイン追加後、そのままだと https アクセスでは「nginx error」などのエラーが出ます。
必ず「ドメイン/SSL設定」から該当サブドメインを選び、Let’s Encrypt（無料SSL）を有効化してください。

正直このSSL設定ボタンの場所が分かりにくく、少し迷いました。
参考にしたのはさくらインターネット公式ヘルプの以下の記事です。
https://help.sakura.ad.jp/rs/2153/

手順としては「サーバーコントロールパネルにログイン → 『ドメイン／SSL』をクリック → 該当ドメインの『設定』→『SSL設定』→『登録設定を始める』→『Let’s Encrypt（無料SSL）を利用する』」という流れです。

設定後10分ほどでサブドメインにアクセスできるようになります。

5. よくあるトラブル

nginx エラー → サブドメインがさくら側で未登録
DNSが古いIPを指している → お名前.comのAレコード未反映
httpsアクセス不可 → SSL未設定

6. まとめ

・サブドメインも「お名前.comでAレコードをさくらのIPに向ける」必要がある。
・さくら側でサブドメイン追加 → SSL設定の順が重要。
・ファイルを置いただけでは表示されない（ドメイン紐付けとSSL有効化が必須）。

実際この手順を見落とし、「nginx error」画面のまま数時間悩みました。
静的サイトでも、DNSとSSLの順序を正しく設定しないと公開できないことを痛感しました。