🌟

Github ActionsでWordPressサイトのデプロイ環境を爆速で構築する

2022/10/02に公開

WordPress

GitHub Actions

ftp

tech

TL;DL

Github Actionsによるテーマファイルのデプロイ環境を構築することで、デプロイ作業を効率化できて少し幸せになれたというお話し。
わりと初学者向けに記事となっております。(githubは使用できる前提)
超簡単にできるので、ぜひ試してみてください！

簡単に自己紹介

弊チームは、IT企業にてwebエンジニアをしていた2人が独立しチームとしてweb制作を中心に活動しております。
会社員時代は、Railsを中心にバックエンドの開発しながら、適宜Reactなどでフロントエンドの開発をしており、学生時代にweb制作をしていたこともあり、HTML/CSSのマークアップもできるというような感じです。
最近では、ヘッドレスCMSなど新しいCMSが台頭してきておりますが、その時代を逆行するかのように、WordPressでスタンダードなCMSの構築などのお仕事をメインに活動しております。
※WordPressでもプラグインを使えば、ヘッドレスCMSにできるらしいですが...

Wordpressのデプロイ環境について

みなさんはWordPressでのサイトの保守・運用をどのようにやってらっしゃるのでしょうか？
おそらく、FTPによる差分ファイルのアップロードや、プラグイン「All-in-one WP migration」でまるっとアップロードされてらっしゃる方が非常に多いのではないかと思います。

これまでは弊チームでもプラグインでまるっと上げていたのですが、なにせプラグインが若干おかしいということに気づきました。というのも、一度インポートしてしまうと、なぜか2回目以降はファイルを選択してもインポートできないのです。

プラグインの方のコードをいじることで修正はできたのですが、今後修正毎にプラグインの方もいじるのがめんどくさいということで、もっといい方法はないかと検討し始めました。

調べているうちに、Github Actionsで自動デプロイされている方をちらほら見つけて、「これだ！！」ということで早速取り掛かりました。

Github Actionsについて

github actionsによるデプロイの流れは以下の通りです。

手順

早速手順をみていきましょう！

1. Secretsの設定

Github Actionsを使用するにあたり、FTP周りの秘匿情報をそのままリポジトリに載せるわけにはいきません。そのため、GithubのSecretsを活用します。

リポジトリ画面上部の「Settings」 > 「Secrets」から簡単に設定することができます。

Settings
Secrets

弊チームの場合は、

ftp server
ftp user
ftp password

の３つをこちらのSecretsに登録しました。

今回はロリポップのレンタルサーバーを使用しているため、これらの情報をサーバーからとってきました。

ロリポップの各種情報の見方がわからない方は以下のリンクを参照してみてください。
（他のサーバーでも調べればすぐわかると思います。）

2.***.ymlファイルでGithub Actionsの設定を記述する

次に、ymlファイルを作成していきます。ファイル名はなんでも構いませんが、
私はdeploy.ymlというファイル名にしました。

こちらの「Actions」タブから簡単に設定できます。

on:
  push:
    branches:
      - master # ①
name: Build and Deploy
jobs:
  FTP-Deploy-Action:
    name: FTP-Deploy-Action
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@master
      - name: FTP-Deploy-Action
        uses: SamKirkland/FTP-Deploy-Action@2.0.0
        env:
          FTP_SERVER: ${{ secrets.FTP_SERVER }}
          FTP_USERNAME: ${{ secrets.FTP_USERNAME }}
          FTP_PASSWORD: ${{ secrets.FTP_PASSWORD }}
          LOCAL_DIR: ./         # ②
          REMOTE_DIR: ""        # ③

詳細に関しましては、別途たくさん記事があるかと思いますのでそちらをご覧ください。
https://docs.github.com/ja/actions

①

今回はmasterブランチに変更反映されるとworkflowが走る形にしたかったので、masterと指定しています。

②

こちらは、自身のリポジトリからどのファイル / フォルダをデプロイするのかを指定することができます。今回はテーマファイルをデプロイしたかったので、テーマファイルが入っているディレクトリを指定しました。

ex.) /wp-content/themes/[hoge-theme]/

③

こちらは逆にサーバーのどこにデプロイするかを指定できます。
上記同様テーマが入っているディレクトリを指定しました。

ex.) /wp-content/themes/[hoge-theme]/

完了

たったこれだけ。
あとは、masterに変更を反映すると自動でworkflowが走り、デプロイされます。
workflowが走っていることを確認するには、設定時と同様、「Actions」タブを開くだけ。

懸念点

テーマファイルの自動デプロイはできたものの、複数人での開発となるとまだしんどい部分はいくつかあります。

コンテンツ
プラグイン周り

特にコンテンツに関しては、今後どうするか検討中です。
All-in-one WP migrationはおかしいので使わないにしろ、dumpファイルで流し込むとか、
あんまり大きな差分がなかったら手動で設定するとかの対応が必要かな？

また、この辺りいい方法あれば別途記事を書くかもしれません。

最後に

WordPressのしんどい部分、他にもたくさんあるかと思いますが個人的には嫌いではありません。
あとは、もう少しセキュリティ面や保守・運用(主にバージョンアップなどの面かな)で改善されればいいな