【地方活性化！】MaaS Hands-On with Microsoft Azure【ミニアプリ】

このリポジトリは、【地方活性化！】MaaS Hands-On with Microsoft Azure【ミニアプリ】 で行ったハンズオンをベースに、より実用に即した改良を行ったサンプルコードを格納しています。

サンプルコード

アーキテクチャ

主要スタック

このサンプルコードでは主に以下のスタックを利用しています。

• Vue.js: フロントエンドのフレームワーク (Vue3.x)
• Vite: フロントエンドアプリケーションのビルド
• TypeScript: プロジェクト全体のプログラミング言語として利用
• LIFF: LINE の ログインや Messaging API を利用
• Azure Static Web Apps: フロントエンドホスティング + バックエンド API 実行基盤
• Azure Cosmos DB: バックエンドのデータストア
• GitHub Codespaces: 開発環境
• GitHub Actions: CI/CD 実行環境
• Terraform: Infrastructure as Code

ディレクトリ構成

子のリポジトリには、以下のような構成で、Vue.js によるサンプルコードや、ドキュメントが格納されています。

├── .devcontainer       ... Dev container 構成
├── client              ... ユーザークライアントのコード
├── admin               ... 管理システムのコード
├── docs                ... 資料などドキュメンテーション
├── dev.code-workspace  ... Visual Studio Code のワークスペース設定ファイル
├── iac                 ... Infrastructure as Code のためのコード
└── README.md           ... このファイル

サンプルコードの実行

LINE チャンネルの準備

LINEの仕組みを利用するため、LINE Developersコンソールで２つのチャンネル（ログイン、Messaging API）を作成する必要があります。下記を参照ください。

• LIFFアプリに利用するチャネルを作成する

ローカル環境での実行

ユーザークライアント及び管理システムをローカル環境で動作させるには、client 及び admin を参照ください。

本リポジトリでは、 development container も用意しているので、VS Code や GitHub Codespaces にて適宜ご利用ください。

Microsoft Azure 上での実行

サンプルコードを実行するためのインフラリソースの構築については、iac を参照ください。