.
├── .github                         # GitHub Actions用
├── api                             # API用ディレクトリ
├── frontend                        # フロント用ディレクトリ Next.js静的エクスポート
├── infra                           # Infrastructure as Code用ディレクトリ
└── swa-cli.config.json             # SWA CLIのローカル起動用設定ファイル

interface UserInfo {
    userId: string | null;
    name: string | null;
    email: string | null;
    provider: string | null;
    roles: string[];
    isAuthenticated: boolean;
}

{
    "userId": "github|12345678",
    "name": "yamada.taro",
    "email": "yamada.taro@example.com",
    "provider": "github",
    "roles": ["authenticated"],
    "isAuthenticated": true
}

{
    "userId": null,
    "name": null,
    "email": null,
    "provider": null,
    "roles": [],
    "isAuthenticated": false
}

interface ProtectedData {
    userId: string;
    message: string;
    timestamp: string;
    userNumber: number;
}

{
    "userId": "github|12345678",
    "message": "こんにちは、ユーザーgithub|12345678さん！",
    "timestamp": "2024-12-15T15:45:30.000Z",
    "userNumber": 456
}

interface ErrorResponse {
    error: string;
    message: string;
}

{
    "error": "Unauthorized",
    "message": "保護されたデータにアクセスするには認証が必要です"
}

{
    "error": "Internal server error",
    "message": "Application Crash"
}

interface ClientPrincipal {
    identityProvider: string;
    userId: string;
    userDetails: string;
    userRoles: string[];
}

.
└── .devcontainer
    └── devcontainer.json

{
    "name": "Azure SWA include API & Bicep Development",
    "image": "mcr.microsoft.com/devcontainers/javascript-node:1-20-bullseye",
    "features": {
        "ghcr.io/devcontainers/features/azure-cli:1": {},
        "ghcr.io/devcontainers/features/github-cli:1": {}
    },
    // npm@11.4.2に関してはnoticeが出ていたので対応
    "postCreateCommand": "npm install -g npm@11.4.2 @azure/static-web-apps-cli azure-functions-core-tools@4",
    "customizations": {
        "vscode": {
            "extensions": [
                "ms-azuretools.vscode-bicep",
                "GitHub.vscode-github-actions",
                "ms-vscode.azure-account"
            ]
        }
    },
    "forwardPorts": [
        3000,
        7071,
        4280
    ],
    "mounts": [
        "source=${localEnv:HOME}/.azure,target=/home/node/.azure,type=bind,consistency=cached"
    ]
}

"mounts": [
    "source=${localEnv:HOME}/.azure,target=/home/node/.azure,type=bind,consistency=cached"
]

az --version
# azure-cli                         2.74.0

# core                              2.74.0
# telemetry                          1.1.0
#
# Dependencies:
# msal                              1.32.3
# azure-mgmt-resource               23.3.0
#
# Python location '/opt/az/bin/python3'
# Config directory '/home/node/.azure'
# Extensions directory '/home/node/.azure/cliextensions'
# 
# Python (Linux) 3.12.10 (main, May 27 2025, 09:13:17) [GCC 10.2.1 20210110]
#
# Legal docs and information: aka.ms/AzureCliLegal
#
#
# Your CLI is up-to-date.

az account show

az login

gh --version
# gh version 2.74.2 (2025-06-18)
# https://github.com/cli/cli/releases/tag/v2.74.2

swa --version
# 2.0.6

func --version
# 4.0.7317

.
└── api
    ├── .funcignore
    ├── .gitignore
    ├── host.json
    ├── local.settings.json
    ├── package.json
    ├── package-lock.json
    ├── src
    │   └── functions
    │       ├── protected-data.ts
    │       └── user-info.ts
    ├── tsconfig.json
    └── .vscode
        └── extensions.json

mkdir api
cd api

func init --typescript

 func templates list

func new --name user-info --template "HTTP trigger" --authlevel "anonymous"

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

interface ClientPrincipal {
    identityProvider: string;
    userId: string;
    userDetails: string;
    userRoles: string[];
}

interface UserInfo {
    userId: string;
    name: string;
    email: string;
    provider: string;
    roles: string[];
    isAuthenticated: boolean;
}

export async function userInfo(request: HttpRequest, context: InvocationContext): Promise<HttpResponseInit> {
    context.log('Processing user-info request');

    try {
        // x-ms-client-principalヘッダーの取得
        const clientPrincipalHeader = request.headers.get('x-ms-client-principal');
        
        if (!clientPrincipalHeader) {
            context.log('ヘッダーにx-ms-client-principalが確認することができず、認証状態を確認することができませんでした。');
            return {
                status: 200,
                jsonBody: {
                    isAuthenticated: false,
                    userId: null,
                    name: null,
                    email: null,
                    provider: null,
                    roles: []
                }
            };
        }

        // Base64デコード
        const clientPrincipalData = Buffer.from(clientPrincipalHeader, 'base64').toString('utf-8');
        const clientPrincipal: ClientPrincipal = JSON.parse(clientPrincipalData);

        context.log('Client Principal:', clientPrincipal);

        // ユーザー情報の整形
        const userInfo: UserInfo = {
            userId: clientPrincipal.userId,
            name: clientPrincipal.userDetails,
            email: clientPrincipal.userDetails, // GitHubの場合はユーザー名,Googleならメールアドレス
            provider: clientPrincipal.identityProvider,
            roles: clientPrincipal.userRoles || [],
            isAuthenticated: true
        };

        return {
            status: 200,
            headers: {
                'Content-Type': 'application/json'
            },
            jsonBody: userInfo
        };

    } catch (error) {
        context.log('Applicatoin Crash', error);
        
        return {
            status: 500,
            jsonBody: {
                error: 'Internal server error',
                message: 'Failed to process user information'
            }
        };
    }
}

app.http('user-info', {
    methods: ['GET'],
    authLevel: 'anonymous',
    route: 'user-info',
    handler: userInfo
});

func new --name protected-data --template "HTTP trigger" --authlevel "anonymous"

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

interface ClientPrincipal {
    identityProvider: string;
    userId: string;
    userDetails: string;
    userRoles: string[];
}

interface ProtectedData {
    userId: string;
    message: string;
    timestamp: string;
    userNumber: number;
}

// 認証チェック用のヘルパー関数
function checkAuthentication(request: HttpRequest, context: InvocationContext): ClientPrincipal | null {
    const clientPrincipalHeader = request.headers.get('x-ms-client-principal');
    
    if (!clientPrincipalHeader) {
        context.log('認証ヘッダーが見つかりませんでした');
        return null;
    }

    try {
        const clientPrincipalData = Buffer.from(clientPrincipalHeader, 'base64').toString('utf-8');
        return JSON.parse(clientPrincipalData);
    } catch (error) {
        context.log('Client principalの解析に失敗しました:', error);
        return null;
		}
}

// 軽量なユーザー固有データ生成
function generateUserData(userId: string): ProtectedData {
    // userIdをベースにした簡単なシード値
    const seed = userId.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
    
    return {
        userId,
        message: `こんにちは、ユーザー${userId}さん！`,
        timestamp: new Date().toISOString(),
        userNumber: seed % 1000 // 0-999の範囲のユーザー番号
    };
}

export async function protectedData(request: HttpRequest, context: InvocationContext): Promise<HttpResponseInit> {
    context.log('protected-dataリクエストを処理中');

    try {
        // 認証チェック
        const clientPrincipal = checkAuthentication(request, context);
        
        if (!clientPrincipal) {
            return {
                status: 401,
                headers: {
                    'Content-Type': 'application/json'
                },
                jsonBody: {
                    error: 'Unauthorized',
                    message: '保護されたデータにアクセスするには認証が必要です'
                }
            };
        }

        context.log('認証済みユーザー:', clientPrincipal.userId);

        // 軽量なダミーデータを生成
        const userData = generateUserData(clientPrincipal.userId);

        return {
            status: 200,
            headers: {
                'Content-Type': 'application/json'
            },
            jsonBody: userData
        };

    } catch (error) {
        context.log('protected-dataリクエストの処理中にエラー:', error);
        
        return {
            status: 500,
            jsonBody: {
                error: 'Internal server error',
                message: '保護されたデータの取得に失敗しました'
            }
        };
    }
}

app.http('protected-data', {
    methods: ['GET'],
    authLevel: 'anonymous',  // SWAのManaged Functionsのため
    route: 'protected-data',
    handler: protectedData
});

cd api

func start

Azure Functions Core Tools
Core Tools Version:       4.0.7317 Commit hash: N/A +5ca56d37938824531b691f094d0a77fd6f51af20 (64-bit)
Function Runtime Version: 4.1038.300.25164

[2025-06-30T14:09:22.328Z] Worker process started and initialized.

Functions:

        protected-data: [GET] http://localhost:7071/api/protected-data

        user-info: [GET] http://localhost:7071/api/user-info

For detailed output, run func with --verbose flag.

curl http://localhost:7071/api/user-info

{
  "userId": null,
  "name": null,
  "email": null,
  "provider": null,
  "roles": [],
  "isAuthenticated": false
}

curl http://localhost:7071/api/protected-data

{
  "error": "Unauthorized",
  "message": "保護されたデータにアクセスするには認証が必要です"
}

[2025-06-30T14:13:03.946Z] Executing 'Functions.protected-data' (Reason='This function was programmatically called via the host APIs.', Id=3570bfd5-7ed0-4ea7-a34f-262df44324ac)
[2025-06-30T14:13:03.951Z] protected-dataリクエストを処理中
[2025-06-30T14:13:03.951Z] 認証ヘッダーが見つかりませんでした
[2025-06-30T14:13:03.952Z] Executed 'Functions.protected-data' (Succeeded, Id=3570bfd5-7ed0-4ea7-a34f-262df44324ac, Duration=5ms)

func start --verbose

./frontend
├── eslint.config.mjs
├── next.config.ts
├── next-env.d.ts
├── package.json
├── package-lock.json
├── postcss.config.mjs
├── README.md
├── public
├── src
│   ├── app
│   │   ├── favicon.ico
│   │   ├── globals.css
│   │   ├── layout.tsx
│   │   ├── page.tsx                        // トップページ
│   │   └── protected
│   │       └── page.tsx　　　　　　　　　　　// 認証済みルート
│   └── hooks
│       └── useAuth.ts                      // 認証系Hooks
└── tsconfig.json

mkdir frontend

cd frontend

npx create-next-app@15 . --typescript --tailwind --eslint --app --src-dir --import-alias "@/*"

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  output: 'export',                        // 静的エクスポート設定
  distDir: 'out',                          // ビルドファイルのエクスポート先設定
  images: {
    unoptimized: true                      // 静的エクスポートでは使用できない画像圧縮の無効化
  }
};

export default nextConfig;

import { useState, useEffect } from 'react';

interface UserInfo {
    isAuthenticated: boolean;
    user?: {
        name?: string;
        email?: string;
        login?: string;
    };
}

export const useAuth = () => {
    const [userInfo, setUserInfo] = useState<UserInfo>({ isAuthenticated: false });
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<string | null>(null);

    useEffect(() => {
        const fetchUserInfo = async () => {
            try {
                const response = await fetch('/.auth/me');

                if (response.ok) {
                    const data = await response.json();

                    if (data.clientPrincipal) {
                        setUserInfo({
                            isAuthenticated: true,
                            user: {
                                name: data.clientPrincipal.userDetails,
                                email: data.clientPrincipal.userDetails,
                                login: data.clientPrincipal.userId
                            }
                        });
                    } else {
                        setUserInfo({ isAuthenticated: false });
                    }
                } else {
                    setUserInfo({ isAuthenticated: false });
                }
            } catch (err) {
                console.error('認証情報の取得に失敗しました:', err);
                setError('認証情報の取得に失敗しました');
                setUserInfo({ isAuthenticated: false });
            } finally {
                setLoading(false);
            }
        };

        fetchUserInfo();
    }, []);

    const login = () => {
        window.location.href = '/.auth/login/github';
    };

    const logout = () => {
        window.location.href = '/.auth/logout';
    };

    return {
        ...userInfo,
        loading,
        error,
        login,
        logout
    };
};

'use client';

import Link from 'next/link';
import { useAuth } from '@/hooks/useAuth';
import { useState } from 'react';

interface ApiUserInfo {
  userId: string;
  name: string;
  email: string;
  provider: string;
  roles: string[];
  isAuthenticated: boolean;
}

interface ApiError {
  error: string;
  message: string;
}

export default function HomePage() {
  const { isAuthenticated, user, loading, login, logout } = useAuth();
  const [apiData, setApiData] = useState<ApiUserInfo | null>(null);
  const [apiError, setApiError] = useState<string | null>(null);
  const [apiLoading, setApiLoading] = useState(false);

  const fetchUserInfo = async () => {
    setApiLoading(true);
    setApiError(null);
    setApiData(null);

    try {
      const response = await fetch('/api/user-info', {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
        },
        credentials: 'include', // 認証情報を含める
      });

      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }

      const data: ApiUserInfo | ApiError = await response.json();

      if ('error' in data) {
        setApiError(data.message || data.error);
      } else {
        setApiData(data);
      }
    } catch (error) {
      console.error('API呼び出しエラー:', error);
      setApiError(error instanceof Error ? error.message : 'APIの呼び出しに失敗しました');
    } finally {
      setApiLoading(false);
    }
  };

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
          <p className="text-gray-600">認証状態を確認中...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
      <div className="container mx-auto px-4 py-16">
        <div className="max-w-4xl mx-auto text-center">
          <h1 className="text-5xl font-bold text-gray-900 mb-8">
            Next.js 15 + Azure SWA
          </h1>
          <p className="text-xl text-gray-600 mb-12">
            GitHub認証を使用したセキュアなWebアプリケーション
          </p>

          <div className="bg-white rounded-lg shadow-lg p-8 mb-8">
            <h2 className="text-2xl font-semibold text-gray-800 mb-6">
              認証状態
            </h2>

            {isAuthenticated ? (
              <div className="space-y-4">
                <div className="flex items-center justify-center space-x-2">
                  <div className="w-3 h-3 bg-green-500 rounded-full"></div>
                  <span className="text-green-700 font-medium">認証済み</span>
                </div>

                {user && (
                  <div className="bg-gray-50 rounded-lg p-4 text-left max-w-md mx-auto">
                    <h3 className="font-medium text-gray-800 mb-2">ユーザー情報（クライアント側）</h3>
                    {user.name && (
                      <p className="text-sm text-gray-600">
                        <span className="font-medium">名前:</span> {user.name}
                      </p>
                    )}
                    {user.email && (
                      <p className="text-sm text-gray-600">
                        <span className="font-medium">メール:</span> {user.email}
                      </p>
                    )}
                    {user.login && (
                      <p className="text-sm text-gray-600">
                        <span className="font-medium">ログイン:</span> {user.login}
                      </p>
                    )}
                  </div>
                )}

                <div className="flex flex-col sm:flex-row gap-4 justify-center mt-6">
                  <Link
                    href="/protected"
                    className="bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg transition duration-200"
                  >
                    保護されたページへ
                  </Link>
                  <button
                    onClick={logout}
                    className="bg-gray-500 hover:bg-gray-600 text-white font-medium py-3 px-6 rounded-lg transition duration-200"
                  >
                    ログアウト
                  </button>
                </div>
              </div>
            ) : (
              <div className="space-y-4">
                <div className="flex items-center justify-center space-x-2">
                  <div className="w-3 h-3 bg-red-500 rounded-full"></div>
                  <span className="text-red-700 font-medium">未認証</span>
                </div>

                <p className="text-gray-600 mb-6">
                  保護されたコンテンツにアクセスするには、GitHubアカウントでログインしてください。
                </p>

                <button
                  onClick={login}
                  className="bg-gray-900 hover:bg-gray-800 text-white font-medium py-3 px-6 rounded-lg transition duration-200 flex items-center space-x-2 mx-auto"
                >
                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clipRule="evenodd" />
                  </svg>
                  <span>GitHubでログイン</span>
                </button>
              </div>
            )}
          </div>

          {/* API情報取得セクション */}

          <div className="bg-white rounded-lg shadow-lg p-8 mb-8">
            <h2 className="text-2xl font-semibold text-gray-800 mb-6">
              API情報取得
            </h2>

            <div className="space-y-4">
              <button
                onClick={fetchUserInfo}
                disabled={apiLoading}
                className="bg-green-600 hover:bg-green-700 disabled:bg-green-400 text-white font-medium py-3 px-6 rounded-lg transition duration-200 flex items-center space-x-2 mx-auto"
              >
                {apiLoading ? (
                  <>
                    <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
                    <span>取得中...</span>
                  </>
                ) : (
                  <>
                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                    </svg>
                    <span>サーバーからユーザー情報を取得</span>
                  </>
                )}
              </button>

              {apiError && (
                <div className="bg-red-50 border border-red-200 rounded-lg p-4 text-left max-w-md mx-auto">
                  <h3 className="font-medium text-red-800 mb-2">エラー</h3>
                  <p className="text-sm text-red-600">{apiError}</p>
                </div>
              )}

              {apiData && (
                <div className={" rounded-lg p-4 text-left max-w-md mx-auto" +
                 (apiData.isAuthenticated ? ' bg-green-50 border border-green-200' : ' bg-red-50 border border-red-200')}
                 >
                  <h3 className={"font-medium  mb-2" + (apiData.isAuthenticated ? " text-green-800": " text-red-800")}>サーバー側ユーザー情報</h3>
                  <div className={"space-y-1 text-sm " + (apiData.isAuthenticated ? " text-green-700": " text-red-700")}>
                    <p><span className="font-medium">認証状態:</span> {apiData.isAuthenticated ? '認証済み' : '未認証'}</p>
                    <p><span className="font-medium">ユーザーID:</span> {apiData.userId}</p>
                    <p><span className="font-medium">名前:</span> {apiData.name}</p>
                    <p><span className="font-medium">メール:</span> {apiData.email}</p>
                    <p><span className="font-medium">プロバイダー:</span> {apiData.provider}</p>
                    <p><span className="font-medium">ロール:</span> {apiData.roles.length > 0 ? apiData.roles.join(', ') : 'なし'}</p>
                  </div>
                </div>
              )}
            </div>
          </div>


          <div className="text-center text-gray-500">
            <p className="text-sm">
              このアプリケーションはAzure Static Web Appsで認証を管理しています
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

interface ApiUserInfo {
  userId: string;
  name: string;
  email: string;
  provider: string;
  roles: string[];
  isAuthenticated: boolean;
}

interface ApiError {
  error: string;
  message: string;
}

const [apiData, setApiData] = useState<ApiUserInfo | null>(null);
const [apiError, setApiError] = useState<string | null>(null);
const [apiLoading, setApiLoading] = useState(false);

const fetchUserInfo = async () => {
  setApiLoading(true);
  setApiError(null);
  setApiData(null);

  try {
    const response = await fetch('/api/user-info', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      }
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const data: ApiUserInfo | ApiError = await response.json();

    if ('error' in data) {
      setApiError(data.message || data.error);
    } else {
      setApiData(data);
    }
  } catch (error) {
    console.error('API呼び出しエラー:', error);
    setApiError(error instanceof Error ? error.message : 'APIの呼び出しに失敗しました');
  } finally {
    setApiLoading(false);
  }
};

'use client';

import Link from 'next/link';
import { useAuth } from '@/hooks/useAuth';
import { useState } from 'react';

interface ProtectedData {
  userId: string;
  message: string;
  timestamp: string;
  userNumber: number;
}

interface ApiError {
  error: string;
  message: string;
}

export default function ProtectedPage() {
  const { user, loading, logout } = useAuth();
  const [protectedData, setProtectedData] = useState<ProtectedData | null>(null);
  const [apiError, setApiError] = useState<string | null>(null);
  const [apiLoading, setApiLoading] = useState(false);

  const fetchProtectedData = async () => {
    setApiLoading(true);
    setApiError(null);
    setProtectedData(null);

    try {
      const response = await fetch('/api/protected-data', {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
        }
      });

      if (!response.ok) {
        if (response.status === 401) {
          throw new Error('認証が必要です');
        }
        throw new Error(`HTTP error! status: ${response.status}`);
      }

      const data: ProtectedData | ApiError = await response.json();
      
      if ('error' in data) {
        setApiError(data.message || data.error);
      } else {
        setProtectedData(data);
      }
    } catch (error) {
      console.error('保護されたAPI呼び出しエラー:', error);
      setApiError(error instanceof Error ? error.message : '保護されたデータの取得に失敗しました');
    } finally {
      setApiLoading(false);
    }
  };

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
          <p className="text-gray-600">ユーザー情報を読み込み中...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-green-50 to-emerald-100">
      <div className="container mx-auto px-4 py-16">
        <div className="max-w-4xl mx-auto">
          <div className="text-center mb-12">
            <div className="flex items-center justify-center space-x-2 mb-4">
              <div className="w-4 h-4 bg-green-500 rounded-full"></div>
              <span className="text-green-700 font-medium text-lg">保護されたエリア</span>
            </div>
            <h1 className="text-4xl font-bold text-gray-900 mb-4">
              🎉 認証成功！
            </h1>
            <p className="text-xl text-gray-600">
              このページは認証済みユーザーのみがアクセスできます
            </p>
          </div>

          <div className="bg-white rounded-lg shadow-lg p-8 mb-8">
            <h2 className="text-2xl font-semibold text-gray-800 mb-6 text-center">
              あなたの情報
            </h2>
            
            {user ? (
              <div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg p-6 mb-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  {user.name && (
                    <div className="bg-white rounded-lg p-4">
                      <div className="text-sm text-gray-500 font-medium">名前</div>
                      <div className="text-lg text-gray-900">{user.name}</div>
                    </div>
                  )}
                  {user.email && (
                    <div className="bg-white rounded-lg p-4">
                      <div className="text-sm text-gray-500 font-medium">メールアドレス</div>
                      <div className="text-lg text-gray-900">{user.email}</div>
                    </div>
                  )}
                  {user.login && (
                    <div className="bg-white rounded-lg p-4">
                      <div className="text-sm text-gray-500 font-medium">GitHubユーザー名</div>
                      <div className="text-lg text-gray-900">@{user.login}</div>
                    </div>
                  )}
                  <div className="bg-white rounded-lg p-4">
                    <div className="text-sm text-gray-500 font-medium">アクセス日時</div>
                    <div className="text-lg text-gray-900">
                      {new Date().toLocaleString('ja-JP')}
                    </div>
                  </div>
                </div>
              </div>
            ) : (
              <div className="text-center py-8">
                <p className="text-gray-500">ユーザー情報が見つかりません</p>
              </div>
            )}

            <div className="bg-blue-50 border border-blue-200 rounded-lg p-6 mb-6">
              <h3 className="text-lg font-semibold text-blue-900 mb-3">
                🔒 セキュリティ情報
              </h3>
              <ul className="text-blue-800 space-y-2">
                <li>• このページはAzure SWAレベルで保護されています</li>
                <li>• 未認証ユーザーは自動的にGitHubログインにリダイレクトされます</li>
                <li>• 認証情報はAzure Static Web Appsで安全に管理されています</li>
              </ul>
            </div>

            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Link
                href="/"
                className="bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg transition duration-200 text-center"
              >
                ホームに戻る
              </Link>
              <button
                onClick={logout}
                className="bg-red-500 hover:bg-red-600 text-white font-medium py-3 px-6 rounded-lg transition duration-200"
              >
                ログアウト
              </button>
            </div>
          </div>

          {/* 保護されたデータ取得セクション */}
          <div className="bg-white rounded-lg shadow-lg p-8 mb-8">
            <h2 className="text-2xl font-semibold text-gray-800 mb-6 text-center">
              🛡️ 保護されたデータ
            </h2>
            
            <div className="space-y-6">
              <div className="text-center">
                <p className="text-gray-600 mb-4">
                  サーバー側で認証を確認し、あなた専用のデータを取得します
                </p>
                <button
                  onClick={fetchProtectedData}
                  disabled={apiLoading}
                  className="bg-purple-600 hover:bg-purple-700 disabled:bg-purple-400 text-white font-medium py-3 px-6 rounded-lg transition duration-200 flex items-center space-x-2 mx-auto"
                >
                  {apiLoading ? (
                    <>
                      <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
                      <span>データ取得中...</span>
                    </>
                  ) : (
                    <>
                      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                      </svg>
                      <span>保護されたデータを取得</span>
                    </>
                  )}
                </button>
              </div>

              {apiError && (
                <div className="bg-red-50 border border-red-200 rounded-lg p-6">
                  <div className="flex items-center space-x-2 mb-2">
                    <svg className="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <h3 className="font-medium text-red-800">エラー</h3>
                  </div>
                  <p className="text-sm text-red-600">{apiError}</p>
                </div>
              )}

              {protectedData && (
                <div className="bg-gradient-to-r from-purple-50 to-pink-50 border border-purple-200 rounded-lg p-6">
                  <div className="flex items-center space-x-2 mb-4">
                    <svg className="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <h3 className="font-medium text-purple-800">取得成功 🎯</h3>
                  </div>
                  
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="bg-white rounded-lg p-4">
                      <div className="text-sm text-gray-500 font-medium">ユーザーID</div>
                      <div className="text-lg text-gray-900 font-mono">{protectedData.userId}</div>
                    </div>
                    
                    <div className="bg-white rounded-lg p-4">
                      <div className="text-sm text-gray-500 font-medium">ユーザー番号</div>
                      <div className="text-lg text-gray-900 font-bold ">
                        #{protectedData.userNumber}
                      </div>
                    </div>
                    
                    <div className="bg-white rounded-lg p-4 md:col-span-2">
                      <div className="text-sm text-gray-500 font-medium">パーソナライズメッセージ</div>
                      <div className="text-lg text-gray-900">{protectedData.message}</div>
                    </div>
                    
                    <div className="bg-white rounded-lg p-4 md:col-span-2">
                      <div className="text-sm text-gray-500 font-medium">データ生成時刻</div>
                      <div className="text-lg text-gray-900 font-mono">
                        {new Date(protectedData.timestamp).toLocaleString('ja-JP')}
                      </div>
                    </div>
                  </div>

                  <div className="mt-4 p-3 bg-purple-100 rounded-lg">
                    <p className="text-sm text-purple-700">
                      💡 このデータはあなたのユーザーIDに基づいて動的に生成され、
                      サーバー側で認証を確認した後にのみ提供されます。
                    </p>
                  </div>
                </div>
              )}
            </div>
          </div>

          <div className="text-center text-gray-500">
            <p className="text-sm">
              Azure Static Web Apps + GitHub認証で実現したセキュアなアプリケーション
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

interface ProtectedData {
  userId: string;
  message: string;
  timestamp: string;
  userNumber: number;
}

interface ApiError {
  error: string;
  message: string;
}

const [protectedData, setProtectedData] = useState<ProtectedData | null>(null);
const [apiError, setApiError] = useState<string | null>(null);
const [apiLoading, setApiLoading] = useState(false);

const fetchProtectedData = async () => {
  setApiLoading(true);
  setApiError(null);
  setProtectedData(null);

  try {
    const response = await fetch('/api/protected-data', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      }
    });

    if (!response.ok) {
      if (response.status === 401) {
        throw new Error('認証が必要です');
      }
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const data: ProtectedData | ApiError = await response.json();
    
    if ('error' in data) {
      setApiError(data.message || data.error);
    } else {
      setProtectedData(data);
    }
  } catch (error) {
    console.error('保護されたAPI呼び出しエラー:', error);
    setApiError(error instanceof Error ? error.message : '保護されたデータの取得に失敗しました');
  } finally {
    setApiLoading(false);
  }
};

npm run dev

# http://localhost:3000

swa init

{
  "$schema": "https://aka.ms/azure/static-web-apps-cli/schema",
  "configurations": {
    "swa-api-bicep-sample": {
      "appLocation": "frontend",
      "apiLocation": "api",
      "outputLocation": "out",
      "apiLanguage": "node",
      "appBuildCommand": "npm run build",
      "apiBuildCommand": "npm run build --if-present",
      "run": "npm run dev",
      "appDevserverUrl": "http://localhost:3000",
      "swaConfigLocation": "frontend/config/local"
    }
  }
}

{
  "$schema": "https://aka.ms/azure/static-web-apps-cli/schema",
  "configurations": {
    "swa-api-bicep-sample": {
      "appLocation": "frontend",
      "apiLocation": "api",
      "outputLocation": "out",
      "apiLanguage": "node",
      "appBuildCommand": "npm run build",
      "apiBuildCommand": "npm run build --if-present",
      "run": "npm run dev",
      "appDevserverUrl": "http://localhost:3000",
      "apiDevserverUrl": "http://localhost:7071",
      "swaConfigLocation": "frontend/config/local"
    }
  }
}

./frontend
└── config
    ├── local
    │   └── staticwebapp.config.json
    └── prod
        └── staticwebapp.config.json

{
  "routes": [
    {
      "route": "/protected/*",
      "allowedRoles": ["authenticated"]
    },
    {
      "route": "/*",
      "statusCode": 200
    }
  ],
  "responseOverrides": {
    "401": {
      "redirect": "/.auth/login/github",
      "statusCode": 302
    }
  },
  "platform": {
    "apiRuntime": "node:18"
  }
}

{
  "auth": {
    "identityProviders": {
      "github": {
        "registration": {
          "clientIdSettingName": "GITHUB_CLIENT_ID",
          "clientSecretSettingName": "GITHUB_CLIENT_SECRET"
        }
      }
    }
  },
  "routes": [
    {
      "route": "/protected/*",
      "allowedRoles": ["authenticated"]
    },
    {
      "route": "/*",
      "statusCode": 200
    }
  ],
  "responseOverrides": {
    "401": {
      "redirect": "/.auth/login/github",
      "statusCode": 302
    }
  },
  "platform": {
    "apiRuntime": "node:18"
  }
}

# swa-cli.config.jsonでの設定による起動
swa start

./infra
├── bicep
│   ├── main.bicep
│   └── parameters.json
└── scripts
    └── deploy.sh

@description('Static Web App名')
param staticWebAppName string

@description('デプロイするリージョン')
param location string = resourceGroup().location

@description('GitHubリポジトリのURL')
param repositoryUrl string

@description('デプロイ対象のブランチ')
param branch string = 'main'

@description('フロントエンドのソースフォルダパス')
param appLocation string = 'frontend'

@description('APIのソースフォルダパス')
param apiLocation string = 'api'

@description('ビルド出力フォルダパス')
param outputLocation string = 'out'

@description('GitHub OAuth App のClient ID')
param githubClientId string

@description('GitHub OAuth App のClient Secret')
@secure()
param githubClientSecret string

// Static Web App リソース
resource staticWebApp 'Microsoft.Web/staticSites@2024-11-01' = {
  name: staticWebAppName
  location: location
  sku: {
    name: 'Standard'
    tier: 'Standard'
  }
  properties: {
    repositoryUrl: repositoryUrl
    branch: branch
    buildProperties: {
      appLocation: appLocation
      apiLocation: apiLocation
      outputLocation: outputLocation
      skipGithubActionWorkflowGeneration: false
    }
    stagingEnvironmentPolicy: 'Enabled'
  }
}

// アプリケーション設定（GitHub OAuth用の環境変数）
resource staticWebAppSettings 'Microsoft.Web/staticSites/config@2022-03-01' = {
  name: 'appsettings'
  parent: staticWebApp
  properties: {
    GITHUB_CLIENT_ID: githubClientId
    GITHUB_CLIENT_SECRET: githubClientSecret
  }
}

// アウトプット
@description('Static Web Appsのエンドポイント')
output appBaseUrl string = 'https://${staticWebApp.properties.defaultHostname}'

@description('Static Web Appsの名前')
output resourceName string = staticWebAppName

@description('GitHubリポジトリのURL')
output repositoryUrl string = repositoryUrl

@description('フロントエンドのソースフォルダパス')
output appLocation string = appLocation

@description('APIのソースフォルダパス')
output apiLocation string = apiLocation

@description('ビルド出力フォルダパス')
output outputLocation string = outputLocation

{
  "$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentParameters.json#",
  "contentVersion": "1.0.0.0",
  "parameters": {
    "staticWebAppName": {
      "value": "swa-api-deploy-bicep"
    },
    "location": {
      "value": "East Asia"
    },
    "repositoryUrl": {
      "value": "https://github.com/xxxxxxxxxxxxxxxx/xxxxxxxxxxxxxxxxxxxxxx"
    },
    "branch": {
      "value": "main"
    },
    "appLocation": {
      "value": "deploy/frontend"
    },
    "apiLocation": {
      "value": "api"
    },
    "outputLocation": {
      "value": "."
    }
  }
}

GITHUB_CLIENT_ID=xxxxxxxxxxxxxxxxx
GITHUB_CLIENT_SECRET=xxxxxxxxxxxxxxxxx
GITHUB_ENVIRONMENT="production"

RESOURCE_GROUP_NAME=swa-bicep-test

#!/bin/bash

# エラー時に停止
set -e

log_info() { echo -e "\033[1;34m$1\033[0m"; }
log_success() { echo -e "\033[1;32m$1\033[0m"; }
log_warning() { echo -e "\033[1;33m$1\033[0m"; }
log_error() { echo -e "\033[1;31m$1\033[0m"; }

DEPLOYMENT_NAME="swa-deployment-$(date +%Y%m%d-%H%M%S)"

CONFIG_FILE="$(git rev-parse --show-toplevel)/.env"

if [ -f "$CONFIG_FILE" ]; then
    echo "📁 設定ファイル読み込み: $CONFIG_FILE"
    source "$CONFIG_FILE"
else
    echo "⚠️  設定ファイルが見つかりません: $CONFIG_FILE"
    echo "   .env.example をコピーして設定してください"
    exit 1
fi

# 必要な環境変数の確認（機密情報のみ）
required_vars=("GITHUB_CLIENT_ID" "GITHUB_CLIENT_SECRET" "RESOURCE_GROUP_NAME")
for var in "${required_vars[@]}"; do
    if [ -z "${!var}" ]; then
        echo "エラー: 環境変数 $var が設定されていません"
        exit 1
    fi
done

# GitHub CLIがインストールされているかチェック
if ! command -v gh &> /dev/null; then
    log_error "GitHub CLI (gh) がインストールされていません"
    log_error "インストール方法: https://cli.github.com/"
    exit 1
fi

# GitHub CLIの認証チェック
if ! gh auth status &> /dev/null; then
    log_error "GitHub CLIが認証されていません"
    log_error "認証方法: gh auth login"
    exit 1
fi

# リポジトリのルートディレクトリかチェック
if ! git rev-parse --is-inside-work-tree &> /dev/null; then
    log_error "Gitリポジトリ内で実行してください"
    exit 1
fi

# 現在のリポジトリ情報を取得（デバッグ用）
CURRENT_REPO=$(gh repo view --json nameWithOwner --jq '.nameWithOwner' 2>/dev/null || echo "unknown")
log_info "📍 対象リポジトリ: $CURRENT_REPO"

# リソースグループ作成（存在しない場合）
log_info ""
log_info "📦 ローカル開発用リソースグループ確認・作成..."
if ! az group show --name $RESOURCE_GROUP_NAME &> /dev/null; then
    log_info "🔧 リソースグループ作成中: $RESOURCE_GROUP_NAME"
    az group create --name $RESOURCE_GROUP_NAME --location $LOCATION
    log_success "✅ リソースグループ作成完了"
else
    log_success "✅ リソースグループ既存: $RESOURCE_GROUP_NAME"
fi

echo "Azure Static Web Appをデプロイ中..."

az deployment group validate \
  --resource-group "$RESOURCE_GROUP_NAME" \
  --template-file infra/bicep/main.bicep \
  --parameters @infra/bicep/parameters.json \
  --parameters githubClientId="$GITHUB_CLIENT_ID" \
  --parameters githubClientSecret="$GITHUB_CLIENT_SECRET"

# Bicepテンプレートでデプロイ（機密情報のみ環境変数から渡す）
az deployment group create \
  --resource-group "$RESOURCE_GROUP_NAME" \
  --template-file infra/bicep/main.bicep \
  --parameters @infra/bicep/parameters.json \
  --parameters githubClientId="$GITHUB_CLIENT_ID" \
  --parameters githubClientSecret="$GITHUB_CLIENT_SECRET" \
  --name ${DEPLOYMENT_NAME}

# 全outputを一度に取得
OUTPUTS=$(az deployment group show \
  --resource-group "$RESOURCE_GROUP_NAME" \
  --name "$DEPLOYMENT_NAME" \
  --query "properties.outputs" -o json)

echo "✅ デプロイ結果を取得しました"

# 各値を抽出
APP_BASE_URL=$(echo "$OUTPUTS" | jq -r '.appBaseUrl.value')
STATIC_WEB_APP_NAME=$(echo "$OUTPUTS" | jq -r '.resourceName.value')
REPOSITORY_URL=$(echo "$OUTPUTS" | jq -r '.repositoryUrl.value')
APP_LOCATION=$(echo "$OUTPUTS" | jq -r '.appLocation.value')
API_LOCATION=$(echo "$OUTPUTS" | jq -r '.apiLocation.value')
OUTPUT_LOCATION=$(echo "$OUTPUTS" | jq -r '.outputLocation.value')

# 結果を表示
log_success ""
log_success "Azure Static Web Appのデプロイが完了しました！"
log_success "アプリのベースURL: $APP_BASE_URL"
log_success "リソース名: $STATIC_WEB_APP_NAME"
log_success "リポジトリURL: $REPOSITORY_URL"
log_success "アプリの場所: $APP_LOCATION"
log_success "APIの場所: $API_LOCATION"
log_success "出力の場所: $OUTPUT_LOCATION"

# === 新機能: デプロイトークンの取得とGitHub Environment設定 ===

log_info ""
log_info "🔑 Azure Static Web Appsのデプロイトークンを取得中..."

# デプロイトークンを取得
DEPLOY_TOKEN=$(az staticwebapp secrets list \
  --name "$STATIC_WEB_APP_NAME" \
  --resource-group "$RESOURCE_GROUP_NAME" \
  --query "properties.apiKey" -o tsv)

if [ -z "$DEPLOY_TOKEN" ]; then
    log_error "デプロイトークンの取得に失敗しました"
    exit 1
fi

log_success "✅ デプロイトークンを取得しました"

# GitHub環境の作成と設定
log_info ""
log_info "🌍 GitHub環境 '$GITHUB_ENVIRONMENT' を設定中..."

# 注意: GitHub CLIは現在のGitリポジトリを自動認識します
# このスクリプトはGitリポジトリ内で実行する必要があります

# Environment変数の設定
log_info ""
log_info "📝 Environment変数を設定中..."

# app_location
if gh variable set APP_LOCATION --body "$APP_LOCATION" --env "$GITHUB_ENVIRONMENT" 2>/dev/null; then
    log_success "✅ 変数 'app_location' を設定: $APP_LOCATION"
else
    log_error "❌ 変数 'app_location' の設定に失敗しました"
fi

# api_location
if gh variable set API_LOCATION --body "$API_LOCATION" --env "$GITHUB_ENVIRONMENT" 2>/dev/null; then
    log_success "✅ 変数 'api_location' を設定: $API_LOCATION"
else
    log_error "❌ 変数 'api_location' の設定に失敗しました"
fi

# output_location
if gh variable set OUTPUT_LOCATION --body "$OUTPUT_LOCATION" --env "$GITHUB_ENVIRONMENT" 2>/dev/null; then
    log_success "✅ 変数 'output_location' を設定: $OUTPUT_LOCATION"
else
    log_error "❌ 変数 'output_location' の設定に失敗しました"
fi

# デプロイトークンをシークレットに設定
log_info ""
log_info "🔐 デプロイトークンをシークレットに設定中..."

# 注意: gh secret setは現在のGitリポジトリの指定した環境にシークレットを設定します
if gh secret set AZURE_STATIC_WEB_APPS_API_TOKEN --body "$DEPLOY_TOKEN" --env "$GITHUB_ENVIRONMENT" 2>/dev/null; then
    log_success "✅ シークレット 'deploy_token' を設定しました"
else
    log_error "❌ シークレット 'deploy_token' の設定に失敗しました"
    log_warning "⚠️  手動で設定してください:"
    log_warning "   リポジトリ設定 > Environments > $GITHUB_ENVIRONMENT > Secrets"
    log_warning "   シークレット名: deploy_token"
    log_warning "   値: [デプロイトークン]"
fi

# 最終結果サマリー
log_success ""
log_success "🎉 すべての設定が完了しました！"
log_success ""
log_success "📋 設定内容サマリー:"
log_success "  - Azure Static Web App: $STATIC_WEB_APP_NAME"
log_success "  - アプリURL: $APP_BASE_URL"
log_success "  - GitHub環境: $GITHUB_ENVIRONMENT"
log_success "  - 設定された変数:"
log_success "    • app_location: $APP_LOCATION"
log_success "    • api_location: $API_LOCATION"
log_success "    • output_location: $OUTPUT_LOCATION"
log_success "  - 設定されたシークレット:"
log_success "    • deploy_token: [設定済み]"
log_success ""
log_success "🚀 GitHub Actionsでのデプロイが可能になりました！"

chmod +x ./infra/scripts/deploy.sh

./infra/scripts/deploy.sh


# リザルトで以下が出たら成功！！

#📋 設定内容サマリー:
#  - Azure Static Web App: swa-api-deploy-bicep
#  - アプリURL: https://blue-bay-01b32fb00.2.azurestaticapps.net
#  - GitHub環境: production
#  - 設定された変数:
#    • app_location: deploy/frontend
#    • api_location: api
#    • output_location: .
#  - 設定されたシークレット:
#    • deploy_token: [設定済み]

./infra/scripts/deploy.sh


# リザルトで以下が出たら成功！！

#📋 設定内容サマリー:
#  - Azure Static Web App: swa-api-deploy-bicep
#  - アプリURL: https://blue-bay-01b32fb00.2.azurestaticapps.net
#  - GitHub環境: production
#  - 設定された変数:
#    • app_location: deploy/frontend
#    • api_location: api
#    • output_location: .
#  - 設定されたシークレット:
#    • deploy_token: [設定済み]

./.github
└── workflows
    └── deploy.yaml

name: Build and Deploy to Azure Static Web Apps

on:
  workflow_dispatch:

jobs:
  # フロントエンドビルドジョブ
  build-frontend:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repository
        uses: actions/checkout@v4

      - name: Setup Node.js for Frontend
        uses: actions/setup-node@v4
        with:
          node-version: "18"
          cache: "npm"
          cache-dependency-path: "frontend/package-lock.json"

      - name: Install Frontend Dependencies
        working-directory: ./frontend
        run: npm ci

      - name: Build Frontend
        working-directory: ./frontend
        run: npm run build

      - name: Upload Frontend Build Artifacts
        uses: actions/upload-artifact@v4
        with:
          name: frontend-build
          path: |
            frontend/out/
          retention-days: 1

  # APIビルドジョブ
  test-api:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repository
        uses: actions/checkout@v4

      - name: Setup Node.js for API
        uses: actions/setup-node@v4
        with:
          node-version: "18"
          cache: "npm"
          cache-dependency-path: "api/package-lock.json"

      - name: Install API Dependencies
        working-directory: ./api
        run: npm install

      - name: Build API
        working-directory: ./api
        run: npm run build

      - name: Run API Tests
        working-directory: ./api
        run: npm run test

  # Azure Static Web Appsデプロイジョブ
  deploy-swa:
    needs: [build-frontend, test-api]
    runs-on: ubuntu-latest
    environment: production
    env:
      APP_LOCATION: ${{ vars.APP_LOCATION || 'deploy/frontend' }}
      OUTPUT_LOCATION: ${{ vars.OUTPUT_LOCATION || '.' }}
      API_LOCATION: ${{ vars.API_LOCATION || 'api' }}

    steps:
      - name: Checkout Repository
        uses: actions/checkout@v4

      - name: Download Frontend Artifacts
        uses: actions/download-artifact@v4
        with:
          name: frontend-build
          path: ./deploy/frontend
      - name: Copy Static Web App Configuration
        run: |
          cp frontend/config/prod/staticwebapp.config.json deploy/frontend/
      - name: check
        working-directory: ./deploy/frontend/
        run: |
          ls -la
          cat staticwebapp.config.json

      - name: Deploy to Azure Static Web Apps
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          action: "upload"
          app_location: ${{ env.APP_LOCATION }}
          api_location: ${{ env.API_LOCATION }}
          output_location: "${{ env.OUTPUT_LOCATION }}"
          skip_app_build: true
          skip_api_build: false

  build-frontend:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repository
        uses: actions/checkout@v4

      - name: Setup Node.js for Frontend
        uses: actions/setup-node@v4
        with:
          node-version: "18"
          cache: "npm"
          cache-dependency-path: "frontend/package-lock.json"

      - name: Install Frontend Dependencies
        working-directory: ./frontend
        run: npm ci

      - name: Build Frontend
        working-directory: ./frontend
        run: npm run build

      - name: Upload Frontend Build Artifacts
        uses: actions/upload-artifact@v4
        with:
          name: frontend-build
          path: |
            frontend/out/
          retention-days: 1

  # APIビルドジョブ
  test-api:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repository
        uses: actions/checkout@v4

      - name: Setup Node.js for API
        uses: actions/setup-node@v4
        with:
          node-version: "18"
          cache: "npm"
          cache-dependency-path: "api/package-lock.json"

      - name: Install API Dependencies
        working-directory: ./api
        run: npm install

      - name: Build API
        working-directory: ./api
        run: npm run build

      - name: Run API Tests
        working-directory: ./api
        run: npm run test

  # Azure Static Web Appsデプロイジョブ
  deploy-swa:
    needs: [build-frontend, test-api]
    runs-on: ubuntu-latest
    environment: production
    env:
      APP_LOCATION: ${{ vars.APP_LOCATION || 'deploy/frontend' }}
      OUTPUT_LOCATION: ${{ vars.OUTPUT_LOCATION || '.' }}
      API_LOCATION: ${{ vars.API_LOCATION || 'api' }}

    steps:
      - name: Checkout Repository
        uses: actions/checkout@v4

      - name: Download Frontend Artifacts
        uses: actions/download-artifact@v4
        with:
          name: frontend-build
          path: ./deploy/frontend
      - name: Copy Static Web App Configuration
        run: |
          cp frontend/config/prod/staticwebapp.config.json deploy/frontend/
      - name: check
        working-directory: ./deploy/frontend/
        run: |
          ls -la
          cat staticwebapp.config.json

      - name: Deploy to Azure Static Web Apps
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          action: "upload"
          app_location: ${{ env.APP_LOCATION }}
          api_location: ${{ env.API_LOCATION }}
          output_location: "${{ env.OUTPUT_LOCATION }}"
          skip_app_build: true
          skip_api_build: false

# フロントエンドジョブでのキャッシュ設定
- name: Setup Node.js for Frontend
  uses: actions/setup-node@v4
  with:
    node-version: "18"
    cache: "npm"
    cache-dependency-path: "frontend/package-lock.json"

# APIジョブでのキャッシュ設定
- name: Setup Node.js for API
  uses: actions/setup-node@v4
  with:
    node-version: "18"
    cache: "npm"
    cache-dependency-path: "api/package-lock.json"

# ビルドジョブでのアーティファクト保存
- name: Upload Frontend Build Artifacts
  uses: actions/upload-artifact@v4
  with:
    name: frontend-build
    path: |
      frontend/out/
    retention-days: 1

# デプロイジョブでのアーティファクト復元
- name: Download Frontend Artifacts
  uses: actions/download-artifact@v4
  with:
    name: frontend-build
    path: ./deploy/frontend

- name: Build API
  working-directory: ./api
  run: npm run build

- name: Run API Tests
  working-directory: ./api
  run: npm run test

- name: Run API Tests
  working-directory: ./api
  run: npm run test
  continue-on-error: false  # テスト失敗時にワークフローを停止

# 将来的な拡張例
- name: Notify Test Failure
  if: failure()
  uses: actions/github-script@v6
  with:
    script: |
      github.rest.issues.createComment({
        issue_number: context.issue.number,
        owner: context.repo.owner,
        repo: context.repo.repo,
        body: 'APIテストが失敗しました。詳細はワークフローログを確認してください。'
      })

environment: production
env:
  APP_LOCATION: ${{ vars.APP_LOCATION || 'deploy/frontend' }}
  OUTPUT_LOCATION: ${{ vars.OUTPUT_LOCATION || '.' }}
  API_LOCATION: ${{ vars.API_LOCATION || 'api' }}

{
  "userId": "github|あなたのGitHubユーザーID",
  "name": "あなたのGitHubユーザー名",
  "email": "あなたのGitHubユーザー名",
  "provider": "github",
  "roles": ["authenticated"],
  "isAuthenticated": true
}

{
  "userId": null,
  "name": null,
  "email": null,
  "provider": null,
  "roles": [],
  "isAuthenticated": false
}

{
  "userId": "github|あなたのGitHubユーザーID",
  "message": "こんにちは、ユーザーgithub|あなたのGitHubユーザーIDさん！",
  "timestamp": "2024-12-15T15:45:30.000Z",
  "userNumber": 数値
}

{
  "route": "/protected/*",
  "allowedRoles": ["authenticated"]
}

#!/bin/bash

# エラー時に停止
set -e

log_info() { echo -e "\033[1;34m$1\033[0m"; }
log_success() { echo -e "\033[1;32m$1\033[0m"; }
log_warning() { echo -e "\033[1;33m$1\033[0m"; }
log_error() { echo -e "\033[1;31m$1\033[0m"; }


CONFIG_FILE="$(git rev-parse --show-toplevel)/.env" 2>/dev/null || CONFIG_FILE=".env"

if [ -f "$CONFIG_FILE" ]; then
    log_info "📁 設定ファイル読み込み: $CONFIG_FILE"
    source "$CONFIG_FILE"
else
    log_error "⚠️  設定ファイルが見つかりません: $CONFIG_FILE"
    log_error "   .env.example をコピーして設定してください"
    exit 1
fi

# 必要な環境変数の確認
required_vars=("RESOURCE_GROUP_NAME" "STATIC_WEB_APP_NAME")
for var in "${required_vars[@]}"; do
    if [ -z "${!var}" ]; then
        log_error "エラー: 環境変数 $var が設定されていません"
        exit 1
    fi
done

log_info "🎯 削除対象: $STATIC_WEB_APP_NAME (リソースグループ: $RESOURCE_GROUP_NAME)"

# Azure CLIがインストールされているかチェック
if ! command -v az &> /dev/null; then
    log_error "Azure CLI (az) がインストールされていません"
    log_error "インストール方法: https://docs.microsoft.com/cli/azure/install-azure-cli"
    exit 1
fi

# Azure CLIの認証チェック
if ! az account show &> /dev/null; then
    log_error "Azure CLIが認証されていません"
    log_error "認証方法: az login"
    exit 1
fi

# リソースグループの存在確認
log_info ""
log_info "📦 リソースグループの確認..."
if ! az group show --name $RESOURCE_GROUP_NAME &> /dev/null; then
    log_warning "⚠️  リソースグループ '$RESOURCE_GROUP_NAME' が見つかりません"
    log_warning "   削除する必要がありません"
    exit 0
else
    log_success "✅ リソースグループ確認: $RESOURCE_GROUP_NAME"
fi

# Static Web Appリソースの存在確認
log_info ""
log_info "🔍 Azure Static Web App リソースを確認中..."

# 指定されたリソースの存在確認
if az staticwebapp show \
    --name "$STATIC_WEB_APP_NAME" \
    --resource-group "$RESOURCE_GROUP_NAME" \
    --output none 2>/dev/null; then
    
        # リソース詳細の取得
    SWA_DETAILS=$(az staticwebapp show \
        --name "$STATIC_WEB_APP_NAME" \
        --resource-group "$RESOURCE_GROUP_NAME" \
        --query "{name:name, defaultHostname:defaultHostname, sku:sku.name, location:location}" \
        -o json)
    
    log_success "✅ 削除対象リソースが見つかりました:"
    echo "$SWA_DETAILS" | jq -r '"  • 名前: \(.name)"'
    echo "$SWA_DETAILS" | jq -r '"  • URL: \(.defaultHostname)"'
    echo "$SWA_DETAILS" | jq -r '"  • プラン: \(.sku)"'
    echo "$SWA_DETAILS" | jq -r '"  • リージョン: \(.location)"'
    
    RESOURCE_EXISTS=true
else
    log_warning "⚠️  指定されたAzure Static Web App '$STATIC_WEB_APP_NAME' が見つかりません"
    log_warning "   リソースグループ: $RESOURCE_GROUP_NAME"
    log_info "削除する必要がありません"
    exit 0
fi

# 確認プロンプト
log_warning ""
log_warning "⚠️  以下の操作を実行します:"
log_warning "   1. Azure Static Web App '$STATIC_WEB_APP_NAME' の削除"
log_warning "   2. リソースグループ '$RESOURCE_GROUP_NAME' は保持します"
log_warning "   3. GitHub環境設定は保持します"
log_warning ""

read -p "続行しますか？ (y/N): " -n 1 -r
echo
if [[ ! $REPLY =~ ^[Yy]$ ]]; then
    log_info "操作をキャンセルしました"
    exit 0
fi

# === Azure Static Web App リソースの削除 ===

log_info ""
log_info "🗑️  Azure Static Web App リソースを削除中..."

log_info "🔧 削除中: $STATIC_WEB_APP_NAME"

if az staticwebapp delete \
    --name "$STATIC_WEB_APP_NAME" \
    --resource-group "$RESOURCE_GROUP_NAME" \
    --yes 2>/dev/null; then
    log_success "✅ 削除完了: $STATIC_WEB_APP_NAME"
else
    log_error "❌ 削除失敗: $STATIC_WEB_APP_NAME"
    exit 1
fi

log_success "✅ Azure Static Web App リソースの削除が完了しました"

# === 削除完了サマリー ===

log_success ""
log_success "🎉 クリーンアップが完了しました！"
log_success ""
log_success "📋 実行内容サマリー:"
log_success "  ✅ Azure Static Web App削除: $STATIC_WEB_APP_NAME"
log_success "  ✅ リソースグループ保持: $RESOURCE_GROUP_NAME"
log_success "  ✅ GitHub環境設定保持: 変更なし"
log_success ""
log_success "📌 注意事項:"
log_success "  • リソースグループ '$RESOURCE_GROUP_NAME' は保持されています"
log_success "  • GitHub環境設定はそのまま残っているので、再デプロイ可能です"
log_success ""
log_success "🚀 Azure リソースのクリーンアップ完了！"

chmod +x ./infra/scripts/cleanup.sh

./infra/scripts/cleanup.sh

🎯 削除対象: swa-api-deploy-bicep (リソースグループ: swa-bicep-test)
⚠️  以下の操作を実行します:
 1. Azure Static Web App 'swa-api-deploy-bicep' の削除
 2. リソースグループ 'swa-bicep-test' は保持します
 3. GitHub環境設定は保持します

続行しますか？ (y/N):