GitHub ActionsでFTP経由のデプロイ自動化

◆ Live配信スケジュール ◆
サイオステクノロジーでは、Microsoft MVPの武井による「わかりみの深いシリーズ」など、定期的なLive配信を行っています。
⇒ 詳細スケジュールはこちらから
⇒ 見逃してしまった方はYoutubeチャンネルをご覧ください

【5/21開催】Azure OpenAI ServiceによるRAG実装ガイドを公開しました
生成AIを活用したユースケースで最も一番熱いと言われているRAGの実装ガイドを公開しました。そのガイドの紹介をおこなうイベントです!!
https://tech-lab.connpass.com/event/315703/

ども！今回はGitHub ActionsでFTP経由デプロイができたので、備忘録的な共有をしておこうと思います。レンタルサーバーを無駄に腐らせている人がいれば、ちょっと試してみてはどうでしょうか？レンタルサーバーの良いところは、比較的安い値段で大容量という点ですが、クラウド技術が発展して安い価格で大容量いっぱいある…

1 ご挨拶
2 本編
- 2.1 Node環境（Tailwindビルド環境）
- 2.2 GitHub Actionsのサンプル
3 終わりに

ご挨拶

ども！連続執筆チャレンジ中の龍ちゃんです。案が程よく出てくれば、あとは執筆するだけなのでそんなに難しくはないのですが、久しぶりとなると結構来るものがあります。そんなこと言いながらも、特に長いブログは出していないだけなんですけどね。今は、3週間ほどブログを休んでいた期間に検証していたストックを使用しています。今回も備忘録としていきます。

今回取り扱うシナリオとしては、「GitHub ActionsでNodeアプリ（Tailwind CSS）の静的サイトをデプロイする」となります。GitHub ActionsでFTP経由で実行できることを知らなくて、感動してデプロイしてみたらできちゃった感じです。セキュリティ的に危ない気もしているのですが、数か月は環境を残しておこうと思います。

それでは本編に入っていきます。

本編

まずは、デプロイするアプリケーションを作成しないといけません。その辺は、静的ファイルだったらなんでも良いんですけども、せっかくならビルドして静的ファイルを作るほうが楽しいですよね。なので、事前にNode環境でTailwindをビルドする環境について解説します。その後、本題のGitHub Actionsについて話をしていきます。

Node環境（Tailwindビルド環境）

一年よりもう少し前に環境を構築したお話を書いています。改めて環境をセットアップしました。もし興味があれば、クローンして使ってみてください。ざっくりと環境について説明していきます。

Tailwindのビルド環境にBrowsersyncを乗っけており、開発者がTailwindファイルを変更すると変更検知が走り、ブラウザーがホットリロードされます。これによって開発者がコードを変更するだけで、ブラウザが勝手に更新されます。Reactだと開発サーバーが提供されていますが、Reactを使うまででもない系のサイトだと結構重宝します。でも実際そんな場面そうそうないと実感しています。

Reactではハードルが高い初学者の方に環境を上げたりするために作った環境なので、軽めにTailwindに入門したい人はぜひ使ってみてください。

GitHub Actionsのサンプル

それでは、GitHub Actionsのymlファイルの解説に入っていきます。全体的な流れとしては、以下になります。

対象のリポジトリを引っ張ってくる
Node環境のセットアップ
ビルドして静的ファイルの作成
FTP経由でデプロイ

FTPを使用するにあたって、資格情報が必要になります。FTPのデプロイには便利なものが作成されています。【FTP-Deploy-Action】こちらを使用することで、資格情報を渡すだけでFTP経由でデプロイを実行してくれます。この辺りの情報は、ダイレクトにFTPの接続情報が露呈してしまうので、GitHubのEnviromentsでSecretの設定として保護してあげましょう。

レンタルサーバーを持っていない人はGitHub Pageで公開するのがおすすめです。

on:
  push:
    branches: ["main"]
  workflow_dispatch:

env:
  NODE_VERSION: "18.x"

jobs:
  build:
    runs-on: ubuntu-latest
    environment:
      name: hosting
    steps:
      - uses: actions/checkout@v3

      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: ${{ env.NODE_VERSION }}

      - name: npm install, build, and test
        run: |
          yarn install
          yarn build

      - name: FTP-Deploy-Action
        uses: SamKirkland/FTP-Deploy-Action@4.1.0
        with:
          server: ${{ secrets.SERVER}}
          username: ${{secrets.USER_NAME}}
          password: ${{secrets.PASSWORD}}
          local-dir: ./public/ # 静的ファイルがビルドされる対象のファイル

詰まった点について紹介しておきます。server名の指定の方法で4度ほどデプロイに失敗しました。無駄にhttpやhttpsなどを付けていたのは、勉強不足ですね。今後は気を付けていきましょう。FTP経由でデプロイすると、セキュリティ的にまずいな～とも思うのですがそこも含めて失敗ですね。