GitHub Pages にAngular アプリをデプロイするまで

## やったこと
GitHub Pages に`ng new`しただけのAngular アプリをデプロイした。

## 1. リポジトリ作成と準備
↓まずはGitHub でリポジトリを作成した。
https://github.com/magurouhiru/hello

続いてローカルにcloneして`npx ng new`してコミットした。

次にSettingsでSourceをGitHub Actions に変更した。
サンプル的なのがあったので、いったんそのまま使って見ることにした。
ついでにテストもできるようにした。
![1-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/822099/8711d15a-1d16-e052-a0de-02881b254900.png)

変更せずにコミットしたら、早速動いた。
どうやらビルドもデプロイもできてすげーとなった。
![1-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/822099/c5bef8cf-a03c-ea6e-e23d-d4be0e334572.png)


早速GitHub Pages に移動したらページがでてきた。

これでめでたしめでたし...
![1-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/822099/6bc3a4ad-1bd3-03e9-a8e4-87644f11d0f7.png)

### ...ってこれREADME.mdじゃない？
GitHub Actions の画面からGitHub Pages へアップロードしたファイルを見たらリポジトリと同じだし。
ちゃんとGitHub Actions 書き換えないとダメそう。（それはそう）

## 2. GitHub Actions をいじってみる
とはいっても、ちょっと触ってコミットして動かして...って時間かかるし手間。
ローカルで触れる手段ないかなあ...
一応それっぽいのはあったけど、よくわかんなったからブランチ切ってそっちでやった。

改めて状況整理
使っているサンプル
　jekyll-gh-pages.yml

できてること
　リポジトリからチェックアウトの取得
　Pages のセットアップ？
　成果物のアップロード
　Pages へのデプロイ

できてないこと
　ビルド（リポジトリからチェックアウトしたまま変化なし）

つまり...
```aiignore
jobs:
  # Build job
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout                      ←OK
        uses: actions/checkout@v4
      - name: Setup Pages                   ←OK?
        uses: actions/configure-pages@v5
      - name: Build with Jekyll             ←NG
        uses: actions/jekyll-build-pages@v1
        with:
          source: ./
          destination: ./_site
      - name: Upload artifact               ←OK
        uses: actions/upload-pages-artifact@v3

  # Deployment job
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages        ←OK
        id: deployment
        uses: actions/deploy-pages@v4
```
ということでbuild だけ変えれば何とかなるのでは？
どうすればいいんだろう...

そういえばNode.js のテストやるサンプルはどうだっけ？
こちらの状況はこんな感じ。

使っているサンプル
　node.js.yml

できてること
　リポジトリからチェックアウトの取得
　Node.js のセットアップ
　ビルド

できてないこと
　テスト？（chromなんとかエラーみたいなのがずっとでてる。）
 
つまり
```aiignore
jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [18.x, 20.x, 22.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
    - uses: actions/checkout@v4                     ←OK
    - name: Use Node.js ${{ matrix.node-version }}  ←OK
      uses: actions/setup-node@v4
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
    - run: npm ci                                   ←OK
    - run: npm run build --if-present               ←OK
    - run: npm test                                 ←NG
```
ということで、ビルドまでの記述を真似たらいけるのでは？
できたものがこちら
```aiignore
jobs:
  # Build job
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Use Node.js 20.x
        uses: actions/setup-node@v4
        with:
          node-version: 20.x
          cache: 'npm'
      - run: npm ci
      - run: npm run build
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./dist/mysite/browser

  # Deployment job
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4
```
はい、そのまんまです。
一応ちょっとは触ったけど誤差？
とりあえずGitHub Actions はエラーなくなったのでOK。

詳細は↓参照
https://github.com/magurouhiru/mysite/pull/2#issue-2512350809

これでめでたしめでたし...
![2-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/822099/9dd50c23-a3c4-cd82-6626-4bb4fc766692.png)

### そんなことはなかったぜ
↑はGitHub Pages のブラウザ画面の切り取りだけど、見ての通り真っ白だった。
理由はindex.html は読み込めたけど他のファイルが読み込めなかったから。

## 3. package.json を見直す
GitHub Pages が真っ白の理由はURLにありました。
ドメインの後にリポジトリ名がきているので、リポジトリ名分ずれちゃったみたい。
例：https://magurouhiru.github.io/mysite/

なので↓見たくオプションをつけてビルドするようにpackage.json を修正すればOK
`ng build --base-href /your_project_name/`

ついでにGitHub Actions のテストが失敗していたのでそれも直しました。
こちらはデフォルトの`ng test`だけだとブラウザ開いて結果を表示する仕組みになっていて、それが悪さするようでした。
公式に↓こう書いたらいいよとあったので、その通りpackage.json を修正した。
`ng test --no-watch --no-progress --browsers=ChromeHeadless`

その結果...

![3-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/822099/ce7b5266-986b-70c9-4f65-f81dfc519e24.png)

### うまくいった～
めでたしめでたし

詳細見たい人は↓見て
https://github.com/magurouhiru/mysite/releases/tag/v0.1.0
https://magurouhiru.github.io/mysite/