React.js + Github Actions でVPSにデプロイする、なんちゃってCI/CDを作ってみた

CI/CDとしてGithub ActionsでビルドしてVPSにReactの出力ファイルをデプロイする方法を探してるとGithubpageとか色々でてくるのですが、なかなかうまい具合にハマる記事が見つからなかったのでいろいろな情報をまとめつつようやく一つの形に落ち着いた。覚書としてこちらに記載しようと思う。
CICDを作るためのymlは結局この形に落ち着いた。

name: CI

on: push

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: checkout
        uses: actions/checkout@v4
      - name: setup-node
        uses: actions/setup-node@v3
        with:
          node-version: "20"
          cache: npm
      - name: install dependencies
        run: npm i
        shell: bash
      - name: build
        run: npm ci && npm run build
        shell: bash
        env:
          CI: false
      - name: Copy folder content recursively to vps
        uses: garygrossgarten/github-action-scp@release
        with:
          local: build
          host: ${{ secrets.SERVER_IP }}
          username: ${{ secrets.SERVER_USERNAME }}
          password: ${{ secrets.SERVER_PASSWORD }}
          remote: ${{ secrets.PROJECT_PATH }}

Pushをトリガーに動く。Jobsは最初複数書いてたのだが、並列処理してくれているので、1つにまとめた。複数書く場合はフロントエンドとバックエンドのビルドが必要なときとか、そういうのでよさそう。
調べたらでてくるようなよくあるコードがほとんどだが問題は後半。
VPSにデプロイする方法を2つ見つけました。

１．ごにょごにょしてSSH接続、ymlでVPSに飛んで「プル」する（つまりリモートリポジトリの操作と設定が必要）
２．単にファイルをSSHで接続したあとに該当のパスまで移動して転送するだけ（VPS内でのリポジトリ設定は不要）

今回はReactでSPAを作る単純なやり方で、Next.jsを使うわけではないので２を採用した。Githubから秘密鍵や公開鍵でSSH認証する方法はそこら中にあると思うので調べてください←
.envだと.gitignoreで受け付けれないしセキュリティ上も危ないので、Githubから該当リポジトリの設定→セキュリティ→Secrets and Variables→Actions→Repository Secretsに変数を登録してsecretsを作るのがいい。というか、UIが２０２４年７月時点で、去年の記事と比較しても変わっていたため、どこにいれるのか探すの面倒だった。
また、ここは大事なところなのですが、ymlはタブでのインデントは受け付けてくれず、インデントする場合は半角スペースにしたほうがいいようです。これ知らなくてずっとハマってました。

Reactで色々設定してたら画面が真っ白になりましたが、それはよくあるやつで、package.jsonに "homepage": "."; 追加することで治りましたが、Actions経由でデプロイすると（Actionsだけに限らない話ですが）キャッシュが強く残る場合もあるので、スーパーリロードすることをおすすめします。これに気づかず時間費やしてた人がいるんですよ、私です←

本格的なCI/CDではないと思いますが、新しくGithub ActionsでCICDやってみたいという人の練習や参考になれば幸いです。