- 投稿日：2026/01/20
- 更新日：2026/01/20
こんにちは。クルミです。
私は現在、コーディングを勉強しながら、教員や生徒を支援する学習支援サイトなどの制作に取り組んでいます。
今回はWeb制作をぐっと楽にしてくれる「Githubを使った自動デプロイ」の設定方法について、実体験と共に解説します。
設定が完了すれば、GitHubのMainブランチが編集されるたびに、エックスサーバーに自動でデプロイされます。
・「コードを書き換えるたびに、手動でアップロードするのが面倒⋯」
・「どのコードが一番正しいものなのかわからなくなる。」
こう感じるのは、私が超初心者で面倒くさがりだからなのかもしれません。
でも、「エンジニアは怠惰であるべき」らしいので、そういう職業に憧れのある私にとってピッタリだと感じました。
本当に超初心者の私でもできましたので、この記事を見ながら見ながらマネしてもらえたら、だれでも自動化できるはずです。
同じような悩みを感じている人は、ぜひ参考にしてみてください！
設定手順
１：SSH鍵を登録する ‐エックスサーバー‐
SSH鍵は、GitHub（自動デプロイをするロボット）が、サーバーに対して「怪しい者ではありません、本人です」と証明するための仕組みです。
サーバー管理から、サーバー ＞ SSH設定 ＞ 公開鍵を登録
と進み、
「登録して公開鍵をダウンロードする」をクリックします。
※登録方法やラベルはデフォルトのままでよいです。
ダウンロードが完了すると「{サーバーID}.key」というファイルが保存されます。これでSSH鍵の登録は完了です。
※ここで、「国外アクセス制限」を「OFF」にしておきしましょう！
GitHubのサーバーは海外にありますので、OFFにしないとデプロイがブロックされてしまいます。
なお、この後もサーバーの情報を使うので、エックスサーバーのページは開いたままにしておきましょう。
２：「Secrets」に情報を登録 -GitHub-
続いて、GitHubで実際にデプロイするための設定を行います。
①デプロイしたいリポジトリのページを開き、上部のメニューから Settings をクリックします。
②左側のメニューにある Secrets and variables > Actions と進みます。
③「New repository secret」 ボタンをクリックして、以下の情報を一つずつ保存していきます。
Nameが変数名、Secretが値というイメージです。
Nameについてはどんな名前でもよいですが、後述するコードをそのまま使ってもらうために、この名前をつかってもらうとよいです。
・XSERVER_HOST：｛サーバー名｝ 例：sv12345.xserver.jp
・XSERVER_USER：｛ユーザー名｝
・XSERVER_KEY：｛SSH鍵の全文｝ ※重要：後述の注意点あり！
サーバー名とユーザー名は、エックスサーバーの「SSHソフト設定」から確認できます。
※SSH鍵に関わる注意点
エックスサーバーからダウンロードしたSSH鍵（{サーバーID}.key）は、ダブルクリックしてもエラーが出て開くことができません。
ファイルを右クリックして、「テキストエディット（Macの場合）」や「VS Code」といった「テキストエディタ」を選択して開いてください。
また、SSH鍵は全て使用してください。
「-----BEGIN RSA PRIVATE KEY-----」
から
「-----END RSA PRIVATE KEY-----」
まで全てです。
３：YAMLファイル（指示書）の作成 -GitHub-
GitHubのロボットに「いつ、何を、どこへ」運ぶかを命令するためのファイルを作ります。
①リポジトリのトップ画面で [Add file] ＞ [Create new file] をクリックします。
②ファイル名の入力欄に、以下の通りに入力してください。
.github/workflows/deploy.yml
③ファイル名が正しく入力できたら、下の編集エリアに以下のコードをそのまま貼り付けてください。なお、remote_path については、ご自身のサーバー環境に合わせて書き換えてください。
＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃
name: Deploy to Xserver
on:
push:
branches:
- main # mainブランチに保存（プッシュ）されたら自動実行
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4 # 最新のソースコードを取得
- name: Deploy via rsync
uses: Burnett01/rsync-deployments@7.0.0 # 差分だけを高速転送するアクション
with:
switches: -avzr --delete # 削除したファイルもサーバーに反映させる設定
path: ./
# 【重要】ここを自分のサーバー環境に合わせて書き換えてください
remote_path: /home/【サーバーID】/【ドメイン名】/public_html/
remote_host: ${{ secrets.XSERVER_HOST }}
remote_user: ${{ secrets.XSERVER_USER }}
remote_key: ${{ secrets.XSERVER_KEY }}
remote_port: 10022 # エックスサーバー専用のポート番号
legacy_allow_rsa_hostkeys: true # 接続エラーを防ぐための設定
＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃
④ 右上の「Commit changes...」をクリックして保存します。
保存ボタン（Commit changes）を押した瞬間に、GitHubのロボットが「指示書が届いた！」と検知して、自動的にデプロイ作業を開始してくれます。
４：動作確認 -GitHub-
プログラムが正常に機能しているのであれば、保存した段階でデプロイが始まっているはずです。以下の手順で、ロボットが正しく働いているか確認しましょう。
①リポジトリ画面の上部にある [Actions] タブをクリックします。
②一覧の一番上に、今作成した「Deploy to Xserver」という項目が表示されています。
・黄色い丸がクルクル回っている：現在デプロイ中です。
・緑色のチェックマークがついた：成功です！
成功していれば、今後GitHubのMainブランチが編集されるたびに、エックスサーバーに自動でデプロイされます。
別のブランチで編集し、Mainにマージされたらデプロイされるので、非常に便利です。
私のつまづきポイント！
最後に、私がこのデプロイを実行する際につまづいたポイントをまとめます。
１：SSH鍵を「全文」コピーしていなかった
SSHをGitHubのSecretsに貼り付ける際に、暗号の部分だけをコピーしていましたが、これではうまくいきません。
-----BEGIN RSA PRIVATE KEY----- から -----END RSA PRIVATE KEY----- まで、ハイフンも含めて丸ごと全てコピーして貼り付けてください。
２：「国外アクセス制限」をOFFをにしていなかった
GitHubのサーバーは海外にあるため、エックスサーバーのセキュリティ機能（国外アクセス制限）が有効だと、接続がブロックされてしまいます。
エックスサーバーの管理パネルで、国外からのアクセス制限を「OFF」に変更しましょう。
３：「スーパーリロード」をしていなかった
最後はデプロイとは直接関係ありませんが、GitHubで緑色のチェックマーク（成功）が出たのに、サイトが変わっていなくて戸惑いました。
調べてみると、サーバーの情報は更新されていても、ブラウザが古いデータ（キャッシュ）を覚えてい可能性が浮上したので、スーパーリロードをしてみました。
すると、変更が適応されたサイトが表示されました。
以下のショートカットでスーパーリロードを試してください。最新のサイトが表示されるはずです。
・Mac: Cmd + Shift + R
・Windows: Ctrl + F5
まとめ
AIと相談しながらこの自動化の方法を進めていきながら、「自分には難しいかも…」と不安でしたが、実際に設定してみると、とっても簡単で、驚くほど便利な世界がやってきました。
手動でのアップロード作業は、ただ面倒なだけでなく、思わぬミスの原因にもなります。
今回紹介した方法を使えば、GitHubに保存したらすぐにサイトが更新されますので、この安心感とスピード感は手放せません。
今回紹介した方法は、「GitHub Action」を使用したものです。
無料で使用できますが、非公開リポジトリの場合は月間の合計実行時間に上限があります。（月2000分まで）
とはいえ、小規模なサイトであれば問題無いようです。
私の場合は、１回のデプロイで２０秒ほどです。
個人開発や小規模なサイトであれば無料枠を使い切ることはないと思いますので、安心して導入してみてください。
この仕組みが、みなさんのWeb制作をもっと楽に、スマートにしてくれることを願っています。
