SPFx Webパーツのデプロイを完全自動化する：Claude Code + GitHub Actions + Playwright

1
2
3
4
5
6
7
8
9

# 自己署名証明書を生成
openssl req -x509 -newkey rsa:2048 -keyout spfx-deploy-key.pem \
  -out spfx-deploy-cert.pem -days 365 -nodes \
  -subj "/CN=spfx-deploy"

# pfx形式に変換（Azureポータルへのアップロード用）
openssl pkcs12 -export -out spfx-deploy.pfx \
  -inkey spfx-deploy-key.pem -in spfx-deploy-cert.pem \
  -passout pass:""

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144

name: SPFx Deploy to SharePoint Online

on:
  push:
    branches: ["main"]
    paths: ["src/**", "sharepoint/**", "package.json"]
  workflow_dispatch:
    inputs:
      target_site:
        description: "デプロイ先サイトURL"
        required: false
        default: ""

jobs:
  build-and-test:
    runs-on: ubuntu-latest
    outputs:
      package-name: ${{ steps.package-info.outputs.name }}
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "18"
          cache: "npm"

      - name: Install dependencies
        run: npm ci

      - name: Lint
        run: npm run lint

      - name: Unit tests
        run: npm test -- --ci --coverage

      - name: Bundle (production)
        run: npx gulp bundle --ship

      - name: Package solution
        run: npx gulp package-solution --ship

      - name: Get package name
        id: package-info
        run: |
          PKG=$(ls sharepoint/solution/*.sppkg | head -1 | xargs basename)
          echo "name=$PKG" >> $GITHUB_OUTPUT          

      - name: Upload .sppkg artifact
        uses: actions/upload-artifact@v4
        with:
          name: spfx-package
          path: sharepoint/solution/*.sppkg

  deploy-to-spo:
    needs: build-and-test
    runs-on: ubuntu-latest
    environment: production
    steps:
      - uses: actions/checkout@v4

      - name: Download .sppkg artifact
        uses: actions/download-artifact@v4
        with:
          name: spfx-package
          path: ./package

      - name: Install CLI for Microsoft 365
        run: npm install -g @pnp/cli-microsoft365

      - name: Setup certificate
        run: |
          echo "${{ secrets.AZURE_CERT_PFX_B64 }}" | base64 -d > /tmp/deploy.pfx          

      - name: Login to Microsoft 365
        run: |
          m365 login \
            --authType certificate \
            --certificateFile /tmp/deploy.pfx \
            --appId "${{ secrets.AZURE_CLIENT_ID }}" \
            --tenant "${{ secrets.AZURE_TENANT_ID }}"          

      - name: Upload to App Catalog
        id: upload-app
        run: |
          PKG_PATH=$(ls ./package/*.sppkg | head -1)
          APP_ID=$(m365 spo app add \
            --filePath "$PKG_PATH" \
            --appCatalogUrl "${{ secrets.SPO_APP_CATALOG_URL }}" \
            --overwrite \
            --output json | jq -r '.UniqueId')
          echo "app-id=$APP_ID" >> $GITHUB_OUTPUT
          echo "Uploaded app ID: $APP_ID"          

      - name: Deploy app (tenant-wide)
        run: |
          m365 spo app deploy \
            --id "${{ steps.upload-app.outputs.app-id }}" \
            --appCatalogUrl "${{ secrets.SPO_APP_CATALOG_URL }}"          

      - name: Install app to target site
        run: |
          TARGET="${{ github.event.inputs.target_site || secrets.SPO_TARGET_SITE_URL }}"
          m365 spo app install \
            --id "${{ steps.upload-app.outputs.app-id }}" \
            --siteUrl "$TARGET"          

      - name: Cleanup certificate
        if: always()
        run: rm -f /tmp/deploy.pfx

  functional-verify:
    needs: deploy-to-spo
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "18"
          cache: "npm"

      - name: Install test dependencies
        run: |
          npm ci
          npx playwright install chromium --with-deps          

      - name: Run Playwright smoke tests
        env:
          SPO_SITE_URL: ${{ secrets.SPO_TARGET_SITE_URL }}
          AZURE_CLIENT_ID: ${{ secrets.AZURE_CLIENT_ID }}
          AZURE_TENANT_ID: ${{ secrets.AZURE_TENANT_ID }}
          AZURE_CERT_PFX_B64: ${{ secrets.AZURE_CERT_PFX_B64 }}
        run: npx playwright test --project=chromium e2e/spfx-smoke.spec.ts

      - name: Upload test results
        if: always()
        uses: actions/upload-artifact@v4
        with:
          name: playwright-results
          path: |
            playwright-report/
            test-results/            

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

import { chromium, FullConfig } from "@playwright/test";
import * as msal from "@azure/msal-node";
import * as fs from "fs";

async function globalSetup(config: FullConfig) {
  const pfxBuffer = Buffer.from(process.env.AZURE_CERT_PFX_B64!, "base64");

  const pca = new msal.ConfidentialClientApplication({
    auth: {
      clientId: process.env.AZURE_CLIENT_ID!,
      authority: `https://login.microsoftonline.com/${process.env.AZURE_TENANT_ID}`,
      clientCertificate: {
        thumbprintSha256: process.env.AZURE_CERT_THUMBPRINT!,
        privateKey: pfxBuffer.toString(),
      },
    },
  });

  const result = await pca.acquireTokenByClientCredential({
    scopes: [`${process.env.SPO_SITE_URL}/.default`],
  });

  // アクセストークンをファイルに保存
  fs.writeFileSync("/tmp/spo-token.json", JSON.stringify(result));
}

export default globalSetup;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

import { test, expect } from "@playwright/test";

const SPO_SITE = process.env.SPO_SITE_URL!;
const TEST_PAGE = `${SPO_SITE}/SitePages/webpart-test.aspx`;

test.describe("SPFx Webパーツ動作確認", () => {
  test("Webパーツが正常にレンダリングされる", async ({ page }) => {
    // SharePointページへナビゲート
    await page.goto(TEST_PAGE);

    // Webパーツのコンテナが表示されるまで待機
    await expect(
      page.locator('[data-sp-web-part-id]').first()
    ).toBeVisible({ timeout: 30000 });

    // Webパーツ固有の要素を確認（コンポーネント名に合わせて変更）
    await expect(
      page.locator(".your-webpart-root-class")
    ).toBeVisible();

    // エラーが発生していないことを確認
    const errorBoundary = page.locator('[class*="errorBoundary"]');
    await expect(errorBoundary).not.toBeVisible();
  });

  test("Webパーツのプロパティが機能する", async ({ page }) => {
    await page.goto(TEST_PAGE);

    // 具体的な機能テスト（プロジェクトに合わせてカスタマイズ）
    const webpart = page.locator("[data-sp-web-part-id]").first();
    await expect(webpart).not.toContainText("Error");

    // APIコールが成功しているか確認
    const responses = await page.waitForResponse(
      (resp) => resp.url().includes("/_api/") && resp.status() < 400
    );
    expect(responses).toBeTruthy();
  });
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

SPFxプロジェクトの検証・デプロイ・動作確認を実行してください。

## 実行手順

1. **事前確認**
   - `git status` でコミット済みか確認
   - `package.json` のバージョンをチェック

2. **ビルド & テスト**
   ```bash
   npm ci
   npm run lint
   npm test
   npx gulp bundle --ship
   npx gulp package-solution --ship

1
2
3
4
5
6

# .env.local
AZURE_TENANT_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
AZURE_CLIENT_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
AZURE_CERT_THUMBPRINT=ABC123...
SPO_APP_CATALOG_URL=https://tenant.sharepoint.com/sites/appcatalog
SPO_TARGET_SITE_URL=https://tenant.sharepoint.com/sites/test

1
2
3

# トークンキャッシュをクリア
m365 logout
m365 login --authType browser  # ブラウザ認証で再試行

1
2

# テナントのApp Catalog URLを確認
m365 spo tenant appcatalogurl get