今回は、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
# yarn の場合は下の行参考
# run: yarn install --frozen-lockfile
- 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
ここまで来れば、あとはpush すれば自動で反映されるはずです！
お疲れ様でした！
ここに辿り着くまで……。
最初に試したコード
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: ftpsserver-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-終わりに
GitHub Actionsを使用したReactアプリの自動デプロイメントの設定方法でした！
以上です！この記事を読んでくださりありがとうございます！
最後に参考貼っておきますね
参考URL
Github 公式
ヘテムル
https://tech.pepabo.com/2020/03/11/github-actions-for-lolipop-and-heteml
ロリポップ公式Note