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

FTP経由でレンタルサーバーにNodeアプリをデプロイする

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

ご挨拶

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

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

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

本編

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

Node環境(Tailwindビルド環境)

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

Tailwind環境をBrowsersyncを用いて簡単にする方法についての概念図

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経由でデプロイすると、セキュリティ的にまずいな~とも思うのですがそこも含めて失敗ですね。

終わりに

これは、初めてChatGPTと共同作業を行ったものになります。二週間ほど経過して、だいぶええ感じに使い慣れてきた気がします。

とりあえずやってみるというテンション感で、気づいたものに飛びついていく生活に早く戻していきたいところです。その一方でやることも山積みなので、早く消化しないといけませんね。とりあえず、このブログでリハビリは終了になります。また来週から程よいペースでブログを執筆していきたいと思います。

ではまた!月曜日に執筆が終わってるのは秘密です。(*,,ÒㅅÓ,,)وグッ!

ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

役に立った 役に立たなかった

0人がこの投稿は役に立ったと言っています。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です