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

今回はエックスサーバーにサイトを公開するっていうのをGithubを通して行いたいと思う。やりたいのはGithubでプルリクが指定したブランチにマージされたら、自動でそれをエックスサーバーに反映するというもの。

いちいち手動で最新版のものを反映するっていうのは面倒ですからね。それを指定したブランチに変更を加えるだけで行ってしまおうというやつです。

Github→エックスサーバへの自動デプロイ実現方法

やりたいことはこんな感じ。マージしてGithubActionsが動いてエックスサーバーのファイルと同期させる。

プルリクがmainブランチにマージ
GithubActionsが起動
エックスサーバーにデプロイ

CIは別になんでもいいけど、今回はGithubActionsを使ってやっていこうと思う。他のCIで設定ファイルを書いた事があるなら、大体同じような感じで書く事ができるんじゃないかな。

GithubActionsとは

GithubActionsはこう書かれている通りワークフローを簡単に自動化できるやつ。

GitHub Actionsを使用すると、ワールドクラスのCI / CDですべてのソフトウェアワークフローを簡単に自動化できます。 GitHubから直接コードをビルド、テスト、デプロイでき、コードレビュー、ブランチ管理、問題のトリアージを希望どおりに機能させます。

書き方はこんな感じでよくありそうなymlファイルですね。

ちなみにGithubのActionsから色々見る事ができますよ。

今回はこれを使ってエックスサーバーへのデプロイをしていきたいと思う。

rsyncを使う

デプロイに関してだけど、Github上のファイルとエックスサーバー上のファイルが同期されたら最新版ということになりますよね。その同期方法なんだけどrsyncを使ってやろうと思います。

scpなんかでもできるけど、削除されたファイルの同期はしてくれなかったりしてちょっと面倒です。

rsyncなら同期してくれるからそういったこともない。rsyncを使えないレンタルサーバーもあるかもしれないけど、エックスサーバーは使えるから使っていこう。

GithubActionsにさせること

mainブランチにマージされたらGithubAcitionsを動かすようにします。動かすといっても何をさせるかだけど、やらせることは以下の2つ。

エックスサーバーへrsyncするためのSSHKeyの設定
rsyncコマンドの実行

アプリケーションのビルドなんかが必要な場合にはそれらも必要になってきますね。

エックスサーバーにデプロイする際にはSSHの鍵認証が必要になるから、エックスサーバーから取得した鍵を使ってrsyncコマンドを実行できるようにします。

rsyncコマンドが実行されたらXserverにあるファイルとGithubリポジトリにあるファイルが同期されている状態になります。

自動デプロイの設定を行う

Githubにデプロイしたいリポジトリを用意

まずはエックスサーバーにデプロイしたいリポジトリを用意しよう。前回エックスサーバーに静的サイトをデプロイするっていう記事で適当に作ったものがあるのでそれを使います。(この適当にVueで作ったやつ)

エックスサーバーにWebサイトを公開する方法（React・Vueの場合も）

2021.11.28

エックスサーバーでWebサイトを公開したいんだけどどうしたらいいの？そんな疑問を解消するためにエックスサーバーでWebサイトを公開する方法を紹介します。記事の内容 HTML/CSS/JavaScriptで作成したWebサイトを公開する方法 Reactで作成したサイトを公開する方法 Vueで作成し...

これはVueで作ったやつだから、buildも必要になってくるね。後でGithubActionsでbuildも加えることにします。Githubを通してデプロイするからコードをGithubにアップしておこう。

GithubActionsがエックスサーバーにアクセスできるようにSSHKeyを手に入れる

次にGithubActionsがエックスサーバーにアクセスできるようにSSHKeyをエックスサーバーから取得します。

確認画面へ進むをクリックして鍵の作成をします。パスフレーズは求められないようにするため、空欄で進みます。生成されると自動的に秘密鍵のダウンロードがされるから、それをGithubに登録しよう。

Githubに秘密鍵を登録する

秘密鍵をGithubのリポジトリに登録します。リポジトリのSettings→SecretsからNew repository secretと進もう。

ここにNameを入力して秘密鍵を貼り付けてやればOK。

これでエックスサーバーに接続する準部は整った。次はエックスサーバーにデプロイするためGithubActionsのファイルを書いてみよう。

GithubActionsのファイルを作成・記述する

GithubActionsのファイルを書いていくんだけど、やらせたいことはrsyncコマンドを実行することです。また、それ以外に今回はyarn installやyarn buildが必要になってくるからそれも入れます。（Vueなので）

やることとしては以下。

ブランチのチェックアウト
Yarn install & Yarn build
SSHKey設定
rsyncコマンド実行

.github/workflows配下にymlファイルを作れば、記述したものを読み取って実行してくれる。deploy.ymlっていうのを作ってこんな感じに書いておく。

name: deploy to xserver

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: /home/サーバーID/ドメイン名/public_html/
            remote_host: サーバー番号.xserver.jp
            remote_user: ユーザー名
            remote_port: 10022
            remote_key: ${{ secrets.SSH_PRIVATE_KEY }}

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

大事なのはname:rsync deploymentsに書いてあるもので、ここでエックスサーバーの情報を記載している。ポート番号はデフォルトだとダメっだったので、調べるとエックスサーバーでは10022にしないとダメなようですね。(pathがdist/なのはvueを使っているためです・・・buildしたらdist配下にファイルが作られる)

secretsに大事な情報は設定しておこう

remote_hostやremote_userなどは直書きするのではなく、secretsとして呼び出せるようにしておいた方が安全です。Secretsから追加して使いましょ。

コードでは設定したものを呼び出すようにしておく。

- 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 }}

これでGIthubActionsの設定ファイルはOK。次は実際に実行してみて動くか確かめてみる。

GithubActionsを実際に動かしてエックスサーバーに反映させる

設定ではmainブランチにコードが追加されると、GithubActionsで指定したコードが動いてくれるようになっています。無事動くとエックスサーバーに同期され見る事ができる。

今から実際にコードに変更を加えてやってみるけど、その前に実行前の状態を確認しておく。

実行前

githubのmainブランチに変更を加える前にどんな状態なのか確認しておきます。まず変更を加えるドメインのpublic_html配下は何もない状態。

アクセスしてみると403です。

GithubActionsがうまく動くとファイルが同期され、このドメインでサイトを見る事ができるはずです。適当にプルリクを作ってマージしてみます。

mainに向けてマージしてActionsをみてみると作成したGithubActionsが動いてくれていますね。

これが緑色になれば成功です。緑色になりました。

これでエックスサーバーで指定したドメインをURL欄に入力して確かめてみると・・・

無事表示されましたね。ありがとうございました。public_htmlの中を見てみてもファイルが配置されています。

ちなみにエックスサーバーではpublic_htmlのindex.htmlが起点になるからファイル名はindex.htmlにしておこう。

アップロードを行いたいドメイン名のフォルダを選択されますと、[ public_html ]というフォルダが表示されます。
この[ public_html ]内に、インターネット上で公開するファイルをアップロードしてください。また、トップページのファイル名は「index.html」となります。
ホームページのファイルはどこへアップロードすればいいですか？

まとめ

今回はGitHubで指定したブランチに変更が起きたら、それをエックスサーバーと同期させるっていうことをやりました。ちょっと設定が面倒だけど、一回設定してしまえば後は勝手に同期してくれるから楽ですよね。

エックスサーバーなどのレンタルサーバーでサイト公開したい人はrsync使ってやってみてもいいかもしれませんよ。