XサーバーとGitHub Actionsを組み合わせて「手動アップロード」から卒業する話

毎回 Angular プロジェクトをビルドして、ファイルを選択して、SFTP でアップロードして……。

「そろそろこの作業、卒業したい」

そんな気持ちから始まった今回の試み。

本記事では、Xサーバー × GitHub Actions を使って、
コードを GitHub に push するだけで自動的に本番環境へデプロイされる仕組み を作った話を紹介します。

難しいクラウド構成や CI ツールは使いません。
サーバーは Xserver、Git は GitHub、それだけ。

---

✅ こんな方におすすめ

• Angular や Vue、React を Xサーバーにホスティングしている方
• 毎回の手動アップロードが面倒な方
• GitHub Actions を使ってみたいけど、きっかけがなかった方

---

「個人開発でもここまでできるのか」と感じてもらえたら嬉しいです。

なぜ“手動アップロード”を卒業したのか？

Web制作において「とりあえず動くものを公開する」ことは大切ですが、リリースのたびに毎回手動で dist フォルダをローカルでビルドして、FTPツールで public_html にアップロードして……という作業を繰り返すのは、地味に手間です。

ファイルを一つアップし忘れて表示が崩れたり、ビルドコマンドのオプションを間違えていたり、単純作業に意外と神経を使いますよね。

そんな中、ふと「GitHubにPushしたら勝手にサーバーに反映されたら最高なのでは？」と思い立ち、今回 Xサーバー × GitHub Actions の組み合わせで自動デプロイ環境を構築してみました。

Xサーバーに自動デプロイって難しいと思っていた

VercelやNetlifyのようなモダンなホスティングサービスなら、GitHubと連携するだけで自動デプロイが完了します。しかし、僕が使っているのは日本のレンタルサーバー「Xサーバー」。

正直なところ、「自動デプロイなんて無理でしょ」と思っていました。
なにせ管理画面はGUI中心で、GitやCI/CDという言葉は一見どこにも出てこない。SSHの設定も敷居が高そうに見えるし、FTPでアップロードするのが当たり前、という空気もあります。

でも調べてみると、Xサーバーは「SSH接続」と「秘密鍵認証」に対応しているんです。
つまり、GitHub ActionsからSSH経由でファイルを転送すれば、自動デプロイも不可能じゃないということ。

これはやるしかない、と思い立ち、以下の構成で実現してみました。

GitHub Actions × SSHでXサーバーにデプロイ

今回実現した構成は以下のような流れです。

GitHubリポジトリ（mainやdevelopブランチ）
          │
          ├─ push
          ▼
GitHub Actionsでビルド（Angularなど）
          │
          ▼
rsync + SSHでXサーバーへアップロード

特別なサービスや有料のCI/CDツールは使っていません。
無料で使える GitHub ActionsとXサーバーのSSH機能だけで完結しています。

ポイントは以下の3つ：

• Xサーバー側でSSH接続を有効にし、秘密鍵を発行する
  → 公開鍵をXサーバーに登録、秘密鍵をGitHubに登録
• GitHub Actionsのdeploy.ymlでrsyncとSSHを使って転送する
  → ワークフロー内でNode.jsアプリのビルド → rsyncアップロード

準備するもの（事前準備）

この自動デプロイを実現するために、以下の3点を準備します。

① Xサーバー側のSSH設定

Xサーバーのサーバーパネルにログインし、以下を行います：

• 「SSH設定」を有効にする
• 「公開鍵認証用鍵ペアの生成」を使って鍵を作成
• ダウンロードした**秘密鍵（.keyファイル）**をローカルで安全に保管
• GitHub Actions用にパーミッション変更（例：chmod 600 satosai1025.key）

この秘密鍵の中身は、あとでGitHubのSecretsに登録します。

② GitHubリポジトリ

• 自動デプロイを適用したいリポジトリを作成
• main や develop ブランチなど、デプロイ対象のブランチを決定
• アプリケーションを dist/ 以下にビルドできる構成にしておく
  例：Angular → dist/プロジェクト名/、React → build/

③ GitHub Actions用のSecrets設定

以下4つをGitHubの「Settings → Secrets and variables → Actions → Repository secrets」に登録：

Key	値の例
SSH_PRIVATE_KEY	秘密鍵ファイルの中身（-----BEGIN RSA... から ENDまで）
REMOTE_HOST	Xサーバーのホスト名（例：sv12345.xserver.jp）
REMOTE_USER	Xサーバーのアカウント名（例：abc12345）
REMOTE_PORT	ポート番号（Xサーバーは通常 10022）

GitHub Actionsの設定（deploy.yml作成）

Xサーバーに自動でアップロードするためのワークフローファイル（deploy.yml）を作成します。

ファイル配置場所

.github/workflows/deploy.yml

内容

name: Deploy to Xserver

on:
  workflow_dispatch:
  push:
    branches:
      - develop

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Install dependencies
        run: npm ci

      - name: Clean previous dist
        run: rm -rf dist/

      - name: Build Angular app
        run: npm run build -- --configuration production

      - name: Deploy to Xserver via SSH + rsync
        uses: easingthemes/ssh-deploy@v4.1.8
        with:
          SSH_PRIVATE_KEY: ${{ secrets.SFTP_KEY }}
          REMOTE_HOST: ${{ secrets.SFTP_HOST }}
          REMOTE_USER: ${{ secrets.SFTP_USERNAME }}
          REMOTE_PORT: ${{ secrets.SFTP_PORT }}
          SOURCE: dist/プロジェクト名/browser/
          TARGET: /home/${{ secrets.SFTP_USERNAME }}/ドメイン/public_html
          EXCLUDE: .git*,node_modules
          ARGS: -avz --delete
          SSH_CMD_ARGS: -o StrictHostKeyChecking=no

これで、対象ブランチに push されるたびに自動でXサーバーにアップロードされるようになります。

まとめ

• XサーバーにもGitHub Actionsでデプロイできる
• SSH接続とSecretsの設定が鍵 🔑
• .github/workflows/deploy.yml を作って運用自動化 💨
• 手動アップロードから「卒業」できると超快適！