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

FTP経由でレンタルサーバーにNodeアプリをデプロイする
【6/19開催】Kong Community Japan Meetup #4
本イベントでは、Kong Inc. のVP of ProductであるReza Shafii氏もプレゼンターとして参加。当社からはアーキテクト マネージャーの槌野の登壇が決定!参加無料です!!

【6/21開催】開発者目線でのSBOMとの向き合い方
SBOMの導入から開発者がSBOMの作成・管理を自動で行っていくための方法(デモ)を紹介します。

【7/5開催】azd+Terraform? ~ポイントを押えてAzure上へのアプリケーション環境をラクチン構築~
ツールの概要説明から、実際の開発におけるポイントをお伝えします!

【7/19開催】現場で役立つAzure神小技10+α 〜生成AI,RAG,コスト削減など旬な技術満載のLT大会〜
Azureの最新技術や実用的な小技を紹介する特別なライトニングトーク大会を開催します!

【7/26開催】最適なIaCツールを選ぼう
プロジェクトでのツール選びに困らないための重要な観点をご説明します!

ども!今回は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と共同作業を行ったものになります。二週間ほど経過して、だいぶええ感じに使い慣れてきた気がします。

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

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

アバター画像
About 龍:Ryu 109 Articles
2022年入社で主にフロントエンドの業務でTailwindと遊ぶ日々。お酒とうまいご飯が好きで、運動がちょっと嫌いなエンジニアです。しゃべれるエンジニアを目指しておしゃべりとブログ執筆に注力中(業務もね)//
ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

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

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


ご覧いただきありがとうございます。
ブログの最新情報はSNSでも発信しております。
ぜひTwitterのフォロー&Facebookページにいいねをお願い致します!



>> 雑誌等の執筆依頼を受付しております。
   ご希望の方はお気軽にお問い合わせください!

Be the first to comment

Leave a Reply

Your email address will not be published.


*


質問はこちら 閉じる