はじめに
使用技術: Web系のフレームワーク諸々と，クラウドサービスです．
パソコン歴: 3年
最近，Web系で面白いなと思ったのはReactに組み込むThree.jsのライブラリで，好きなクラウドサービスはAzureです．特に.NETを使った開発に興味があります．
今回は. C3のAdventCalendarということで推しのAzureを布教しようと思い，Web系で使いやすいStaticWebAppについて解説していきたいと思います．
全体を通して簡単なので，ぜひ使ってみてください！
Vercel等のような他のクラウドサービスとの差別化も書いておきます．
目次
- そもそもAzureとは
- 学生は無料で使える
- StaticWebAppとは
- いざハンズオン!! (
Next.jsReact.js) - 実はリソース内に… (テスト後)
そもそもAzureとは
Microsoft Azure（略称：Azure）は、マイクロソフトの管理するデータセンターを通して提供されるクラウドコンピューティングサービスである。SaaS、PaaS、IaaSで100を超える数のサービスを提供し、マイクロソフト独自とサードパーティ製の両方の多くのプログラミング言語、ツール、フレームワークが利用できる。（引用：みんな大好きWikipedia）
「なんのこったーーー!!」
初めてAzureというサービスを知った時の自分の反応です．
なので砕いた自分なりの解釈を書いておきます．
Azureは，用途に合わせて 様々なクラウドリソースを利用できるサービスのことで，大体何でも出来るスゲー便利な奴です．
今回解説する，Web系に便利なリソースの他にも，機械学習をサポートするリソースや，VRの開発をサポートするリソースなど様々あります．
※リソースとは：Azureのサービスの１つと思ってください．「Azureの実体」とも言われたりします．
→ 使ってみると何となく分かると思います．
学生は無料で使える
無料？！本当？！美味しそう😋！！！
実は，学生用のサブスクリプション🔑(お金が紐づいたアカウント)が存在し，在学中の学校メールアドレスでサインアップすると毎年100USD分のクレジットが貰えます．
※対応してない所もあるかもです．
StaticWebAppとは
今回解説するリソース名はStaticWebApp（静的アプリ）といいます．
最近流行りなWebフレームワーク(React,Next,Vue,Nuxt......)を簡単にデプロイが出来るリソースです．
また，Github🐈と連携させることで，レポジトリに対し自動でデプロイを行うための設定をしてくれます．
↓ こうゆうのです！（調べてください）
今回の実装でも出てきますが，このリソース内には初期から，認証のための仕組みや，APIを定義するための仕組みが存在します．
※詳しくはコチラ(認証の方) と コチラ(API定義の方)
↓ 認証画面の見た目はこうゆう感じ
いざハンズオン!!(Next.js →React.js)
では，早速手を動かしてやってみましょう．
今回最終的に作るものは，todoアプリとなります．
ただし，デプロイを行うまでを一区切りとし，中身の実装(アプリ編)は後日追記します！
デプロイ編
今回はまず初めに，デプロイから行います．
理由
今回使うリソース(Static Web App)が自動デプロイの設定を予め勝手に作ってくれるためです．
これによって，Githubのmainブランチに作業を細かくPushする度にデプロイがされて，本番環境が更新されていきます．
大変便利です．
前提
今回は，自前でNext.jsの初期プロジェクトをGithubにあげている前提で進めます．
こんなのやって,
こんな感じ．
アカウント作成
学生の方は，先程も解説したコチラからアカウントを作成して，Azure for Studentsのサブスクリプション🔑を手に入れてください．
リソースを作成
今回，Azureのリソース作成は，Azure Portalから行います．
ちょっとわかりにくいので，先に流れを書いておきます．
- リソースグループの設定
- リソースグループの作成
- StaticWebApp(静的アプリ)の設定
- StaticWebApp(静的アプリ)の作成
リソースグループとは Static Web Appを作るためにまずつくるリソースです．
なぜ？
→今回は，管理しやすいからという理解で大丈夫です🧨(もっと深いです)
1.リソースグループの設定
Azure Portalにサブスクリプション🔑をゲットしたアカウントでサインインして，↓ のようなリソースを見つけてください．
次に，作成を押して
↓ のような設定を行ってください
サブスクリプション🔑は，お金の紐づいたアカウントのような物と言いましたが，リソースを使うのに必要なわけです．
リソースグループには，リソースグループ名を入力していて，軽く使う分には適当に入れてもいいですが，今回は，コチラに従って，命名しました．（rgはリソースグループの意味）
入力が終わったら，確認と作成を押してください．
↓ 確認完了😎
2. リソースグループの作成
作成ボタンを押して，リソースを作成します．
できました．
3. StaticWebApp(静的アプリ)の設定
次に，作ったリソースグループに入って，中にStatic Web Appを作成します．
↓ Let's Push ＋作成ボタン!!
↓ こんな感じで入力して
↓ 出てきたこいつがStatic Web Appです．(日本語版の場合)
もちろん作成を押しください．
そうすると，リソースグループを使ったときのように設定画面が出てくるので，下の画像のように入力してください．
(付け加え)
アプリ名： 自分で決めて大丈夫です．
地域： 最も近いEastAsiaで👀
プラン： FreeでOK!
また，Github🐈は認証をして，自分のアカウント名が出れば大丈夫です．
そうしたら次に，デプロイしたいレポジトリを選択して，ビルドの詳細を埋めます．
ここで，デプロイするフレームワークを指定できます．(今回はNext.js)
また，後日追記する部分に関係するところで，APIの場所を，api にしてください．
（APIの定義を書くディレクトリの指定をしています．）
では，確認を押して👍
4. StaticWebApp(静的アプリ)の作成
作成です!
んで，何が起こるか．
紐づけたレポジトリに自動デプロイの設定が記述されて，デプロイが始まります．
「リソースに移動」を押して
Static Web Appのリソースのデプロイ履歴から，デプロイまでのワークフローも確認できます．
（ワークフローはGithub Actionsの用語です．）
これですこれ！
↑ で黄色かったアイコンが，↓ のような感じに成ればデプロイが完了しています．
Static Web Appのリソース画面に戻り，「URL:--」から確認してみましょう😏
見れました．
デプロイ編は以上です．
アプリ編
重い腰を上げて，アプリ編追記します．（次の日）
まず初めに
実は，今回の実装でまだ建てたいリソースがあります👀
まだあったのかよ…
導入＆軽い補足
今回作るWebアプリは機能として下の２つの部分に分かれます．
- 静的なデータを記述する部分
- APIなどを介し動的にデータ生成する部分
そして，今回はアプリの 動的な部分 の実装に，Azureのリソースでサポートしていきたいと思っています．そしてそれに使うリソースが，次のものになります．
- Azure Cosmos DataBase - (今から作る)
- Static Web App（API定義を内包出来る部分）- (既にDone)
てことで，CosmosDBについて．
ストレージ用のリソースです🏮
→ データを置く為のリソースです．
↓ こんな感じのやつです
↓ 今回の実装で使うDBはこれにします．
(※詳細Docs)
設定について
設定は以下のようにします．
以前，デプロイ編で作ったリソースグループを選択してください．
そしたら確認して，作成してDone~👍!
（お決まりです．）
これで，今回使用するリソースはすべて建てることが出来ました．（早かった）
よってココからはお待ちかね，アプリ実装の部分です．
Next.jsを じゃんじゃん 書いていきます🎶
→React.jsに変更しました…
コーディング編
端的に書いていきます．
↓ 今回実装したアプリの中身です．(簡単な内容)
Cording now ......
めんどくさくなったので書きません
Reactに入っているプロジェクトに/apiを定義してAzure Functions的に設定してPushしたら動きます．
そのときにCosmosDBへの接続情報が必要な感じです．
最後に
今回は…