【GitHub】Pushするだけでエックスサーバにサイトを公開する(GitHub Actions /自動デプロイ)

ずーーっと気になってはいたものの機会と手を出せていなかったGitHub、つい先日デビューしました。(とあるプロジェクトで必要になったため)

バージョン管理ですごく便利に使っていたものの、
ローカルで開発→GitHubにPush→検証サーバへFTPにてアップロード
という手順がすごく手間だなと感じ、調べていたら自動で検証サーバへ反映させることができそうだったのでやってみました〜

1つの記事だけでは今回やりたいことを実現できなかったので、今後のためにもここにメモします。

今回やること:GitHubへPush→開発サーバに自動で反映

↓もともとこのフローで開発していたので

  1. ローカルで開発
  2. GitHubにPush
  3. 検証サーバへFTPにてアップロード

↓このように効率化します!

  1. ローカルで開発
  2. GitHubにPush(検証サーバに自動で反映)

今回の要件

  • GitHub Actionsを使用
  • サーバはエックスサーバー(他のサーバでも秘密鍵の生成・取得の手順が違うくらいだと思う)
  • 公開するサイトは静的サイト

Pushするだけでエックスサーバにサイトを公開する方法

事前準備

  • GitHubにリモートリポジトリを作成する
  • サイトをアップするための検証サーバ
    rsync が使えるレンタルサーバーがおすすめとのこと。今回はエックスサーバーを使います。

手順01:エックスサーバーでSSHキーを作成する

※過去に作成している場合は、再作成するとキーの差し替えが必要になるので注意!

手順(公式):https://www.xserver.ne.jp/manual/man_server_ssh.php

上記手順内の「SSH接続の有効化・無効化」
「公開鍵認証用鍵ペアの生成、公開鍵の登録」を行います。

※パスフレーズの設定は不要(空の状態で進めてください)

ダウンロードした秘密鍵の中身はこの後使用します。

手順02:GitHubに秘密鍵・サーバログイン情報を登録する

コマンドでもできるようですが、今回はGitHubの画面上で行います。

作成したリモートリポジトリを開いて>Settings>Secrets>Actionsから「New repository secret」をクリック。

下記の名称で秘密鍵とログイン情報を登録していきます。
この名称は GitHub Actions 上で定数として使用される。

NameSecret
SSH_PRIVATE_KEY手順01で取得した秘密鍵を開いて中身をコピー&ペースト
SSH_USERサーバにログインする際のユーザーID
SSH_HOSTFTPホスト([サーバー番号].xserver.jp)
DEPLOY_PATH反映させたいファイルたちの格納先パス
今回はpublic_htmlフォルダ配下にアップします。
—–
home/[サーバーID]/[ドメイン名]/public_html
SSH_PORT10022(エックスサーバーの場合、サーバによって異なります)

全部登録できるとこんな感じ。

手順03:GitHub Actionsの設定

ローカルリポジトリで.github/workflows/deploy.ymlを作成し、下記内容を記載。
(GitHub画面上でできるっぽかったけど、見つけられなかった・・・)

name: deploy to remote

on:
  push:
    branches:
      - master
 
jobs:
  deploy:
 
    runs-on: ubuntu-latest
 
    steps:
      - uses: actions/checkout@v1
 
      - name: ssh key generate
        run: echo "$SSH_PRIVATE_KEY" > key && chmod 600 key
        env:
          SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
 
      - name: rsync deploy
        run: rsync -auzrv --delete ./ $SSH_USER@$SSH_HOST:$DEPLOY_PATH --exclude ".git/" --exclude ".github/"  -e "ssh -i key -o UserKnownHostsFile=/dev/null -o StrictHostKeyChecking=no -p ${SSH_PORT}"
        env:
          SSH_USER: ${{ secrets.SSH_USER }}
          SSH_HOST: ${{ secrets.SSH_HOST }}
          DEPLOY_PATH: ${{ secrets.DEPLOY_PATH }}
          SSH_PORT: ${{ secrets.SSH_PORT }}

22行目の「–exclude」でおそらく除外ファイルを指定しているのだと思うので、ここだけ気にしてあげればあとはそのままコピペで良さそうです。

手順04:pushしてサーバへの反映を確認する

以上で完了です☺︎
あとはpushして確認してみてください〜

何度か出たエラー

git push の後しばらく固まる

数分待った後下記エラーが返ってきました。

fatal: unable to access 'https://github.com/[user]/xxxxx.git/': LibreSSL SSL_connect: SSL_ERROR_SYSCALL in connection to github.com:443 

これは手順02で、サーバのログイン情報が正しく設定できていなかったためでした。

秘密鍵以外設定してなかったので、サーバのログイン情報を設定して対処完了。

pushはできたがサーバに反映されていない

GitHubの画面見たらこんなエラーが出ていた。

さらに「Details」開いてみると、こんな感じでとても親切にエラー箇所を教えてくれました。

deploy.ymlの内容に不備があったらしい。こちらも修正して解決できました〜

【2022.12.31追記】rsync deployでエラーになる

push自体は成功したものの、デプロイが失敗。
Github>Actionsタブ>deployを開いてみると「rsync deploy」でエラーになっていた。

原因
サーバー側でSSHキーを作成する際にパスフレーズの設定をしていたため。
再度キーを作成しなおし、パスフレーズを入力しない状態で進めて再度実行したら解消されました。

※エックスサーバーの場合、キーの作成をするとサーバー上の公開鍵が更新されるので注意してください
(他のところで鍵認証をしていると、そこのキーも変える必要があるはず)

エックスサーバーのSSH設定画面の注意事項

キーの再作成はお使いのサーバーのマニュアルをよく読んでから実施してくださいね。

今回は自分のサーバーだったので、Git上ととSFTP接続の際に参照しているキーを差し替えて完了。

何時間もかけたわりにこれだけであっさり解決しました。。

自動デプロイで効率爆あがり

やりたかったことができてとても満足。

静的サイトでも必ず検証サーバへのアップは必要になるので、個人的にはここが自動かできたのはとてもありがたい。

GitHubまだまだ初心者ですが、いろいろ便利にできそうで楽しみ・・・!

参考

RELATED POST

関連記事

【コピペでOK】CSSで強調したい文字の上に点をつける|コード解説付き
【デジハリ卒のフリーランスがレビュー】Webデザイナー講座って実際どうだった?
【静的サイト】.htaccessを使って404エラーページを設定したけど、画像やCSSが読み込まれない