大学の講義でwebアプリを作る機会があったので、Azure SQL DatabaseとAzure Functions v4を使ったドラックアンドドロップで動かせるTODOアプリを作成してみました。
本スクラップは、そんな作業内容を記録として残してみました。

smaru 2023/10/10に更新

2023/09/23

とりあえず、swaデプロイまで作業完了。

主な使用技術・環境としては、

React(typescript)
Azure Static Web Apps
Azure functions v4 (swa内包)
bun (Javascriptランタイム・パッケージマネージャー)
WSL2

という構成になる。

reactアプリをviteで作成する

とりあえず、reactアプリをviteで作成する。

npm create vite@latest

すると色々聞かれるので、以下のように設定する。

hogehoge/test> npm create vite@latest
✔ Project name: … .
✔ Select a framework: › React
✔ Select a variant: › TypeScript

Project nameを.とすることで、カレントディレクトリ直下に直接Reactアプリを展開することが出来る。

Static Web Appsにデプロイする

Azure Static Web Apps(以下swa)にデプロイして、CI/CDを組みます。
以下を参考にしてください。

詰まったところ

smaru 2023/09/26に更新

2023/09/24

swa内包のfunctionを作成する。
基本的に以下のドキュメントを見て頂ければ問題ないですが、こちらの方でもまとめておきます。

事前準備

必要なもの

azureアカウント
Visual Studio Code 用 Azure Static Web Apps 拡張機能
Visual Studio Code 用 Azure Functions 拡張機能

swa内包functionの作成

前回の作業でswaにデプロイしているので、リポジトリのフォルダ構成は以下のようになっているはずです。

├── .github
│   └── workflows
│       └── azure-static-web-apps-<DEFAULT_HOSTNAME>.yml
│
└── (folders and files from your static web app)

確認したら、さっそくfunctionを作成していきます。
F1キーを押して、コマンドパレットを開きます。
Azure Static Web Apps: Create HTTP Function... を選択します。

TypeScriptを選択したら、今度はmodelを聞かれます。
今回はfuncitons v4を使うので、Model V4を選択します。
適当な関数名を入力して、エンターを押しましょう。

そしたら、カレント直下にapiフォルダが出来上がっていると思います。
これがfunctionとなるものです。

この日の作業は以上になります。

smaru 2023/10/03に更新

2023/09/27

前回はswa内包のfuncitonsを作成するところまでやりました。
この日は、バインディングを試してみます。

functionを動かしてテストする

とりあえず、作成したfunctionを動かしてみます。

以下のように書き換えます。

src/App.tsx

import { useEffect, useState } from 'react'
import './App.css'

function App() {
  // fetch api/getData
  const [data, setData] = useState('')

  useEffect(() => {
    fetch('/api/getData')
      .then(res => res.text())
      .then(data => setData(data))
  }, [])
  return (
    <div className="App">
      fetching:{data}
    </div>
  )
}

export default App

api/src/functions/getData.ts

import { app, HttpRequest, HttpResponseInit, InvocationContext } from "@azure/functions";

export async function getData(request: HttpRequest, context: InvocationContext): Promise<HttpResponseInit> {
    context.log(`Http function processed request for url "${request.url}"`);

    const name = request.query.get('name') || await request.text() || 'world';

    return { body: `Hello, ${name}!` };
}

app.http('getData', {
    methods: ['GET', 'POST'],
    authLevel: 'anonymous',
    handler: getData
});

方針としては、一旦フロントをhttp://localhost:3000で立ち上げて、
別ターミナルでswa startを実行して、それを参照しつつapi(function)を動かしていく形になります。

それでは、フロントを立ち上げていきます。

bash

npm run dev

ここでいったん別ターミナルを開いて、

bash2

cd ./api
npm run build

cd ../
swa start http://localhost:3000 --api-location api

こんな感じになったら成功です🎉

📝Azure Functions V4 で Azure SQL Database にバインドする

それでは、本スクラップのメインディッシュであるAzure Functions V4 での Azure SQL Databaseへのバインドを行っていきます。

作業内容は記事にしているので、こちらから。

smaru 2023/10/03

2023/10/3

functions v4でAzure SQL Databaseへのバインド検証ができたので、次は本格的にToDoアプリとして完成まで仕上げていきます。

smaru 2023/10/08に更新

2023/10/7

少し日にちが空いてしまったのですが、デプロイ先で500エラーが発生していて、その解決に手間取ってしまいました。
作業内容は、以下にメモしています。

ここで気づいたのですが、AzureのSQLバインドでは、直接Delete文が使えないので、ストアドプロシージャを作成して、そこからDelete処理を行う必要がありました。
前回書いた記事の内容にDelete処理を追加しました。

smaru 2023/10/10に更新

2023/10/9

この日はドラックアンドドロップの実装と、ドロップした際にDBに保存されている情報を更新する処理を実装しました。
ドラックアンドドロップの実装については、Reactのdnd-kitというものを使いました。
後日詳しく記事にします。

smaru 2023/10/10に更新

2023/10/10

この日は、Todoアイテムを削除する処理の繋ぎこみを実装しました。
その後、全体的なスタイルを調整して完成です。
こちらも含めて後日記事にします。