以前、弊社ではデプロイ作業を手動で行っていましたが、トラブルにつながる事例が度々発生したため、このたび、GitHub Action を使用して自動化いたしました。
今回はその方法について解説していきたいと思います。
GitHub Actions を使って任意のサーバーにデプロイする方法
次の手順を行えば可能です
GitHub の Settings → Secrets にサーバー情報を登録しておく
セキュリティの関係上、サーバー情報を平文で書くことは避けるべきです。
Secrets にサーバー情報を登録しておいて、その値を代わりに登録した値を呼び出すことでセキュリティを向上できます。
今回は下記のように設定するものとします。
| 値 | 説明 |
| DEPLOY_HOST_PATH | サーバーのファイルコピー先のパス |
| DEPLOY_HOST_SERVER | サーバーのホスト名 |
| DEPLOY_PORT_SERVER | SSHで使用するポート |
| DEPLOY_USER_SERVER | SSHで接続するユーザー名 |
| DEPLOY_KEY_SERVER | SSHキー |
デプロイ用のコードを書き、指定の位置に設置後コミットします。
下記コードを .github/workflows/deploy_to_server.yml として保存します。
name: Deploy to Server
on:
push:
tags:
- "[0-9]+.[0-9]+.[0-9]+"
env:
theme_name: my-theme
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [12.x]
steps:
- uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- run: npm install
- run: npx gulp dist
- run: cd dist/ && zip -r ${{ env.theme_name }}.zip ${{ env.theme_name }}/ && mv ${{ env.theme_name }}.zip ${GITHUB_WORKSPACE}
- name: rsync deployments
uses: burnett01/rsync-deployments@4.1
with:
switches: -avzr
path: ${{ env.theme_name }}.zip
remote_path: ${{ secrets.DEPLOY_HOST_PATH }}
remote_host: ${{ secrets.DEPLOY_HOST_SERVER }}
remote_port: ${{ secrets.DEPLOY_PORT_SERVER }}
remote_user: ${{ secrets.DEPLOY_USER_SERVER }}
remote_key: ${{ secrets.DEPLOY_KEY_SERVER }}コードの詳しい解説は後ほどします。
タグ付きでコミットすると上記アクションが走ります。
name: Deploy to Serverこの部分は GitHub Actions で実行される際の実行名にあたります。
on:
push:
tags:
- "[0-9]+.[0-9]+.[0-9]+"GitHub Action を実行するタイミングをここで設定します。今回の場合はタグ付けしてPushした場合に発動します。
env:
theme_name: my-themeプロジェクト名を theme_name という変数においておきます。
今回はテーマを対象としたため theme_name という変数を定義しましたが、プラグインの場合は plugin_name を使うとわかりやすいと思います。
jobs:以下に実行するタスクを書いていきます。
build:ビルドというタスクを準備します。
runs-on: ubuntu-latest最新の Ubuntu 環境で実行することを宣言しています。
strategy:
matrix:
node-version: [12.x]ビルドする際に Node.js の バージョン 12 系を使うことを宣言しています。
steps:以下にどのような手順で行うかを宣言しています。
- uses: actions/checkout@v2GitHub Actions の Checkout を使用することを宣言しています。
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}Node.js を使用することを宣言し、セットアップを行うように指示しています。
- run: npm installnpm をインストールするように指示しています。
- run: npx gulp dist配布用のバイナリを dist ディレクトリに生成するためのスクリプトを実行ように指示しています。
弊社では npx gulp dist を実行すると配布用のバイナリが dist ディレクトリに生成されるよう設定しています。
- run: cd dist/ && zip -r ${{ env.theme_name }}.zip ${{ env.theme_name }}/ && mv ${{ env.theme_name }}.zip ${GITHUB_WORKSPACE}
dist ディレクトリに移動し、生成されたバイナリファイルを zip 形式で圧縮し、圧縮ファイルをワークスペースのディレクトリに移動しています。
- name: rsync deployments
uses: burnett01/rsync-deployments@4.1
with:
switches: -avzr
path: ${{ env.theme_name }}.zip
remote_path: ${{ secrets.DEPLOY_HOST_PATH }}
remote_host: ${{ secrets.DEPLOY_HOST_SERVER }}
remote_port: ${{ secrets.DEPLOY_PORT_SERVER }}
remote_user: ${{ secrets.DEPLOY_USER_SERVER }}
remote_key: ${{ secrets.DEPLOY_KEY_SERVER }}圧縮ファイルをサーバーにコピーしています。基本的には上記をコピーすれば OK です。
burnett01/rsync-deployments のスクリプトを使用しているので詳しくはリンク先を参照してください。
先程のステップ１で設定した値をここで読み込んで使用しています。
今回は GitHub Actions を使って任意のサーバーにデプロイする方法について解説しました。
コードは基本的にコピー＆ペーストで使えますが、多少の解説も加えてみました。
この記事が皆様のお役に立てれば幸いです。
この記事を書いた人
最近の投稿
フルサイト編集対応ブロックテーマ
WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。
パターンを使って
よりクオリティの高いサイトに
パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中！コピペしながら高品質なサイトを簡単に作れます。
ブロックエディターで
ABテストを
自由に作成できる VK AB Testing
VK AB Testing は、ABテストを実施するための WordPress 用プラグインです。ブロックエディターでテストパターンを自由に作成でき、ランダム表示とクリック計測が可能です。Webサイトや広告などの施策の改善にぜひご活用ください。
AB テストでクリック率 &
売上アップ！
VK AB Testing は、ABテストを実施するための WordPress 用プラグインです。ブロックエディターでテストパターンを自由に作成でき、ランダム表示とクリック計測が可能です。Webサイトや広告などの施策の改善にぜひご活用ください。