Azure Static WebApps、Azure Functions、Node.js、Vue.js、Azure SQL、GitHub Actionsを用いて、ToDoMVCフルスタックアプリを開発する手順を紹介します。
概要
このアプリケーションは、フロントエンドにVue.jsを使用し、バックエンドにはAzure FunctionsとNode.js、データベースにはAzure SQLを使用しています。また、GitHub Actionsを使用して自動デプロイを実現します。
使用する技術
- Azure Static WebApps: WebアプリとAPIを一つにまとめて、GitHub CI/CDパイプラインで自動デプロイ
- Vue.js: フロントエンドクライアント
- Azure Functions: サーバーレスなバックエンドインフラ
- Node.js: バックエンドのロジック
- Azure SQL: ToDoデータの保存用データベース
- GitHub Actions: フルスタックWebサイトの自動デプロイ
手順
1. リポジトリのクローン
まず、GitHubリポジトリをクローンします。
git clone https://github.com/azure-samples/azure-sql-db-todo-mvc.git
cd azure-sql-db-todo-mvc
2. データベースのセットアップ
Azure SQLまたはローカルのSQLサーバーを使って、データベースをセットアップします。以下のコマンドでAzure SQLデータベースを作成できます。
az sql db create -g <resource-group> -s <server-name> -n todo_app --service-objective S0
次に、/database/create.sql スクリプトを実行して、データベース内に必要なテーブルやストアドプロシージャを作成します。
3. フロントエンドのセットアップ
/client フォルダに移動し、Vue.jsクライアントのセットアップを行います。
cd client
npm install
4. APIのセットアップ
/api フォルダに移動し、Azure Functionをセットアップします。
cd ../api
npm install
.env.template ファイルを元に、.env ファイルを作成し、Azure SQLへの接続情報を記入します。
SQL_SERVER=<your-sql-server>
SQL_DATABASE=<your-database-name>
SQL_USER=<your-sql-username>
SQL_PASSWORD=<your-sql-password>
5. ローカル環境での実行
ローカル環境でAzure Static WebApps CLIを使用して、アプリを実行します。
npm install -g @azure/static-web-apps-cli
swa start --api ./api
ブラウザで http://localhost:4280 にアクセスして、アプリケーションが正しく動作しているか確認します。
6. Azureへのデプロイ
GitHub Actionsを使用してAzureにデプロイします。最初に、リポジトリをフォークします。
- GitHubリポジトリをフォークします。
- GitHubトークンを取得します。
-
azure-deploy.shスクリプトを実行します。
./azure-deploy.sh
スクリプトを実行すると、初回は .env ファイルが作成されるので、必要な情報を記入して再度実行します。
./azure-deploy.sh
デプロイが完了したら、Azureポータルにアクセスし、Azure Static Web Appの設定でデータベース接続文字列を追加します。
7. アプリの確認
Azureポータルでデプロイされたアプリケーションを確認し、正しく動作しているかを確認します。
終わりに
このガイドでは、AzureのStatic WebApps、Functions、SQLを使用して、ToDoMVCフルスタックアプリをセットアップおよびデプロイする手順を説明しました。サーバーレスアーキテクチャを活用することで、効率的なアプリケーション開発が可能です。
詳細な情報は、公式のドキュメントも参照してください。