microCMS+Astro+Azure StaticWebAppsで個人ブログを作成した話（無料じゃなかった）

無料のつもりでしたが、無料でもなかったので、追記します。2024/07/10

• Azure DNS
  当初は無料枠だったようで、先日、数十円課金されていました。
  今後も毎月100円程度は継続課金される感じのようです。
  https://azure.microsoft.com/ja-jp/pricing/details/dns/#pricing
  
• お名前ドットコム
  .comドメインで無料のように思っていましたが、よくわからずレンタルサーバーを契約しており、3か月目に1500円くらい請求されました。
  レンタルサーバーを早々に解約すれば良かったのかもしれません。

うーん、もう少し細かく確認するべきでした。
勉強代ですね。

令和最新版のブログで広告を出してみたい！

当初はブログとかあまり考えていなかったのですが、Qiitaへの投稿が内容はともかくそれなりに多くなってきたのと、何かサポートできる場所みたいなものがあった方がいいかな？と思ったこと、そして何より前回投稿したStreamlitに広告がつけられなかったことが一番の動機です。
Streamlitは多少アクセスが期待できるんじゃないか？と思っていたので、そもそもつけられないのはショックでした。（実際にはアクセスがそんなになかったので、関係なかったのですが・・・）
広告をつけられなかったことで、広告収入してみたいよね！という気持ちが強くなり、広告といえばgoogle adsense、google adsenseといえばブログ！というような安易な連想でした。

令和最新版のブログの調査

これまでにやったことがある個人サイト作成では、HTMLを全て手書きしていたり、Wordで作成してみたり、レンタルサービスを間借りしてサービス付属の投稿ツールを利用してみたり、結構いろいろやってきたような気がしますが、令和最新版はさらにスマートになっているのでは？？と思い調査のために検索。
広告収入目的であれば、どうやらWordPressがいいゾという記事が多い感じがしました。
前回のStreamlitで、Azure Web Appsを利用した実績もあったので、WordPressのサービスを借りず、Azureで自前で動かせるんじゃないかなーと思って調べてみると、WordPressは人気があってシェアが大きいため、脆弱性など攻撃対象となりやすい、というような記事を散見しました。また比較的レガシーな構造となっており、表示速度が遅くなりがちということ、またブログコンテンツとレイアウトが一体となっており、修正などが難しいというような記述も見受けられます。
セキュリティ対応のためにWordPressのメンテナンスを定期的に実施するのは大変そうなのと、WordPressは”令和最新版のブログ”というわけではなさそうだと感じたので、他のアプローチを探してみることに。
最近は文章や画像などのコンテンツと、レイアウトなどを表現するフレームワークとに分かれているもの、事前にサーバで生成することで、レスポンスのいいサイトを作成するのが主流だと知りました。
令和最新版ブログとしては、開発されたのが最近で非常に高速と評判のフレームワークAstroと、日本の会社が作っているCMSということでMicroCMS、サーバはAzure StaticWebAppsで構築してみようと決めました。
microCMSはセレッソ大阪での導入実績もある、というのを見て、おおセレッソさん！と思ったサンフレサポ。

Azure StaticWebAppsでAstro

Azure StaticWebAppsで静的ウェブサイトを作るには、ウィザードに従って登録していけばいいのですが、フレームワークの選択メニューにAstroがなかったりします。

AzureでAstroはダメなん・・・？
と思って検索すると、Astro公式で設定方法が記載されていました。

拡張機能によって起動したウィザードに従い、アプリに名前を付け、フレームワークのプリセットを選択し、アプリのルート（通常は/）とビルドされたファイルの場所/distを指定します。AstroはAzureのビルトインテンプレートにはリストされていないため、customを選択する必要があります。

作成されるGitHub Actionのyamlはnode 14の使用を前提としています。これはAstroのビルドが失敗することを意味します。これを解決するには、プロジェクトのpackage.jsonファイルに次のスニペットを追加します。

"engines": {
    "node": ">=18.0.0"
  },

なるほど？と試してみるとあっさりデプロイできました。
Node.Jsのバージョンは、2024春から20になるとのことで、もしかすると指定はなくても大丈夫かもしれませんが、念のため設定しました。

Azure StaticWebAppsでカスタムドメイン

Azure StaticWebAppsでは証明書を出してもらえるらしかったので、令和最新版として、自分だけのカスタムドメインでのブログという技術の無駄遣いをしてみたい！と思いました。
結論から書くと、私が全然理解してなかったこともあって、数日ここで寝つきが悪くなるくらい詰まってました。
Zenn、Qiitaの記事も見て、見よう見まねで試したのですが、最終的にはMicrosoftの公式の記事が一番丁寧に手順を追って書かれており、その記事に従って設定することでカスタムドメインでのサイトへのアクセスが可能となりました。

Azure StaticWebAppsではデプロイをすると、自動設定で長いURLが発行されます。カスタムドメインを取って、アクセスすると転送されるようにしたらいいんだろう、とは思っていたのですが、仕組みを理解していなかったのでとても苦労しました。
もう何番煎じなのかわからないレベルですが、たぶん私のような初心者だけが困るのだとも思いますが、苦労したことなどを書いてみます。

最終的には次のような形での実装になります。
番号の順に設定するのが、恐らく最短です。
（ただ私は試行錯誤して何度も前後しているので、もしかすると嘘があるかもしれません）

1.お名前ドットコムでカスタムドメインを取得

よくよく考えると当たり前なのですが、Azureでドメイン自体を取得してくれません（有償かな？）
そもそもカスタムドメインを取る、ということが分かっていませんでした。（ここで１～２日くらいは潰す）
お名前ドットコムでカスタムドメインが取得できる、ということを知り、まずここでカスタムドメインを取得します。（1.お名前ドットコム取得したカスタムドメイン：xxxxx.com）

2.Azure DNSゾーン で、取得したカスタムドメインを登録

先ほど取得した、①お名前ドットコムで取得したカスタムドメイン：xxxxx.com をAzure DNSゾーンで、登録します。
（2.Azureカスタムドメイン）

3.Azure StaticWebAppsでカスタムドメインの追加をする

先ほどDNSゾーンで設定したドメイン、サブドメインで、StaticWebAppsのカスタムドメイン追加をします。
1.お名前ドットコムで取得したカスタムドメイン：xxxxx.com -> StaticWebAppsカスタムドメイン追加
この時、サブドメインwww（.xxxxx.com）で登録を行います。
すると、カスタムドメイン xxxxx.com で、TEXTという項目で、乱数20桁程度の文字列が取得できるようになりますので、コピー。

お名前ドットコムで取得したTEXTを登録

お名前ドットコムに戻って、レコードの追加で、xxxxx.comのTEXT項目として、先ほどコピーした乱数文字列を登録します。
しばらくすると、Azure StaticWebAppsで検証中となっていたカスタムドメインが検証済みというような表記に代わります。

4. サブドメイン www.xxxxx.com のCNAMEを設定

Azure DNSゾーンで、www.xxxxx.comのCNAMEを、最初のAzureStaticWebApps自動取得URLに設定します。
すると、www.xxxxx.comにアクセスすることで、自動取得URLに転送されるようになります。

たぶんスムーズに操作できれば、1時間もかからないと思うのですが、ドメインを作ったり消したり、いろんなTEXTレコードやCNAMEレコードを登録してみたりと、ずっと苦労して、たぶん3日くらいここで悩んでいた気がします。

microCMSのコンテンツをAstroで表示

こちらの記事を参考にして対応しました。

私はAstroの標準Blogテンプレートで実装しようとしていて、できるだけ標準で実装されている機能をそのまま使おうとしていたのですが、下のように記載したところ、BlogPost content= のところで型が違うので代入できない、というようなエラーが出て、うまくデプロイできませんでした。（ローカルではエラーが出つつも動くが、Azureではビルドできない）

[blogid].astro

//記事の詳細情報を取得
const { blogId } = Astro.params;
const blog = await getBlogDetail(blogId as string);

<BlogPost content={{
    title: blog.title,
    description: '',
    heroImage: blog.eyecatch?.url ?? '',
    pubDate: new Date(blog.publishedAt).toLocaleDateString('ja-JP'),
    updatedDate: new Date(blog.updatedAt).toLocaleDateString('ja-JP'),
}}>
<main set:html={blog.content} />

Reactの代入と型の関係なのかと思うのですが、あまりにReactやJavaScriptの知識が乏しく、この形での実装をあきらめました。当方はド素人ですが、BlogPostを使える形で、contentを代入する方法、お詳しい方よかったらコメントなどで教えてください。

とりあえず動かないものはあきらめて、参照先のBlogPost.astroの内容をそのまま [blogid].astroに貼り付ける形で回避しました。
ここでも数日悩んでた気がします。

microCMSでコンテンツ更新すると、github webhookでデプロイ

こちらの記事を参考にさせていただきました。
microCMSにも解説記事があったのですが、よくわかりませんでした。

令和最新版ブログ完成！

コンテンツはまだ全然ありませんが、形から入るタイプのわたしとしては、そこそこ満足できる形で実装できたと思っています。しかも個人レベルでは無料でできているので、すごいですね。サービスのファンやサポーターを増やす、ということですかね。とてもありがたいし、楽しかったです。
Astroは、公式の解説などの翻訳も進んでいて、かなり日本語に翻訳されたものが見受けられます。
テンプレートなどもアップロードしてあるのですが、個人的にはあまりグっとくるものがなく、標準テンプレートを修正しつつ使おうとしています。Astroの問題ではないですが、もう少しテンプレートを充実させてほしいなぁ

今後はこつこつとコンテンツという日記投稿をやっていきたいと思っています。

後日談 20240604追記

やりたいこと大体できたなー、今後は体裁をもう少し整えながら投稿していこうかなー。あ、公式のチュートリアル見てみよ！
公式のチュートリアル見たら、最初にセットアップされるブログのテンプレートから、微修正しながら学ぶチュートリアルになっていた！！
マヂastro公式丁寧に作られているので、気をつけろ！
なんか変な定義があるなーとは思ってたんだよね…