サイト更新が劇的にラクに!GitHub Actionsで作る自動運用術

■ 概要

最近取り組んでいるWebサイト制作では、テーマソースをGitHubで管理しています。これにより、バージョン管理がしやすくなるだけでなく、GitHub Actionsを設定することで、mainブランチへのpushごとにサーバーへ自動デプロイが可能です。更新作業が大幅に効率化され、とても便利です。

■ 設定環境について

  • 扱うソース=WordPressの開発テーマ
  • 接続方式=FTP
  • リモートサーバー=ロリポップ

■ 設定手順について

具体的な手順は以下のとおりです。

①ローカル側でymlファイルを作成

ローカルで作成したymlファイル
ローカルで作成したymlファイル

Actionsを動かすにはymlファイルが必要です。テーマディレクトリ(wp-content/themes/***)のなかに、".github/workflows"ディレクトリを作って、ymlファイルを以下のような内容で作成します。


on:
  push:
    branches:
      - main # mainブランチへのプッシュ時に実行
name: Build&Deploy
jobs:
  FTP-Deploy-Action:
    name: FTP-Deploy-Action
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: FTP-Deploy-Action
        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
        with:
          server: ${{ secrets.FTP_SERVER }} # シークレットとして登録推奨
          username: ${{ secrets.FTP_USERNAME }} # シークレットとして登録推奨
          password: ${{ secrets.FTP_PASSWORD }} # シークレットとして登録推奨
          server-dir: / #公開フォルダからの相対パス
          local-dir: ./ #リポジトリのルート
          delete-remote: true # 必要に応じて設定

②サーバー情報をメモる

ロリポップの管理画面
ロリポップの管理画面

つづいて、ymlファイルで読み取るシークレット情報を、使っているサーバーのアカウント情報からメモります。ロリポップの場合、「ユーザー設定>アカウント情報>サーバー情報」に記載されています。

  • FTP_SERVER"FTPサーバーURL(例:ftp.lolipop.jp)"
  • FTP_USERNAME"FTP・WebDAVアカウント名"
  • FTP_PASSWORD"FTP・WebDAVパスワード"

③GitHub側で、Actionsで使う情報をシークレット登録

GitHub管理画面
GitHub管理画面

GitHubリポジトリの管理画面で以下の手順でシークレットを登録します。

  1. SettingsSecrets and variablesActionsRepository secrets
  2. 以下の情報を追加
    • Name"FTP_SERVER"Secrets"メモったFTPサーバーURL"
    • Name"FTP_USERNAME"Secrets"メモったFTP・WebDAVアカウント名"
    • Name ="FTP_PASSWORD"Secrets"メモったFTP・WebDAVパスワード"

④リモートリポジトリにpush

GitHub画面
リモートリポジトリへpushしたら設定完了

リモートリポジトリにymlファイルをpushできたら、設定は完了です!
設定後はローカルで適当なファイルを更新・pushし、ちゃんと動いているか確認してみましょう。

Actionsタブ画面
Actionsタブで動作チェック

Actionsタブを開くと、ちゃんとワークフローが動作しているかが確認できます。(全然わからず最初めちゃくちゃ失敗してます…(泣))

■ 最後に

更新後のサイト
更新後のサイト

サイトも無事に更新されてました!🚀