ブログ始めました
Author: hironariy
このサイトをつくったきっかけ
Microsoftで働き始めてすでに数年経過しているのですが、技術職に異動してからは社外に向けた技術情報の発信を強く奨励されました。実際、同僚の多くはQiitaやはてな、自分のブログサイトで様々に情報発信しています。
ならば自分も日々お客様と接している中で習得、整理した情報を公開していこう！と思ったのは良いものの、ついつい余計なことを考えてしまいました。せっかくならQiitaやAmeblo、はてなのようなブログホスティングサービスを使うのではなく、自分でサイトを立ち上げようやら、どうも最近はFaaSをつかってJAMStackで作るのが流行っているみたいなのでそれで行こうかなやら、せっかくサイトを作るならフロントエンドだけではなくバックエンドのCMSも自作してみようかなやら、コンテンツはMarkDownで書きたいよねやら、技術情報を発信するならコードブロックもわかりやすくしなくちゃやら、なんやらかんやらと。
そんな感じで構想を始めて仕事の合間をぬって設計したり、コードを書いているとあっという間に２年かかってしまいました・・・。
そんなこんなで、なんとか誰にでも見ていただける状態までこぎつけたので、これからちょくちょく、できれば週１回は更新していこうと思います。
このサイトの構成
最初の投稿ではこのサイトの構成を紹介しようと思います。図にすると以下のような感じです。
フロントエンドはNext.jsで作成し、SSGで出力したものをAzureのBlob Storageでホストしています。当初はせっかく、SPA/MPAで作成するならStatic Web Appsやろ！と、そっちに入れていたのですが、結局、APIなどをSWAの外部のFunctionsで作成し、認証も独自のAAD B2CにしてしまったのでSWAの必要性がなくなり、コスト削減のためにBlob Storageに変更しました。
ただSPAを始めるなら、SWAは下記の点で良いサービスだと思います。
- GitHub、GitHub Actionsとの統合がメチャクチャ簡単。GitHub Actionsのワークフローも基本的な仕組みは自動作成してくれる。
- 証明書の管理をサービスで行ってくれる。
- Zone Apexでのカスタムドメイン登録も標準装備。
- 基本機能に収まるなら無償のSKUを利用可能。
私はAAD B2Cも試してみたいこともあり、有償のSKUを使っていたのですが、標準機能内で個人サイトを作るなら全然ありだと思います。
Blob StorageでSPAを構成するときのGitHub Actionsとの連携はドキュメントがあるのでこちらを参考にすれば、さほど難しくなくワークフローを作成できます。
フロントエンドのフレームワーク技術選定
SSGで作るなら最近流行っているらしいのでNext.jsでつくってみるかぐらいの気持ちでNext.jsを選んだのですが、ImageなどNext.jsらしい機能を使おうと思うとSSRもいるので、SSGのみのサイトであればNext.jsはちょっと過剰だったというのが反省点です。
このページではImageをSSGでも使えるようにしたNext-Image-Export-Optimizerを使っていますがBlob Storageに格納したリモートイメージも最適化しようとするとURLの配列を作る必要があり結構手間でした。
Next.jsをAzureでガッチリ使うならSWAやBlob StorageでSSGのみで構成せずに、App ServiceでSSRも使えるようにしたほうが良いと思います。App Routerも使えますしね。
バックエンドのDB選定
DBは難しいことを考えたくなかった、TypeScriptで手軽に使いたかったことからCosmos DB for MongoDBを使っています。こちらも一定の範囲内では無償で使え、マネージドサービスなので個人サイトにはうってつけです。
Cosmos DBに格納したデータのCRUD操作はREST APIでラップするためにAzure Functions経由としています。Azure FunctionsではEasyAuthという認証機能があり、認証はコードを自作する必要がないので楽ちんです。権限管理はアクセストークンの中身を解析して自作する必要はあります。
画像ファイルのアップロード
画像のアップロードはBlob StorageのSAS経由にしています。ログインしたらアクセストークンを取得できるのですが、SAS取得用のFunctionsにそのトークンをつけてアクセスするとSASがついたURLを取得でき、フロントエンドから直接Blob Storageにアップロードできる構成です。
Blob Storageに画像が格納されると、EventGridで格納イベントを拾い、そこから画像コレクションのCRUD操作を担うFunctionsをトリガーします。せっかくならAI系のサービスも使ってみようということでAI Visionで解析させ、画像の解析情報とあわせてCosmos DBに画像のメタデータを登録する仕組みにしています。
AI Visionでは画像が成人向けかなどの判別も可能です。
この機能を使って、広くユーザーに画像アップロード機能を公開するときに不適切な画像を弾くのも面白いと思います。一応このサイトでも成人判定された画像はCosmos DBに登録されないようにしています。今のところ、このサイトに画像登録するのは私自身しかいないのですが・・・。
AI Visionは有償のSKUを使っています。無償のSKUもあるのですが、スロットリングが厳しくたくさん画像を登録したい私にはちょっと合わない、Functionsでアップロードタイミングにランダム性を持たせても使いづらかったためです。そんなに画像を上げないのであれば無償のものでも十分かと思います。
なにかこのサイトについてご質問あればSNSからご連絡ください。