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アップロード
Angularの静的ファイルをdistフォルダにビルドする構成にする

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

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

① Xサーバー側のSSH設定

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

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

この秘密鍵の中身は、あとで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サーバーのホスト名（例：`xxxxx.xserver.jp`）
`REMOTE_USER`	Xサーバーのアカウント名（例：`abc12345`）
`REMOTE_PORT`	ポート番号（Xサーバーは通常 `10022`）

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

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

ファイル配置場所

.github/workflows/deploy.yml

deploy.yml

name: Deploy to Xserver

on:
  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: Build Angular app
        run: npm run build -- --configuration production

      - name: Deploy to Xserver via SSH
        uses: easingthemes/ssh-deploy@v4.1.8
        with:
          SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
          REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
          REMOTE_USER: ${{ secrets.REMOTE_USER }}
          REMOTE_PORT: ${{ secrets.REMOTE_PORT }}
          SOURCE: dist/my-portfolio/           # ← ビルドされたファイルの場所
          TARGET: /home/${{ secrets.REMOTE_USER }}/[ドメイン名]/public_html
          EXCLUDE: .git*,node_modules

注意ポイント

SOURCE はビルド成果物のパス（Angularなら dist/プロジェクト名/）
TARGET はXサーバー上のパス（例：/home/abc12345/ドメイン/public_html）
EXCLUDE に node_modules や .git などアップロード不要なファイルを指定

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

動作確認

デプロイの確認方法

GitHub上で develop ブランチに変更を push
「Actions」タブから Deploy to Xserver ワークフローが実行されたことを確認
エラーが出ていなければ、Xサーバーの public_html/ にファイルがアップロードされているはずです
ブラウザで自分のドメインを開いて表示をチェック！

まとめ

XサーバーにもGitHub Actionsでデプロイできる

SSH接続とSecretsの設定が鍵

.github/workflows/deploy.yml を作って運用自動化

手動アップロードから「卒業」できると超快適！