【ITニュース解説】My Cloud Resume: Built on Azure

2025年09月06日に「Dev.to」が公開したITニュース「My Cloud Resume: Built on Azure」について初心者にもわかりやすいように丁寧に解説しています。

作成日: 更新日:

ITニュース概要

Azureでクラウド履歴書を作成した事例。HTML/CSSで履歴書を作成し、Azure Storageで公開。JavaScript、Python、CosmosDBで訪問者カウンターを実装。BicepでIaC化し、GitHub ActionsでCI/CDパイプラインを構築。カスタムDNSとHTTPS設定も実施。初心者でも座学に偏らず、手を動かしながらクラウド技術を学べるとのこと。

出典: My Cloud Resume: Built on Azure | Dev.to公開日:

ITニュース解説

これは、オンラインで見つけたCloud Resume Challengeという課題に挑戦した記録だ。初心者にとって、チュートリアルを読むよりも実践的な経験になると考え、この課題に取り組んだ。

まず、HTMLとCSSを使って履歴書を作成する。次に、その履歴書をクラウドストレージにホストし、静的なウェブサイトとして公開する。さらに、JavaScript、Python、データベースを用いて、ウェブサイトへの訪問者カウンターを作成する。そして、インフラをコードで自動的にデプロイするためのテンプレート(IaC)を作成し、フロントエンドとバックエンドの両方に対して、GitHub Actionsを使ったCI/CDパイプラインを構築する。最後に、カスタムDNSを設定し、HTTPSを使ってウェブサイトにアクセスできるようにする。

最初のステップは、HTMLとCSSの知識が不足していたため、少し難しかった。YouTubeのチュートリアルとAIツールを活用して、履歴書を作成した。履歴書が完成したら、Azureのストレージアカウントを作成し、そこに履歴書をアップロードして静的なウェブサイトとして公開する。Azure StorageはCDNのようにファイルを配信できるため、静的ウェブサイトのホスティングに適している。ストレージアカウントで静的ウェブサイトを有効にすると、$webという名前の特別なコンテナが作成され、そこからファイルが配信される。

訪問者カウンターのフロントエンド部分では、まず履歴書のHTMLにカウンターを表示するための要素を追加し、JavaScriptでAPIを呼び出して、その結果を表示するようにした。ここでもAIツールを使ってJavaScriptのコードを生成し、それを理解するように努めた。

データベースには、Azure Cosmos DBのTable APIをサーバーレスモードで使用した。Table APIは、スキーマレスなNoSQLデータベースであり、SQLやMongoDBなどの他のAPIよりもシンプルだ。データを追加するには、必要なプロパティを持つエンティティ(行)を投入するだけだ。各エンティティは、PartitionKey(データのグループ化)とRowKey(一意の識別子)を持つ。サーバーレスモードでは、使用した分だけ料金が発生し、事前に容量を予約する必要がない。Cosmos DBのリソースを作成し、訪問者カウンター用のテーブルを作成した。

セキュリティ上の理由から、ブラウザから直接データベースにアクセスするのではなく、Azure Functionsを使ってAPIを作成した。JavaScriptからのリクエストを受け取ると、関数はCosmos DBから現在の訪問者数を読み取り、それをインクリメントして書き戻し、新しいカウンターの値をブラウザに返す。

Azure FunctionsをPythonでデプロイする際に問題が発生した。Python 3.12をランタイムスタックとして使用していたが、Azure Functionsではまだ新しいバージョンであり、依存関係の競合が発生した。Visual Studio Codeではビルドが成功するものの、デプロイ後にFunction Appに関数が表示されなかった。Python 3.11に切り替えることで、この問題はすぐに解決した。

HTTPトリガーが起動し、データベースに接続してカウンターの値を取得、インクリメント、保存できるようになった。テストケースの作成はAIツールに任せた。

Azureでは通常、Azureポータルからリソースを手動で作成するが、Infrastructure as Code(IaC)を使用することで、JSONやYAMLなどのコードでインフラをデプロイできる。今回はBicepを使用してリソースをデプロイした。Bicepファイルは通常、パラメータ、リソース、デプロイメントの3つのセクションで構成される。パラメータセクションでは、ファイル全体で使用される変数を定義し、リソースセクションでは、インフラストラクチャを定義する。デプロイメントセクションでは、コードをデプロイする。

コードに変更を加えた場合、通常は手動でAzureリソースにアップロードする必要がある。しかし、CI/CD(継続的インテグレーション/継続的デプロイメント)を使用すると、変更が自動的にデプロイされる。CIは、コードがGitHubにプッシュされるたびに自動的にテストされることを意味する。CDは、テストに合格した場合、コードとインフラストラクチャの変更が自動的にAzureにデプロイされることを意味する。

GitHub Actionsを使用してCI/CDパイプラインを構築した。GitHub Actionsは、リポジトリで特定のイベントが発生したときに実行される自動化スクリプトだ。Bicepはインフラのプロビジョニングと構成を目的としているため、インフラとトリガーの両方を単一のBicepファイルでデプロイするアプローチは正しくなかった。コードをBicepテンプレートに埋め込むと、テンプレートを実行するたびにコードが再デプロイされるため、デバッグと管理が難しくなる。

コードをデプロイするためにGitHub Actionsを使用した。このパイプラインは、コードがリポジトリにプッシュされるたびに実行される。ワークフローファイル(.github/actions/main.yml)を作成し、build-and-test(CI用)とdeploy-to-azure(CD用)の2つのジョブを追加した。build-and-testジョブが成功すると、deploy-to-azureジョブが実行される。機密情報をハードコードしないように、Azureへのログインには、プロジェクトリポジトリに作成されたシークレットを使用する。

Azure Functionがデプロイされない問題が発生し、解決に時間がかかった。最終的に、pip install -r requirements.txt --target=".python_packages/lib/site-packages"というコマンドを実行して必要なパッケージをインストールすることで解決した。

バックエンドが実行されたら、次はフロントエンドファイルを自動的にストレージアカウントに更新する。静的なウェブサイトファイル専用の新しいGitHubリポジトリを作成し、そこに新しいコードをプッシュするたびに自動的に実行されるワークフローを作成した。このワークフローは、新しいファイルをAzure Storageの$webコンテナにアップロードし、古いバージョンを置き換える。最後に、Azure CDNキャッシュをパージして、古いキャッシュされたバージョンではなく、ドメインで最新の変更を確認する必要がある。

最後のステップは、HTTPSとDNSの設定だ。カスタムドメインを取得し、履歴書ウェブサイトを公開するために、まずドメインレジストラからドメインを登録した。次に、Azure Front Doorを作成し、そこにドメインを追加した。Azureは、ドメインがAzure Front Doorを指すように、カスタムドメインにコピーする必要があるTXTおよびCNAMEレコードを提供した。Azure Front DoorとAFD Managed Certificateを使用すると、TLS/SSL証明書を自動的に処理できる。最後に、カスタムドメインにアクセスしたユーザーがストレージアカウントに転送されるようにルーティングルールを作成した。

このチャレンジを通して、実践的な経験を通して理論を学ぶことの重要性を実感した。Azure StorageからCosmosDBまで、幅広いサービスを試すことができた。

【ITニュース解説】My Cloud Resume: Built on Azure | いっしー@Webエンジニア