zukucode
主にWEB関連の情報を技術メモとして発信しています。

レンタルサーバーからAzureの静的Webアプリに移行して費用を抑える

レンタルサーバーからAzureの静的Webアプリ(Azure Static Web Apps)に移行して、費用を節約します。

具体的には、以下のような構成で運営しているサイト(ブログ)をレンタルサーバーからAzureに移行する手順を紹介します。

  • 独自ドメイン
  • SSL(https)対応
  • 静的サイト(WordPressなどのサーバー処理が不要)

独自ドメイン+無料のレンタルサーバーというサービスが一番安い構成ですが、SSL(https)対応を行うために、高機能のレンタルサーバーを契約している人も多いかと思います。

静的サイトでは高機能のレンタルサーバーは機能過多ですので、Azureに移行することで、費用を抑えられるケースが多いです。

Azureは従量課金のため、費用はアクセス数などによって変わってくるため、今よりも必ず安くなるということはありませんが、個人で運営している小規模のブログなどであれば高機能のレンタルサーバーを年間10,000円くらいで契約するよりも安くなると思います。

利用するサービス

Azureでは以下のサービスを契約します。

静的 Web アプリ

html,js,cssなどの静的ファイルをホストしてサイトを構築するサービスです。

Freeプランを選択すれば、このサービスは無料で利用できます。

独自ドメインと、SSL(https)も無料で対応しています。

独自ドメインが無料というのは、自身が管理している独自ドメインを静的Webアプリで使用するのが無料という意味であり、独自ドメイン自体は自分で購入する必要があります。

そのため、独自ドメインの契約料(.comの場合は年間1,000円前後)は、レンタルサーバーやAzureに関係なく発生します。(独自ドメインの契約料はAzureではなく契約している業者に支払います)

DNSゾーン

独自ドメインを管理するサービスです。

自身が管理している独自ドメインをAzureで使用出来るようにします。

設定手順

静的Webサイトの作成

静的Webサイトを作成します。

Azure 静的Webサイトの作成

名前は自身が管理しやすい名前を入力します。

プランは個人の小規模サイトならFreeで問題ないと思います。

リージョンは日本に一番近いEast Asiaを選択します。

ソースはGitHubを選択し、GitHubのアカウントと連携します。

html,js,cssなどのファイルはGitHubのリポジトリに配置されていることを前提としています。

Azure 静的Webサイトの作成2

静的サイトジェネレーターなどを使用していない場合はビルドのプリセットはCustomを選択します。

アプリの場所にはhtmlファイルなどが配置されているフォルダ名を入力します。例えばpublicというフォルダ配下にhtmlファイルなどが置かれている場合は/publicと入力します。

設定を行うと、連携したリポジトリに以下のファイルが作成されます。

.github\workflows\azure-static-web-apps-....yml

この設定ファイルがあると、リポジトリにソースを反映(push)したタイミングで、Azureにも自動でファイルがアップロードされ、Webサイトが更新される流れになります。

DNSゾーンの作成

DNSゾーンを作成します。

名前にはサイトのドメイン名を入力します。

Azure DNSゾーンの作成

作成後、概要ページを表示すると、ネームサーバーの名前が4つ表示されている箇所があります。

このネームサーバーの値は後ほど必要になります。

次に先程作成した静的Webサイトの設定で、カスタムドメインを選択し、追加ボタンからAzure DNSのカスタムドメインを選択します。

Azure 静的Webサイトのカスタムドメインの設定

Azure 静的Webサイトのカスタムドメインの設定2

Azure 静的Webサイトのカスタムドメインの設定3

ドメイン名には設定したい独自ドメインの名前を入力し、DNSゾーンは先ほど作成したDNSゾーンを選択します。

表示されているように、CNAMEやTXTレコードなどの設定は自動的に行われます。

設定したら、「検証中」の状態になり、「検証完了」となるまで30分くらいかかります。

「検証完了」となったら追加した独自ドメインを選択して、「既定値の設定」を選択します。

Azure 静的Webサイトのカスタムドメインの設定3

この設定をすると、デフォルトで設定されているAzureのURLにアクセスしたときに、自動で独自ドメインのURLに遷移します。

ドメインの設定

以下はAzureではなく独自ドメインを契約しているサイトでの設定になります。

DNSゾーンに表示されているネームサーバーの値を独自ドメインが使用するネームサーバーに設定します。

独自ドメインを契約しているサイトに、「ネームサーバー設定」などの項目があると思うので、そこでドメインを運用したいサービスのネームサーバー(上記で作成した4つのネームサーバー)を設定します。

料金

ランニングコストは、独自ドメインの年間使用量(年額1000円前後)とDNSゾーンの利用料です。

DNSゾーンの利用料は以下で確認できます。

https://azure.microsoft.com/ja-jp/pricing/details/dns/

ドル換算などの影響で時期によって変動しますが、ゾーン1つにつき月額70円前後で、それに加えて100万クエリあたり50円前後です。

1ヶ月あたりのアクセス数が10万件程度であれば、年間ランニングコストの総額は独自ドメイン契約料(1000円)+ DNSゾーン契約料900円((月額70円+5円)×12ヶ月) = 1900円くらいになる見込みです。

レンタルサーバーだとランニングコストの総額が年間12,000円くらいかかっていたのが、10分の1くらいになりました。

参考書籍

Azureを学習するに当たって、以下の書籍が大変参考になりました。

awsgcpなども含めて、クラウド自体未経験でしたが、全体像から具体例まで大変分かりやすかったです。

Azure定番システム設計・実装・運用ガイド オンプレミス資産をクラウド化するためのベストプラクティス (マイクロソフト関連書)


関連記事