ローカル環境からGitHubにpush、サーバーでpullしてサイトを更新する方法（Xserver編）

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

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

## 全体像

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

![ローカル環境 (4).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4103396/7486bfb6-673b-4aa5-9186-8fe6f002ff9f.jpeg)


## 全体の手順
手順1：ローカルPCからXserverへのSSH接続設定
1. SSHでの接続するための公開鍵、秘密鍵の作成を行う
2. ローカル側で秘密鍵を保存
3. サーバ側に公開鍵を設定
4. ターミナルでSSH接続を行う
5. 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キーペアを作成します。

```bash: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設定から下記の入力欄があるので、そこに**公開鍵**の中身を貼り付けてください。（新旧でパネルの表示が変わるので注意）

![スクリーンショット 2025-06-13 14.10.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4103396/a08c67a3-1097-458a-a5ff-5c43f786f9dc.png)


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

秘密鍵をパーミッション設定
```bash:Terminal
$ chmod 600 .ssh/xserver_key
```
秘密鍵をパーミッション設定しないと下記のように権限が弱すぎて怒られるので注意
![スクリーンショット 2025-06-12 19.16.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4103396/dae2f297-1ebd-4d74-b935-f58d9bf4a51a.png)


この時点で、秘密鍵を指定してSSH接続ができるか確認します。
```bash: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
```

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

Xserver上でGitが入っているか念のため確認
```Bash:Xserver
$ git --version
```
gitのバージョンが表示されたらOK

## 6. XserverとGithubをSSH接続するためにサーバ側で公開鍵、秘密鍵を準備
次に、XserverがGitHubから安全にソースコードをpullできるように設定します。

XserverにSSH接続した状態で、GitHub連携用の新しいキーペアを作成します。
```Bash: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（秘密鍵）にもパーミッション
```Bash:Xserver
$ chmod 600 .ssh/github_rsa
````

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

```Bash:Xserver
$ cat ~/.ssh/github_rsa.pub
```

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

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

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

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

### ![スクリーンショット 2025-06-13 15.32.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4103396/b20f4b5a-7bc9-4a66-971c-3116df5e9b03.png)

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

## 9. Xserver側でconfigファイルを作成し、接続を簡略化する
Xserver上でも~/.ssh/configファイルを設定し、GitHubへの接続に先ほど作成した鍵が使われるように指定します。
# ~/.ssh/config をエディタで開く（なければ新規作成されます）

以下の内容を追記します。
```bash:Xserver
Host github.com
  HostName github.com
  User git
  IdentityFile ~/.ssh/github_rsa
  IdentitiesOnly yes
```  
  
:::note info
IdentitiesOnly yes を指定することで、このホスト（github.com）への接続にはIdentityFileで指定した鍵のみを使用するようになり、意図しない鍵が使われるのを防ぎます。
:::

## 10. XserverからGitHubへの接続をテストする
サーバーからGitHubへ正しく認証できるか確認します。
```bash: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）
```bash:Xserver
cd ~/example.com/public_html
```
 git clone を実行
```bash:Xserver
git clone git@github.com:あなたのユーザー名/あなたのリポジトリ名.git
Use code with caution.
```

## 12. push & pull でサイトを更新する
これで、日々の更新作業は以下の2ステップで完了します。
① ローカルでコードを編集し、GitHubにpush
```bash:Terminal
# 変更をステージング
git add .
# コミット
git commit -m "サイトのヘッダーを更新"
# GitHubにプッシュ
git push origin main
```

② サーバーにSSH接続し、GitHubからpull
```bash: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に挑戦される方はぜひこちらの記事もどうぞ

https://qiita.com/Atsusan/items/35951ee1cf98ecae8aa0

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