GitHub Actionsを使ったReactアプリのデプロイメント: ロリポップへのアップロード

今回は、GitHub Actionsを使ってReactアプリをロリポップサーバーにデプロイする手順とその過程で遭遇した問題と解決方法を共有します。

動作したコード

詰まった点は後に書くとして、最初に動くコードを共有しますね!

1, 最初にすること

ReactアプリをGithubにプッシュ!

2, Github側ですること

SettingsタブからSecrets and variables を開いて、「New Repository Secret」を押す。
ロリポップのアカウント情報/パスワード変更を開いて。それぞれ

NameSecret
FTP_HOSTFTPサーバー
FTP_USERNAMEFTPアカウント
FTP_PASSWORDFTPパスワード

を入力します。

3, コードを追加する

今度は自分のコードを開いて

ルートディレクトリに .github/worflows フォルダを作り、
その中に lolipop.yml を作成する。

name: Deploy React App to Lolipop

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: Cache dependencies
        uses: actions/cache@v4
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-

      - name: Install dependencies
        run: npm install

      - name: Build the React app
        run: |
          CI=false npm run build

      - name: Upload to Lolipop via FTP
        uses: SamKirkland/FTP-Deploy-Action@4.3.0
        with:
          server: ${{ secrets.FTP_HOST }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          server-dir: hoge/
          local-dir: build/
          protocol: ftps

ここに辿り着くまで……。

最初に試したコード

lolipop.yml ファイルの中は以下の通りでした。

name: Deploy React App to Lolipop

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '16'

      - name: Install dependencies
        run: npm install

      - name: Build the React app
        run: npm run build

      - name: Upload to Lolipop via FTP
        uses: SamKirkland/FTP-Deploy-Action@4.3.0
        with:
          server: ${{ secrets.FTP_HOST }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          local-dir: build
          server-dir: /public_html/hoge

問題1  Node Version の警告

最初の問題は、Node.js 16のサポートが終了したため、actions/checkout@v2actions/setup-node@v2をNode.js 20に更新する必要があるという警告でした。

Node.js 16 actions are deprecated. Please update the following actions to use Node.js 20: actions/checkout@v2, actions/setup-node@v2. For more information see: https://github.blog/changelog/2023-09-22-github-actions-transitioning-from-node-16-to-node-20/.

警告の内容

以下のように書き換えることでOK

uses: actions/checkout@v4
uses: actions/setup-node@v4
with:
  node-version: '20'

問題2 警告で処理がストップしてしまう

今回のコードではお恥ずかしいことに、ESLintで警告が出ていました。
しかし、今回は一旦アップロードしたい……。

ということで、警告が出てもアップロードできるように以下のコードを追加しました。

run: |
  CI=false npm run build

問題3 ディレクトリのミス

- name: Upload to Lolipop via FTP
        uses: SamKirkland/FTP-Deploy-Action@4.3.0
        with:
          server: ${{ secrets.FTP_HOST }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          server-dir: hoge/
          local-dir: build/
          protocol: ftps

server-dir のところですが、必ず最後に”/”をつけるのを忘れずにしましょう。

問題4 Actionsが遅すぎる

Pushしてからアップロードされるまで時間がかかってしまいます。
そのため、キャッシュの設定を追加しました。

- name: Cache dependencies
        uses: actions/cache@v4
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-

終わりに

GitHub Actionsを使用したReactアプリの自動デプロイメントの設定方法でした!
以上です!この記事を読んでくださりありがとうございます!

最後に参考貼っておきますね

参考URL

Github 公式

https://docs.github.com/en/actions/creating-actions/metadata-syntax-for-github-actions#runs-for-javascript-actions

ヘテムル

https://tech.pepabo.com/2020/03/11/github-actions-for-lolipop-and-heteml

ロリポップ公式Note

https://note.com/mclolipopjp/n/n0e8dace1404b