GitHub Actions を使って任意のサーバーにデプロイする方法


  1. Staff Blog
  2. ウェブ制作・IT
  3. GitHub Actions を使って任意のサーバーにデプロイする方法

以前、弊社ではデプロイ作業を手動で行っていましたが、トラブルにつながる事例が度々発生したため、このたび、GitHub Action を使用して自動化いたしました。

今回はその方法について解説していきたいと思います。

GitHub Actions を使って任意のサーバーにデプロイする方法

次の手順を行えば可能です

GitHub の Settings → Secrets にサーバー情報を登録しておく

セキュリティの関係上、サーバー情報を平文で書くことは避けるべきです。

Secrets にサーバー情報を登録しておいて、その値を代わりに登録した値を呼び出すことでセキュリティを向上できます。

今回は下記のように設定するものとします。

説明
DEPLOY_HOST_PATHサーバーのファイルコピー先のパス
DEPLOY_HOST_SERVERサーバーのホスト名
DEPLOY_PORT_SERVERSSHで使用するポート
DEPLOY_USER_SERVERSSHで接続するユーザー名
DEPLOY_KEY_SERVERSSHキー
Secrets に登録する変数と説明
STEP
1

デプロイ用のコードを書き、指定の位置に設置後コミットします。

下記コードを .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 }}

コードの詳しい解説は後ほどします。

STEP
2

タグ付きでコミットすると上記アクションが走ります。

STEP
3

コードの解説

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@v2

GitHub Actions の Checkout を使用することを宣言しています。

    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}

Node.js を使用することを宣言し、セットアップを行うように指示しています。

    - run: npm install

npm をインストールするように指示しています。

    - 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 のスクリプトを使用しているので詳しくはリンク先を参照してください。

先程のステップ1で設定した値をここで読み込んで使用しています。

まとめ

今回は GitHub Actions を使って任意のサーバーにデプロイする方法について解説しました。

コードは基本的にコピー&ペーストで使えますが、多少の解説も加えてみました。

この記事が皆様のお役に立てれば幸いです。

この記事を書いた人

平川 智悠
2020年7月入社。5月と6月は業務委託として参加。
ベクトルではテーマ・プラグイン・ブロックをいじってます。

最近自作 PC に関する情報を集めていていつかは自分で組みたいと思っている。
フルサイト編集に対応したブロックテーマ X-T9

フルサイト編集対応ブロックテーマ

WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。

パターンを使って

よりクオリティの高いサイトに

パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中!コピペしながら高品質なサイトを簡単に作れます。


PAGE TOP

このデモサイトは Vektor,Inc. のテーマとプラグインで構築されています。ご購入や詳細情報は下記のリンクもご参考ください。