🎯 この記事の目的

ローカル環境で開発したソースコードをGitHubにpushし、その変更をXserver上の本番サーバーに反映させる（pullする）ことで、サイトを更新する仕組みを構築します。

ゴール： サーバー側で git pull コマンドを叩くだけで、簡単にサイトを更新できる状態にする。

🗺 全体像

ローカル ↔ GitHub：git push でソースコードをアップロード
サーバー（Xserver） ↔ GitHub：git pull でソースコードをダウンロード（SSH接続）

全体の手順

手順1：ローカルPCからXserverへのSSH接続設定

SSHでの接続するための公開鍵、秘密鍵の作成を行う
ローカル側で秘密鍵を保存
サーバ側に公開鍵を設定
ターミナルでSSH接続を行う
configファイルにて接続を簡略化（ssh xserverで入れるように）

手順2：XserverとGithubをSSH接続
6. XserverとGithubをSSH接続するためにサーバ側で公開鍵、秘密鍵を準備
7. GithubでDeploy Key に公開鍵を登録する
8. Xserver側のsshフォルダに秘密鍵をセット
9. Xserver側でconfigファイルを作成しgithubとの接続を簡略化
10. XserverでGithubに接続できるかテスト
11. GithubからXserverに作業リポジトリをClone
12. ローカル環境でgithubにpushし、サーバ側からGithubへpullすればサイト更新ができる

🔧 手順1：ローカルPCからXserverへのSSH接続設定

まずは、ローカルPCからXserverへ安全に接続するための設定を行います。

1. SSH接続用の鍵を作成（ローカルPCで実行）

ターミナル（またはコマンドプロンプト）で以下のコマンドを実行し、SSHキーペアを作成します。

Terminal

# -f オプションで鍵のファイル名を指定
ssh-keygen -t rsa -b 4096 -f ~/.ssh/xserver_key

（パスワードの設定を求められますが、無くてもいいの場合はそのままEnter）

これにより、以下の2つのファイルが生成されます。

~/.ssh/xserver_key.pub （公開鍵：サーバーに登録するもの）
~/.ssh/xserver_key （秘密鍵：ローカルPCで大切に保管するもの）

2. ローカルに秘密鍵を保存（自動）

作成されたxserver.keyはそのまま使います。
ユーザーフォルダの中に.sshフォルダ（macOSの場合）があり、そこに保存されます。

アクセス方法は
Finder の上部タブに「移動」があるので、そこからユーザ→登録してあるユーザー名のフォルダを開くと隠しフォルダで「.ssh」があり、そこの中に保存されています。

3. サーバーに公開鍵を登録（Xserver側で実行）

XserverのサーバーパネルからSSH接続を有効にした後、サーバーにログインし、先ほど作成した公開鍵（xserver_key.pubの中身）を登録します。

Xserverの場合はコントロールパネルのSSH設定から下記の入力欄があるので、そこに公開鍵の中身を貼り付けてください。（新旧でパネルの表示が変わるので注意）

4.ローカルからXserverにSSH接続でログイン

秘密鍵をパーミッション設定

Terminal

$ chmod 600 .ssh/xserver_key

秘密鍵をパーミッション設定しないと下記のように権限が弱すぎて怒られるので注意

この時点で、秘密鍵を指定してSSH接続ができるか確認します。

Terminal

# -i オプションで秘密鍵ファイルを指定して接続
    $  ssh xs123456@sv12345.xserver.jp -p 10022 -i .ssh/xserver_key

$ ssh ユーザー名@ホスト名 -i 秘密鍵ファイルのパス -p ポート番号
Xserverのサーバー情報からご自身の番号に変更して実行

5. configファイルで接続を簡略化する

毎回長いコマンドを打たなくても済むように、~/.ssh/config ファイルで接続情報を管理します。

~/.ssh/config ファイルがなければ作成
touch ~/.ssh/config

以下の内容を追記してください。（HostNameとUserはご自身の情報に書き換えてください）
Host xserver
  HostName sv12345.xserver.jp
  User xs123456
  IdentityFile ~/.ssh/xserver_key
  Port 10022 # Xserverの場合、ポート番号が10022

これで、今後は以下のコマンドだけで接続できるようになります。

Terminal

ssh xserver

Xserver上でGitが入っているか念のため確認

Xserver

$ git --version

gitのバージョンが表示されたらOK

6. XserverとGithubをSSH接続するためにサーバ側で公開鍵、秘密鍵を準備

次に、XserverがGitHubから安全にソースコードをpullできるように設定します。

XserverにSSH接続した状態で、GitHub連携用の新しいキーペアを作成します。

Xserver

# 今度はGitHub接続用なので、ファイル名を github_rsa とします
ssh-keygen -t rsa -b 4096 -f ~/.ssh/github_rsa

これで、サーバーの~/.ssh/ディレクトリにgithub_rsa（秘密鍵）とgithub_rsa.pub（公開鍵）が作成されました。秘密鍵はそのままこの場所に置いておきます。
（パスワードの設定を求められますが、無くてもいいの場合はそのままEnter）

ちなみに保管されている場所はXserverの/.sshの中に保管されています。

github_rsa（秘密鍵）にもパーミッション

Xserver

$ chmod 600 .ssh/github_rsa

7. GitHubにDeploy Keyとして公開鍵を登録する

GitHubの対象リポジトリに移動し、Xserver上で作成した公開鍵（github_rsa.pubの中身）をDeploy Keyとして登録します。
まず、サーバー上で公開鍵の中身を確認してコピーします。

Xserver

$ cat ~/.ssh/github_rsa.pub

表示されたssh-rsa ...から始まる文字列をすべてコピーしてください。

次に、GitHubのサイトで設定を行います。

Settings > SSH and GPG keys をクリック
New SSH keyボタンをクリック

Title に「Xserver」など分かりやすい名前を入力
Key typeはそのままでOK
Key の欄に、先ほどコピーした公開鍵を貼り付けして保存

8. Xserver側のsshフォルダに秘密鍵をセット

6.XserverとGithubをSSH接続するためにサーバ側で公開鍵、秘密鍵を準備の手順で、秘密鍵が.sshに自動保存されていればOK

9. Xserver側でconfigファイルを作成し、接続を簡略化する

Xserver上でも~/.ssh/configファイルを設定し、GitHubへの接続に先ほど作成した鍵が使われるように指定します。

~/.ssh/config をエディタで開く（なければ新規作成されます）

以下の内容を追記します。

Xserver

Host github.com
  HostName github.com
  User git
  IdentityFile ~/.ssh/github_rsa
  IdentitiesOnly yes

IdentitiesOnly yes を指定することで、このホスト（github.com）への接続にはIdentityFileで指定した鍵のみを使用するようになり、意図しない鍵が使われるのを防ぎます。

10. XserverからGitHubへの接続をテストする

サーバーからGitHubへ正しく認証できるか確認します。

Xserver

ssh -T git@github.com

以下のようなメッセージが表示されれば成功です！

Hi あなたのユーザー名! You've successfully authenticated, but GitHub does not provide shell access.

11. GitHubからリポジトリをCloneする（初回のみ）

まだサーバーにリポジトリがない場合は、Webサイトの公開ディレクトリに移動し、git clone を実行します。SSH経由でcloneするため、URLは git@github.com:... の形式を使います。
公開ディレクトリに移動（例：~/example.com/public_html）

Xserver

cd ~/example.com/public_html

git clone を実行

Xserver

git clone git@github.com:あなたのユーザー名/あなたのリポジトリ名.git
Use code with caution.

12. push & pull でサイトを更新する

これで、日々の更新作業は以下の2ステップで完了します。
① ローカルでコードを編集し、GitHubにpush

Terminal

# 変更をステージング
git add .
# コミット
git commit -m "サイトのヘッダーを更新"
# GitHubにプッシュ
git push origin main

② サーバーにSSH接続し、GitHubからpull

Xserver

# サイトのディレクトリに移動
cd ~/example.com/public_html/あなたのリポジトリ名

# git pull で最新のコードを取得
git pull

これで、Xserver上のサイトが最新の状態に更新されます🎉

✅ まとめ

目的やったこと
ローカル → サーバーの接続 SSHキーペアを作成し、~/.ssh/config で接続を簡略化
サーバー → GitHub の接続 Deploy Keyとして公開鍵を登録し、サーバー側でSSH接続設定を行う
サイト更新ローカルで git push → サーバーで git pull

📝 補足

今回は手動でgit pullを行うシンプルな方法を紹介しました。更新頻度が高い場合は、GitHub ActionsやWebhookを使ってpushをトリガーに自動でpullを実行する仕組み（CI/CD）を構築することも可能です。まずはこの手動フローに慣れてから、次のステップとして自動化に挑戦してみるのがおすすめです。

Github Actionsに挑戦される方はぜひこちらの記事もどうぞ

🙋‍♂️ おわりに

XserverとGitHubの連携は、一度設定してしまえばその後の運用が格段に楽になります。この記事が、あなたの快適な開発・運用の一助となれば幸いです。