LoginSignup
5
1

More than 1 year has passed since last update.

@y__saito

Azure Static Web Apps × Azure Functionsで動的Webアプリを無料で立ち上げる

Last updated at Posted at 2022-12-24

はじめに

こちらは慶應義塾大学理工学部のアドベントカレンダー23日目の記事です。

Azure Static Web AppsやAzure Functionsの名前は前から知ってるし、便利なのも知ってるけどお金結構かかりそうだな、という偏見もあり中々使う機会がありませんでしたが、仕事で使う必要が出てきたので色々と調べていたところ、簡単なアプリなら無料で作れることがわかりました。そこで自分の勉強のためにも、今回は静的なWebアプリを構築できるAzure Static Web AppsとAzure Functionsを利用して、動的Webサンプルアプリのサンプルとしてオリジナル個人ブログを作ってみようと思います。

Azure Static Web Appsとは

Azure Static Web Appsとは静的なWebアプリをホスティングするサービスです。後で紹介するAzure Functionsと組み合わせることで、簡単な動的Webアプリを作ることができます。

静的Webアプリとは既に作成されているページを表示するWebアプリのことを指し、動的Webアプリとはアクセスごとにページを作成して表示するWebアプリのことを言います。

似たようなサービスで、App Serviceというものがありますが、こちらはサーバランタイムが必要な動的なWebアプリを作成したい場合に向いていています。しかし、本記事のように簡単な動的WebアプリであればAzure Static Web Apps × Azure Functionsでも構築することが可能です。

Azure Static Web Appsの料金

2022年12月現在のAzure Static Web Appsの料金です(1 USD = 138.795 JPY)。今回のように簡単なアプリであればFreeプランで利用することができます。
image.png

Azure Functionsとは

Azure Functionsとはサーバーレスで定義済みの関数を実行することができるソリューションです。Azure Functionsの関数はC#、Java、JavaScript、PowerShell、Pythonのいずれかを使って記述することができます。

サーバーレスとはファイルのアップロード、データベースの変更、スケジューリングによる実行などイベントが発生したときだけ処理を実行する仕組みであり、通常のサーバーのように常に稼働させていく必要はなく、必要な時のみ利用することができるためサーバー代のコストカットを期待できます。

Azure Functionsの料金

こちらの表は2022年12月現在のAzure Functionsの料金です(1 USD = 138.795 JPY)。
image.png
表によると、Freeプランでも1か月あたり40 万GB秒の実行時間と100 万回の実行を行うことができます。100 万回という実行回数は、30 秒に1 回の頻度で1か月処理を実行し続けることが可能なため、今回のサンプルアプリでは十分な実行回数になります。

GB秒の単位の意味は、関数が実行される秒と消費メモリ量を掛け合わせた単位です。例えば、1 回の実行に1 秒と1 GBのメモリが必要な関数を1 回実行したとすると、その関数によるサーバーの使用時間は1 GB秒になります。

動的Webアプリの作成フロー

今回のWebアプリは次のような流れで作成します。

  1. VSCode拡張機能のインストール
  2. GitHubリポジトリの作成
  3. Webページの公開
  4. APIの作成と連携

1. VSCode拡張機能のインストール

Webアプリを作成する下準備として、まずはVSCodeの拡張機能を2つインストールしましょう。

①Azure Static Web Apps

左にあるアクティビティバーから拡張機能のロゴを選択し、Azure Static Web Appsと入力すると、次の画像のような拡張機能が見つかるのでインストールしてください。
image.png

②Azure Functions

また、同様にしてAzure Functionsの拡張機能もインストールしておきましょう。
image.png

2. GitHubリポジトリの作成

次にリモートリポジトリを作りましょう。今回はリポジトリ名をSampleAzureStaticWebAppsとしました。リポジトリ名を入力した後、Create repositoryのボタンを押せば作成完了です。
image.png
リポジトリを作成した後、次のような画面が表示されるので、creating a new fileを押して次のようなindex.htmlファイルをコミットしましょう。
image.png

index.html
hello world

最後に、index.htmlをローカルにクローンして下準備完了です。

C:\Users\yus\SampleApp> git init
C:\Users\yus\SampleApp> git clone https://github.com/yus04/SampleAzureStaticWebApps.git

3. Webページの公開

次にAzure Static Web Appsを使って、先ほど作成したindex.htmlを表示するWebページを公開しましょう。Ctrl + Pでコマンドパレットを開いた後、>create Static Web Appと入力して表示された>Azure Static Web Apps: Create Static Web App...を実行します。
image.png
すると、Azureにサインインするように求められるのでSign in to Azure...を選びます。(アカウントを持っていない場合はCreate an Azure Account...を選択します。)
image.png
次にサブスクリプションを聞かれるので、使うサブスクリプションを選びます。
image.png
アプリの名前を聞かれるので、自分で決めたアプリの名前を入力します。
image.png
Azure Functionsのリージョンを選びます。私はEast Asiaを選びました。
image.png
使いたいフレームワークを選びます。私はReactを選択しましたが、何を選んでも大丈夫です。
image.png
アプリの場所を決めます。デフォルトのままでよいです。
image.png
ビルドファイルの場所を決めます。こちらもデフォルトのままでよいです。
image.png
無事にアプリの作成を完了したら、アクティビティバーからAzureのロゴを選択し、表示されたファイルツリーの中からStatic Web Appsをクリックします。展開されたフォルダの中に先ほど作成したアプリ(この画像の場合ではSampleAzureStaticWebApps)を右クリックし、Browse Siteを押します。
image.png
index.htmlの中身が表示されれば静的Webページの出来上がりです。
image.png

4. APIの作成と連携

ここまでのところで、hello worldを表示する静的Webページができました。なので、最後にAzure Functionsを使って動的アプリにしましょう。Ctrl + Pでコマンドパレットを開き、>create Http Functionと入力して表示されたAzure Static Web Apps: Create HTTP Function...を実行します。
image.png
するとAPIで使うプログラミング言語を聞かれます。ここではJavaScriptを選択します。
image.png
APIの名前を聞かれます。今回はデフォルトの関数名を使います。
image.png
そうすると以下のように、先ほど選択した言語で関数を作ってくれます。
image.png
ここで、index.htmlとindex.jsを次のように書き換えます。

index.html
<b id="res">...</b>

<script>
(async function() {
    const { time } = await( await fetch(`/api/HttpTrigger1`)).json();
    document.querySelector('#res').textContent = time;
}());
</script>
index.js
module.exports = async function (context) {
    context.res.json({
        time: get_time()
    });
};

function get_time(){
    var now = new Date();
    var year = now.getFullYear();
    var month = now.getMonth()+1;
    var date = now.getDate();
    var hour = now.getHours();
    var minute = now.getMinutes();
    return (
        year + "/" + 
        month + "/" +
        date + " " +
        hour + ":" +
        minute
    );
}

contextとは、エクスポートされる関数の最初の引数です。バインディングデータの送受信、ログ記録、ランタイムとの通信に使用に使用されます。

変更をpushします。

C:\Users\yus\SampleApp> git add .
C:\Users\yus\SampleApp> git commit -m ""
C:\Users\yus\SampleApp> git push origin master

再び、アプリをブラウジングしてグリニッジ標準時(GMT)が表示されればAzure Functionsが無事に機能していることを確認できます。
image.png

GitHub Actionsのビルドとデプロイに時間がかかるため、コミットの変更が反映されるまで少し時間がかかる場合があります。以下のスクリーンショットの通り、GitHub Actionsのコミットにチェックマーク✅が付けば、コミットの変更が反映されたことになります。
image.png

おわりに

今回はAzure Static Web AppsとAzure Functionsを使って簡単な動的Webアプリを作ることができました。Webアプリを公開する際に面倒なビルドやデプロイはGitHub Actionsを使って自動化されているため、快適に開発することができました。ポートフォリオや簡単なコーポレートサイトであれば、今回のやり方でも十分に作れると思いました。

5
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
1