XserverにLaravel Inertia React をデプロイする(GitHubActions)

# はじめに

こんにちは、エンジニアのkeitaMaxです。

今回は、XserverにLaravel Inertia React をGitHubActionsを使用してデプロイしようと思います。

# GitHubActionsを以下のように作成します。

```yml:deploy.yml
name: deploy

on:
  push:
    tags:
      - 'stg.v.*'

jobs:
  deploy:
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: ./src
    steps:
      - uses: actions/checkout@v2
      - name: dokcer-compose up
        run: |
          docker compose up -d
      - name: composer install
        run: |
          docker compose exec app composer install
      - name: Copy .env
        run: |
          docker compose exec app php -r "file_exists('.env') || copy('.env.example', '.env');"
      - name: Generate key
        run: |
          docker compose exec app php artisan key:generate
      - name: npm run install
        run: |
          docker compose exec app npm install
      - name: npm build
        run: |
          docker compose exec app npm run build
      - name: FTP-Deploy-Action
        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
        with:
          server: ${{ secrets.PRD_FTP_SERVER }}
          username: ${{ secrets.PRD_FTP_USERNAME }}
          password: ${{ secrets.PRD_FTP_PASSWORD }}
          local-dir: ./src/
          server-dir: ./
```

こちらリリースタグを`stg.v.1`のようにした時にデプロイできるようにしました。

下記の部分でやっております。

```
on:
  push:
    tags:
      - 'stg.v.*'
```

参考にした記事は記事の一番下にリンクを置いておきます。

# GitHubの設定

GitHubに以下の３つを登録しなくてはいけません。

```
          FTP_SERVER: ${{ secrets.FTP_SERVER }}
          FTP_USERNAME: ${{ secrets.FTP_USERNAME }}
          FTP_PASSWORD: ${{ secrets.FTP_PASSWORD }}
```

こちらはxserverのサーバパネルから確認することができます。
サーバーパネルの`サブFTPアカウント設定`から`サブFTPアカウント設定`をします。

![スクリーンショット 2024-08-29 11.45.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/f811e2df-95e9-6b7f-3bbb-92c65db7af69.png)


そこで設定したFTPユーザーIDが`FTP_USERNAME`になります。
また、同じ画面で設定したパスワードが`FTP_PASSWORD`になります。

`FTP_SERVER`はサーバのホスト名となり、`sv***.xserver.jp`のようなものです。
サーバーパネルのURLについています。

参考URL：https://www.xserver.ne.jp/manual/man_ftp_setting.php

これをGitHubに設定します。

`リポジトリ → Settings → secrets and variables → actions`

から設定できます。

設定できると以下のようになります。

![スクリーンショット 2024-08-29 11.46.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/d4b48ec8-66ad-1533-d4c8-22c0f661bd74.png)

# 動かしてみる

実際にタグを打って動かしてみます。

GuiHubのリポジトリのコードの右下にある`Releases`をクリックします。

![スクリーンショット 2024-08-29 11.47.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/99f2b268-4719-13c1-ec73-2fe4191c96e4.png)


`Draft a new release`をクリックします。

![スクリーンショット 2024-08-29 11.48.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/6f0a54a2-62b1-c8c9-6cd5-00fc1be6012c.png)

`Choose tag`から`stg.v.2`みたいな感じでタグの名前を入力し、＋ボタンを押して作成します。

![スクリーンショット 2024-08-29 11.49.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/403d04a2-0f42-1035-5799-d9972b965ae0.png)

最後にPublishリリースをおします。

![スクリーンショット 2024-08-29 11.50.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/e7edff76-2174-2e34-d8e1-5b844fcaaa2e.png)

すると、以下のようにGitHubActionが動き、デプロイできます。

![スクリーンショット 2024-08-29 11.54.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/abc21813-11d8-aeef-13d1-7c50013894c9.png)


# おわりに

この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。

最後まで読んでいただきありがとうございました！

# 次の記事

https://qiita.com/keitaMax/items/3a8ab2a013b493220438

# 参考

https://qiita.com/ikeyansaza/items/96fcd40b5a6ea616e913

https://www.xserver.ne.jp/manual/man_ftp_setting.php