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

5月 23, 2024

—

コイアイちゃん

in 未分類

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

動作したコード

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

１, 最初にすること

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

2, Github側ですること

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

Name	Secret
FTP_HOST	ＦＴＰサーバー
FTP_USERNAME	ＦＴＰアカウント
FTP_PASSWORD	ＦＴＰパスワード

を入力します。

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

問題１　Node Version の警告

最初の問題は、Node.js 16のサポートが終了したため、actions/checkout@v2とactions/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'

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

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

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

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

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

問題４　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-