今回は、GitHub Actionsを使ってReactアプリをロリポップサーバーにデプロイする手順とその過程で遭遇した問題と解決方法を共有します。
詰まった点は後に書くとして、最初に動くコードを共有しますね！
ReactアプリをGithubにプッシュ！
SettingsタブからSecrets and variables を開いて、「New Repository Secret」を押す。
ロリポップのアカウント情報／パスワード変更を開いて。それぞれ
| Name | Secret |
|---|---|
| FTP_HOST | ＦＴＰサーバー |
| FTP_USERNAME | ＦＴＰアカウント |
| FTP_PASSWORD | ＦＴＰパスワード |
を入力します。
今度は自分のコードを開いて
ルートディレクトリに .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.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 のところですが、必ず最後に”/”をつけるのを忘れずにしましょう。
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アプリの自動デプロイメントの設定方法でした！
以上です！この記事を読んでくださりありがとうございます！
最後に参考貼っておきますね
Github 公式
ヘテムル
https://tech.pepabo.com/2020/03/11/github-actions-for-lolipop-and-heteml
ロリポップ公式Note
coiai
この記事もおすすめ
株式会社coiaiは、「想像できることを美しく実現」を掲げ、XR・Web・アプリ・システム開発およびDX支援を行う会社です。 創業2022年、東京都練馬区に本社を置き、要件のヒアリングからPoC（概念実証）、本番運用まで一貫して伴走します。 まずはお気軽にご相談ください。
主なご相談内容
詳しい会社情報は会社概要ページでご覧いただけます。
