ConoHa WINGに自動デプロイ!GitHubでマージされたらrsyncで反映させる

今回はGithub上でコードに変更を加えたらConoHa WINGに自動でデプロイするっていうことをやっていきたいと思う。以前エックサーバーで同じようなことをやったけど、今回はそれのConoHa WINGバージョン。

関連記事【自動デプロイ】Githubにマージでエックスサーバーにサイト公開する

やり方としてはGithubActionsを使って指定したブランチに変更が加わったら、rsyncコマンドでConoHaWINGのサーバーとファイルたちを同期させるっていう方法でやります。同じようなことをやりたい人がいたら参考にしてみてください。

使用するConoHa WINGのプラン

今回使っているConoHa WINGのプランはWINGパックの一番安いベーシックプラン。

ベーシックプランで十分だからConoHaWINGでサイトを公開したいと思ったら、最初はベーシックプランにしておくといいと思います。

自動デプロイの流れ

特定のブランチに変更が入るとそれを検知して、ConoHaWINGに反映させるっていうことをしたいです。例えばmainブランチにプルリクがマージされたら、それらのファイルをConoHaWINGにも同期させたい。流れとしてはこんな感じ。

  1. 特定のブランチに変更を加える
  2. GithubActionsが起動
  3. ConoHaWINGにデプロイ

GithubActionsとは

GithubActionsはドキュメントを見てみればなんとなく分かるけど、Github上でCircleCIやGitlabCIのようなことができる。GithubのリポジトリのActionsからワークフローを見ることができて、Github上でCIの実行結果まで見ることができてしまう。

ファイルは普通のCIを使う時のようにymlファイルを作ってやればOK。書き方はよくありそうな感じです。何かymlファイルで書いたことがあるならなんとなく分かるんじゃないかと思います。

GithubActions

ConoHaWINGとrsyncコマンドで同期させる

rsyncは指定したファイルやディレクトリの同期をしてくれるもの。

ネットワーク上の他のホストとの間で、指定したパスのファイルやディレクトリを複製する。単純なコピー系のコマンドとは異なり、送信側と受信側で内容が一致するファイルやファイル内のデータは転送しない。前回の同期から追加、変更された部分のみを効率よく複製することができる。

rsync

今回はrsyncコマンドをGithubActionsで実行してGithub上のディレクトリとConoHaWING上のディレクトリを同期しようっていう作戦です。

ConoHa WINGに自動デプロイするサイト

今回ConoHa WINGに自動デプロイするサイトは以下のVueで作ったサイト。

Vueだからパッケージをインストールしたりbuildしたりする必要があるけど、それもGithubActionsで実行しましょう。

Githubに公開したいファイル群を置いておく

公開したいファイルたちをまずはGithubにPushして置いておきましょう。

GithubActionsのファイルを作成する

.github/workflowsフォルダを作って、その中にdeploy.ymlを作ります。.github/workflowsフォルダに作れば自動で動いてくれます。

name: deploy to ConoHa WING

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
        - uses: actions/checkout@v2
        - uses: borales/actions-yarn@v2.3.0
          with:
            cmd: install
        - uses: borales/actions-yarn@v2.3.0
          with:
            cmd: build
        - name: ssh key generate
          run: echo "$SSH_PRIVATE_KEY" > key && chmod 600 key
          env:
            SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
        - name: rsync deployments
          uses: burnett01/rsync-deployments@5.1
          with:
            switches: -avz --delete
            path: dist/
            remote_path: ${{ secrets.REMOTE_PATH }}
            remote_host: ${{ secrets.REMOTE_HOST }}
            remote_user: ${{ secrets.REMOTE_USER }}
            remote_port: ${{ secrets.REMOTE_PORT }}
            remote_key: ${{ secrets.SSH_PRIVATE_KEY }}

vueで作ったサイトだからinstallしたりbuildしたりしています。mainブランチに変更があったらinstallやbuild、rsyncを実行するっていう記述。

ちょっとごちゃごちゃしているけど、大事なのは以下のrsyncコマンドをを使ってデプロイするところです。

- name: rsync deployments
  uses: burnett01/rsync-deployments@5.1
  with:
    switches: -avz --delete
    path: dist/
    remote_path: ${{ secrets.REMOTE_PATH }}
    remote_host: ${{ secrets.REMOTE_HOST }}
    remote_user: ${{ secrets.REMOTE_USER }}
    remote_port: ${{ secrets.REMOTE_PORT }}
    remote_key: ${{ secrets.SSH_PRIVATE_KEY }}

rsyncコマンドのオプションとして-avz --deleteを指定したり、デプロイ先(ConoHaWING)の情報をremote_〇〇で指定しています。secrets.〇〇の部分は後にGithubに登録していきます。(path: がdist/なのはvueでbuildしたファイルはdist配下に生成されるためです)

記述に関してはgithub-action-for-yarnrsync-deployments-actionを参考にしました。

 SSH Keyの作成

SSH接続を行うのでSSH KeyをConoHa WINGから取得します。

SSH Keyを作成したら秘密鍵がダウンロードされるから、それをGithubに登録しよう。

GithubActionsでSSH_PRIVATE_KEYっていう名称で呼び出したいからNameはSSH _PRIVATE_KEYにします。

Secrets情報を登録する

deploy.ymlでsecrets.〇〇としているけど、これはGithubに登録してsecretsの情報を呼び出しています。

remote_path: ${{ secrets.REMOTE_PATH }}
remote_host: ${{ secrets.REMOTE_HOST }}
remote_user: ${{ secrets.REMOTE_USER }}
remote_port: ${{ secrets.REMOTE_PORT }}
remote_key: ${{ secrets.SSH_PRIVATE_KEY }}

別にベタ書きで書いても動くはずだけど、セキュリティ上よくないのでsecretsに設定します。設定する項目はいくつかあるけど、SSH _PRIVATE_KEYと同様にGithubの画面から登録します。

REMOTE_PATHっていうのも設定しなくてはいけないけど、これはどこに向けて同期するかなので、/home/〇〇/public_html/公開したいドメイン名/に設定しておきます。

必要な情報をデプロイ先の情報をSecretsに登録したらOK。

ブランチをマージしてデプロイを確かめる

deploy.ymlに設定を書いたら試しにプルリクを作ってマージしてみましょう。

Actionsタブを見てみるとGithubActionsが動いている様子を見ることができる。成功すると緑色になります。

ConoHaWINGのデプロイ先のドメインを見てみるとちゃんとサイトが公開されていますね。

後はmainブランチに変更があれば勝手にConoHaWINGに同期されるから楽です。ガンガンサイトに変更を加えていきましょう。

WebサイトをConoHaWINGに自動デプロイは可能

今回はVueで作成したサイトをConoHaWINGにGithub上で変更を加えたらデプロイするっていうことをやったけど、別にVueじゃなくてもReactだったり素のHTML/CSS/JavaScriptで作成したサイトでも可能なはずです。

レンタルサーバーでサイトを公開したい人はConoHaWING使ってみるのもありですね。