Skip to main content

Azure Static Web Appsのカスタムドメイン with Cloudflare

前回の記事でAzure Static Web Appsで公開すると自動的に


https://purple-flower-0f0cb7500.5.azurestaticapps.net


的なFQDNが割り当てられます。
これだと最悪、詐欺サイトか？ とか思われるので、自分が持っているドメインでアクセスしたい！

ってことで、Azure Static Web Appsはなんとタダでカスタムドメイン（CNAME）を設定できるので、設定方法を残しておこうと思います。

info

Cloudflareですでにご自身のドメインを管理されている前提で記事を書いています。
これがまだ済んでいない方や、自身のドメインをお持ちでない方は、取得後にまた読んでいただけると嬉しいです。

Azure Static Web Appsの設定​

  1. カスタムドメインを設定したいStatic Web Appsの設定
  2. カスタムドメイン
  3. 追加
  4. 他のDNSのカスタム ドメインの順番でクリック img alt
  5. カスタムドメインの追加ウィンドウ内のドメイン名にアクセスさせたいドメイン名（FQDN）を入力（今回はcook.b0cchi.dev）
  6. 次へをクリック img alt
  7. 下図の画面が出たら、一旦そっとしておいて、Cloudflareの設定に移ります。 img alt

Cloudflareの設定​

  1. アクセスさせたいドメインのDNS→ レコードをクリック

  2. レコードの追加をクリック img alt

  3. 上の７の画面で表示されたものを参考に以下の通り設定し、保存をクリック

    タイプ名前（必須）ターゲット（必須）プロキシステータス
    CNAMEホスト
    （今回はcook）    		値
    （今回はpurple-～azurestaticapps.net）    		DNSのみ

    img alt

tip

上の手順３にある設定で、プロキシはDNSのみを設定しないとうまく反映されないので要注意

再度、Azure Static Web Appsの設定​

  1. そっとしておいた７の画面へ再度戻ってもらって、次へをクリック（追加しています。で1分程度かかるかも） img alt
  2. 状態が検証済みになったことを確認して閉じるをクリック img alt
  3. 実際に設定したカスタムドメイン（FQDN）でアクセスするとあら不思議。ちゃんとアクセスが可能となり、カスタムドメインの設定完了です。

まとめ​

なれると結構簡単にカスタムドメインが設定できてブログ家業がはかどります。
しかし、Azure Static Web Appsだと無料で3個しかカスタムドメイン設定ができないので、厳選して設定することをお勧めします。

蛇足​

この記事で設定したcook.b0cchi.devでは当方のつまみ検証を投稿していく予定なので、一緒に宅飲みをエンジョイしましょう