CI/CDのセットアップ① (GitHub & Azure)

npm create vite@latest . -- --template react-ts

PS C:\MAMP\htdocs\ci_cd_projects\myapp> npm i
npm error code ERR_INVALID_ARG_TYPE
npm error The "file" argument must be of type string. Received undefined
npm error A complete log of this run can be found in: C:\Users\admin\AppData\Local\npm-cache\_logs\2025-09-07T08_10_17_935Z-debug-0.log    
PS C:\MAMP\htdocs\ci_cd_projects\myapp> 

$env:ComSpec = "$env:windir\System32\cmd.exe"
npm i

# OKであれば管理者権限で PowerShell を起動して以下のコマンドで永続化します。
setx COMSPEC "%SystemRoot%\System32\cmd.exe" /M

# 保険のためnpmの設定ファイルにも設定を追加します。
npm config set script-shell "C:\\Windows\\System32\\cmd.exe"

npm i -D vitest
npm i -D @vitejs/plugin-react
npm i -D @testing-library/react
npm i -D @testing-library/jest-dom
npm i -D @types/jest
npm i -D @vitest/coverage-v8
npm i -D jsdom

  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview",
    "test": "vitest",
    "test:run": "vitest run",
    "coverage": "vitest run --coverage"
  },

import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: './src/setupTests.ts',
    coverage: {
      provider: 'v8',
      reporter: ['text', 'html'],
      reportsDirectory: './coverage',
    },
  },
})

import '@testing-library/jest-dom';

import { render, screen } from '@testing-library/react';
import App from './App';

test('renders hello message', () => {
  render(<App />);
  expect(screen.getByText(/hello/i)).toBeInTheDocument();
});

PS C:\MAMP\htdocs\ci_cd_projects\myapp> npm run test:run

> myapp@0.0.0 test:run
> vitest run


 RUN  v3.2.4 C:/MAMP/htdocs/ci_cd_projects/myapp

 ❯ src/App.test.tsx (1 test | 1 failed) 38ms
   × renders hello message 36ms
     → Unable to find an element with the text: /hello/i. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

<中略...>

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

<中略...>

 FAIL  src/App.test.tsx > renders hello message
TestingLibraryElementError: Unable to find an element with the text: /hello/i. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

 ❯ Object.getElementError node_modules/@testing-library/dom/dist/config.js:37:19
 ❯ node_modules/@testing-library/dom/dist/query-helpers.js:76:38
 ❯ node_modules/@testing-library/dom/dist/query-helpers.js:52:17
 ❯ node_modules/@testing-library/dom/dist/query-helpers.js:95:19
 ❯ src/App.test.tsx:6:17
      4| test('renders hello message', () => {
      5|   render(<App />);
      6|   expect(screen.getByText(/hello/i)).toBeInTheDocument();
       |                 ^
      7| });

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯

 Test Files  1 failed (1)
      Tests  1 failed (1)
   Start at  18:56:56
   Duration  1.22s (transform 53ms, setup 111ms, collect 132ms, tests 38ms, environment 537ms, prepare 123ms)

PS C:\MAMP\htdocs\ci_cd_projects\myapp> 

import './App.css'

function App() {
  return (<p>Hello! CI/CD</p>)
}

export default App

PS C:\MAMP\htdocs\ci_cd_projects\myapp> npm run test:run

> myapp@0.0.0 test:run
> vitest run


 RUN  v3.2.4 C:/MAMP/htdocs/ci_cd_projects/myapp

 ✓ src/App.test.tsx (1 test) 25ms
   ✓ renders hello message 24ms

 Test Files  1 passed (1)
      Tests  1 passed (1)
   Start at  19:10:14
   Duration  1.18s (transform 46ms, setup 113ms, collect 119ms, tests 25ms, environment 536ms, prepare 118ms)

PS C:\MAMP\htdocs\ci_cd_projects\myapp> 

PS C:\MAMP\htdocs\ci_cd_projects\myapp> npm run coverage

> myapp@0.0.0 coverage
> vitest run --coverage


 RUN  v3.2.4 C:/MAMP/htdocs/ci_cd_projects/myapp
      Coverage enabled with v8

 ✓ src/App.test.tsx (1 test) 25ms
   ✓ renders hello message 24ms

 Test Files  1 passed (1)
      Tests  1 passed (1)
   Start at  08:35:39
   Duration  1.94s (transform 92ms, setup 177ms, collect 184ms, tests 25ms, environment 941ms, prepare 169ms)

 % Coverage report from v8
----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
----------|---------|----------|---------|---------|-------------------
All files |   35.71 |       50 |      50 |   35.71 | 
 App.tsx  |     100 |      100 |     100 |     100 | 
 main.tsx |       0 |        0 |       0 |       0 | 1-10
----------|---------|----------|---------|---------|-------------------
PS C:\MAMP\htdocs\ci_cd_projects\myapp>

import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: './src/setupTests.ts',
    coverage: {
      provider: 'v8',
      reporter: ['text', 'html'],
      exclude: [ // 以下のファイルをテストから除外します
        'src/main.tsx',        // エントリーポイント
        '**/*.config.{ts,js}', // 設定ファイル全般
        '**/*.d.ts',           // 型定義全般 (必要に応じて)
        '**/*.stories.tsx',    // モックやストーリーファイル
        'dist/**',             // ビルド生成物 (アーティファクト)
      ],
    },
  },
})

name: CI

on:
  push:
    branches:
      - main

jobs:
  test-and-build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 24
          cache: 'npm'

      - run: npm ci
      - run: npm run lint
      - run: npm run test:run
      - run: npm run coverage
      - run: npm run build

      # HTML レポートを成果物として保存（Artifacts）
      - uses: actions/upload-artifact@v4
        if: always()
        with:
          name: coverage-html
          path: coverage

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

iwr -useb get.scoop.sh | iex

scoop install act

# この様になっていた場合は
{
	"auths": {},
	"credsStore": "desktop",
	"currentContext": "desktop-linux"
}
↓
# 以下の様に修正します
{
	"auths": {}
}

# ダウンロード
Invoke-WebRequest -Uri https://github.com/actions/runner/releases/download/v2.328.0/actions-runner-win-x64-2.328.0.zip -OutFile actions-runner-win-x64-2.328.0.zip
if((Get-FileHash -Path actions-runner-win-x64-2.328.0.zip -Algorithm SHA256).Hash.ToUpper() -ne '<ハッシュ値>'.ToUpper()){ throw 'Computed checksum did not match' }
Add-Type -AssemblyName System.IO.Compression.FileSystem ; [System.IO.Compression.ZipFile]::ExtractToDirectory("$PWD/actions-runner-win-x64-2.328.0.zip", "$PWD")

./config.cmd --url https://github.com/mimura-soft/myapp --token <トークン>

PS C:\MAMP\htdocs\ci_cd_projects\myapp\actions-runner> ./config.cmd --url https://github.com/mimura-soft/myapp --token <トークン>

--------------------------------------------------------------------------------
|        ____ _ _   _   _       _          _        _   _                      |
|       / ___(_) |_| | | |_   _| |__      / \   ___| |_(_) ___  _ __  ___      |
|      | |  _| | __| |_| | | | | '_ \    / _ \ / __| __| |/ _ \| '_ \/ __|     |
|      | |_| | | |_|  _  | |_| | |_) |  / ___ \ (__| |_| | (_) | | | \__ \     |
|       \____|_|\__|_| |_|\__,_|_.__/  /_/   \_\___|\__|_|\___/|_| |_|___/     |
|                                                                              |
|                       Self-hosted runner registration                        |
|                                                                              |
--------------------------------------------------------------------------------

# Authentication


√ Connected to GitHub

# Runner Registration

Enter the name of the runner group to add this runner to: [press Enter for Default] 

Enter the name of runner: [press Enter for DESKTOP-CQEA49P]

# Runner settings

Enter name of work folder: [press Enter for _work]

√ Settings Saved.

Would you like to run the runner as service? (Y/N) [press Enter for N]

PS C:\actions-runner> ./run.cmd
        1 個のファイルをコピーしました。

√ Connected to GitHub

Current runner version: '2.328.0'
2025-09-10 07:03:34Z: Listening for Jobs

name: CI

on:
  push:
    branches:
      - main

jobs:
  test-and-build:
    # runs-on: ubuntu-latest
    runs-on: [self-hosted, Windows, X64]
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 24
          # cache: 'npm'

      - run: npm ci
      - run: npm run lint
      - run: npm run test:run
      - run: npm run coverage
      - run: npm run build

      # HTML レポートを成果物として保存（Artifacts）
      - uses: actions/upload-artifact@v4
        if: always()
        with:
          name: coverage-html
          path: coverage

curl -o actions-runner-linux-x64-2.328.0.tar.gz -L https://github.com/actions/runner/releases/download/v2.328.0/actions-runner-linux-x64-2.328.0.tar.gz
echo "<ハッシュ値>  actions-runner-linux-x64-2.328.0.tar.gz" | shasum -a 256 -c
tar xzf ./actions-runner-linux-x64-2.328.0.tar.gz

./config.sh --url https://github.com/mimura-soft/myapp --token <トークン>

user01@DESKTOP-CQEA49P:~/actions-runner$ ./config.sh --url https://github.com/mimura-soft/myapp --token <トークン>

--------------------------------------------------------------------------------
|        ____ _ _   _   _       _          _        _   _                      |
|       / ___(_) |_| | | |_   _| |__      / \   ___| |_(_) ___  _ __  ___      |
|      | |  _| | __| |_| | | | | '_ \    / _ \ / __| __| |/ _ \| '_ \/ __|     |
|      | |_| | | |_|  _  | |_| | |_) |  / ___ \ (__| |_| | (_) | | | \__ \     |
|       \____|_|\__|_| |_|\__,_|_.__/  /_/   \_\___|\__|_|\___/|_| |_|___/     |
|                                                                              |
|                       Self-hosted runner registration                        |
|                                                                              |
--------------------------------------------------------------------------------

# Authentication


√ Connected to GitHub

# Runner Registration

Enter the name of the runner group to add this runner to: [press Enter for Default]

Enter the name of runner: [press Enter for DESKTOP-CQEA49P]

This runner will have the following labels: 'self-hosted', 'Linux', 'X64'
Enter any additional labels (ex. label-1,label-2): [press Enter to skip]

A runner exists with the same name
Would you like to replace the existing runner? (Y/N) [press Enter for N]
Enter the name of runner: [press Enter for DESKTOP-CQEA49P] wsl2-runner-01

This runner will have the following labels: 'self-hosted', 'Linux', 'X64'
Enter any additional labels (ex. label-1,label-2): [press Enter to skip]

√ Runner successfully added
√ Runner connection is good

# Runner settings

Enter name of work folder: [press Enter for _work]

√ Settings Saved.

user01@DESKTOP-CQEA49P:~/actions-runner$

user01@DESKTOP-CQEA49P:~/actions-runner$ ./run.sh

√ Connected to GitHub

Current runner version: '2.328.0'
2025-09-10 07:59:22Z: Listening for Jobs

name: CI

on:
  push:
    branches:
      - main

jobs:
  test-and-build:
    # runs-on: ubuntu-latest
    # runs-on: [self-hosted, Windows, X64]
    runs-on: [self-hosted, Linux, X64]
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 24
          # cache: 'npm'

      - run: npm ci
      - run: npm run lint
      - run: npm run test:run
      - run: npm run coverage
      - run: npm run build

      # HTML レポートを成果物として保存（Artifacts）
      - uses: actions/upload-artifact@v4
        if: always()
        with:
          name: coverage-html
          path: coverage