Github Actionsのシークレットについて#

公式から引用

シークレットは、組織、リポジトリ、またはリポジトリ環境内に作成する変数です。 作成したシークレットは、GitHub Actionsワークフローで利用できます。 GitHub Actions でシークレットを読み取ることができるのは、シークレットをワークフローに明示的に含める場合のみです。

1.XserverのFTP情報の確認#

まずXserverのサーバー名・ユーザー名・パスワードを確認していきます。Xserverのサーバーパネルから

1. サブFTPアカウント設定
2. すべてのドメイン
3. FTPソフト設定（タブ）

の順番に選択していくとホスト名とユーザー名が確認できます。
パスワードに関してはXserverを登録した時のメールに書いてあります。
次にディレクトリ構成ですが、Xserverの場合public_htmlの中に配置する形なので/ドメイン名/public_html/という感じになります。

2.Githubのリポジトリ設定でFTP情報を登録#

Githubのリポジトリの画面から下記の順番に選択していきます。

1. Settings
2. 左サイドバーのSecrets And VariablesのActions
3. New repository secretボタン

次にsecretの変数名とFTPの情報を入力していきます。
変数名は何でも良いですが、後で使用するのでわかりやすい名前の方が良いと思います。
自分の場合は下記のようにしました。

3.Github Actions用のファイルを作成#

以下のディレクトリが必要になるので作成していきます。
ymlファイルの名前は何でも良いです。自分はdeploy.ymlにしました。

.github
└── workflows
    └── **.yml

次にymlファイルの中身を記述していきます。
ここで先ほどGithub Actionsのシークレットで定義した変数を使用します。

name: Deploy website on push
on:
  push:
    branches: [main]
jobs:
  deploy:
    name: Deploy
    runs-on: ubuntu-latest
    steps:
      - name: Get latest code
        uses: actions/checkout@v2
      - name: Use Node.js 18
        uses: actions/setup-node@v3
        with:
          node-version: '18'
      - name: Install pnpm
        run: npm install -g pnpm
      - name: Install dependencies
        run: pnpm install
      - name: Build Project
        run: pnpm build
      - name: Sync files
        uses: SamKirkland/FTP-Deploy-Action@4.3.1
        with:
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          local-dir: ./dist/
          server-dir: ${{ secrets.FTP_SERVER_DIR }}

最後に#

上記の設定が完了してmainブランチにプッシュするとデプロイが走ります。
GithubのActionsタブを選択するとデプロイされているかの確認ができます。もしデプロイが失敗した場合はログを確認してエラー内容を見ましょう。
自分の場合はFTP_SERVER_DIRのパス指定が間違っており、最初はそれでエラーが出ていました。