Git pushだけでWebサイトを自動更新！GitHub Actionsで実現するSSH自動デプロイ（CI/CD）構築ガイド

2025年10月9日

Matsue

GitHub Actions

みなさん、こんにちは！WEB工房しずおかの開発チームです。

普段、Webシステムの構築やサイト運用を行っている中で、「ローカルでビルドして、手動でFTPアップロードする」という作業に手間を感じたことはありませんか？

Web制作やシステム開発の現場では、コードをGitHubに push するだけで、ビルドからサーバーへのファイル転送までをすべて自動化する「CI/CD（継続的インテグレーション／継続的デプロイ）」環境の構築がスタンダードになっています。

今回は、GitHubが提供する強力な自動化ツール「GitHub Actions」を使い、静的サイトジェネレーター等で構築したWebサイトを、Git push一発でNginx（Linuxサーバー）へ自動デプロイする具体的な手順・設定方法を分かりやすく解説します！
(※本記事では検証例としてGatsby.jsのプロジェクトを使用しています)

作業の自動化を図りたい方や、GitHub Actionsの使い方をマスターしたい方はぜひ参考にしてみてください。

要件

githubにpushするだけでリモートサーバに自動ビルドできる仕組みを実演したい
今回使用するリモートサーバはNginx
自動更新したいサイトはこちら

目標

1.GitHub に push したら自動で Gatsby をビルド

2.出力された public/ フォルダを Nginx の公開ディレクトリにアップロード

3.即座にサイトが更新！

上記を叶えるために、今回はGithubが提供する「Github Actions」を利用して自動ビルドを実現します。

こちらを利用することで、push・issues等のイベントをトリガーとしてビルド・テスト・デプロイなどの開発ワークフローを自動化することができるようなので試してみます。

↓Github Actionsの詳細はこちら↓

https://github.co.jp/features/actions

実際に試してみる

必要なもの

ソースコードがあるGitHubリポジトリ
SSH接続が可能なリモートサーバー
サーバー側にNode.jsが入っている（または入れられる）
サーバーに /var/www/html などの公開ディレクトリがある

今回は下記条件で行います。

GitHubリポジトリ：用意済み
リモートサーバー： https://telework-cooking.info/
公開ディレクトリ： /var/www/telework-cooking.info/public

手順

①ローカルでGitHub Actions用のSSH鍵を作成する

Github actions からリモートサーバにssh接続するための公開鍵・秘密鍵を作成します。

新しい SSH キーを生成して ssh-agent に追加する - GitHub Docs

ssh-keygen -t ed25519 -C "your_email@example.com"

上記記事のこちらを参考に鍵を作成します。

「"your_email@example.com"」の部分はGithubで使用している自身のアドレスにします。

ssh-keygen -t ed25519 -C "your_email@example.com"

入力後ファイル名を尋ねられますが、今回はデフォルトのファイル名のままとするため未入力のままEnterで進みます。

その後パスフレーズの入力を二度求められました。

enter passphrase

新しい SSH キーを生成して ssh-agent に追加する - GitHub Docs

パスフレーズの入力を求められたら、Enterキーを押します。

こちらも先ほどの記事を参考に、パスフレーズは何も指定せずそのままEnterで進みます。

「.ssh」配下を確認

「.ssh」配下を確認してみると

id_ed25519
id_ed25519.pub

という２つの鍵ファイルが無事作成されました。

②リモートサーバ側に公開鍵を設定する

リモートサーバに接続し、先ほど作成した公開鍵「id_ed25519.pub」を「/.ssh」配下に転送します。

今回はFTPソフトを使用して転送します。

ファイル転送完了

転送完了しました。

「/.ssh」配下を確認してみると、公開鍵を管理するためのファイル「authorized_keys」がまだ存在していなかったので、先ほど転送したファイルの名前を「authorized_keys」に変更して作成することとします。

$ mv id_ed25519.pub authorized_keys

「authorized_keys」に名称変更

無事に名称変更でき、「authorized_keys」ファイルができました。

ファイルの権限を600にする必要があるようなので、変更します。

$ chmod 600 authorized_keys

chmod 600 authorized_keys

「authorized_keys」のパーミッションが「-rw-------」(600)となっており、権限変更完了です。

「/.ssh」ディレクトリのパーミッションも700に変更する必要があるようなので、変更します。

$ chmod 700 ~/.ssh

chmod 700 ~/.ssh

「drwx------」(700)となっており、変更できました。

これで公開鍵の設定が完了です。

③Githubで秘密鍵を登録する

1.GitHubで対象リポジトリを開く

2.「Settings」→「Secrets and variables」→「Actions」へ

3.「New repository secret」をクリック

4.名前に「DEPLOY_KEY」と入力

5.秘密鍵ファイル（id_ed25519 の中身）を貼り付けて保存

④GitHub Actionsの設定ファイルを作る

GitHub Actionsからリモートサーバに接続して、指定のフォルダにビルドするための設定ファイルを作成します。

プロジェクトのルートに「.github/workflows/deploy.yml」を作成して、同ファイル内に設定内容を記述します。

今回、記述内容はChatGPTに相談しながら作成してみました。

name: Build and Deploy Gatsby

on:
  push:
    branches:
      - main  # メインブランチにpushしたときに実行

jobs:
  build-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20

      - name: Install dependencies
        run: npm ci

      - name: Build Gatsby site
        run: npm run build

      - name: Deploy via SSH
        uses: appleboy/scp-action@v0.1.7
        with:
          host: **** #伏せています
          port: **** #伏せています
          username: **** #伏せています
          key: ${{ secrets.DEPLOY_KEY }}
          source: "public/*"
          target: "/var/www/telework-cooking.info/public"

記述内容を１つずつ確認していきます。

name: Build and Deploy Gatsby

ここはワークフローの名前を指定する箇所で、 GitHub Actionsの画面に「Build and Deploy Gatsby」というタイトルで表示されます。

on:
  push:
    branches:
      - main  # メインブランチにpushしたときに実行

これは「どんなタイミングで実行するか」を指定しています。

push: → コードがpushされたとき
branches: → main ブランチにpushされた場合のみ実行

【jobsセクション】

GitHub Actionsは「ジョブ（job）」という単位で動きます。

jobs:
  build-deploy:
    runs-on: ubuntu-latest

ここでは build-deploy というジョブを定義しています。

GitHubのサーバ上で Ubuntu環境（Linux）を起動して処理を実行します。
Gatsbyのビルドなどはこの中で行われます。

【stepsセクション】

    steps:

この中が実際の作業手順（ステップ）です。1行ごとにひとつのステップを実行します。

STEP1：コードを取得する

      - name: Checkout code
        uses: actions/checkout@v4

GitHub Actionsが自分のリポジトリのソースコードを取得します。

STEP2：Node.jsをセットアップする

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20

GatsbyはNode.jsで動くため、Nodeのバージョンを指定します。

STEP3：依存パッケージをインストールする

      - name: Install dependencies
        run: npm ci

npm ci は、package-lock.json に基づいて完全に同じ依存関係をインストールします。開発環境と同じ状態で確実にビルドできます。（npm install よりも再現性が高く、CI/CD向き）

STEP4：Gatsbyサイトをビルドする

      - name: Build Gatsby site
        run: npm run build

Gatsbyのビルドを実行します。これで次のSTEPで指定したディレクトリの中に静的ファイルが生成されます。

STEP5：サーバにアップロード（デプロイ）

      - name: Deploy via SSH
        uses: appleboy/scp-action@v0.1.7
        with:
          host: **** #伏せています
          port: **** #伏せています
          username: **** #伏せています
          key: ${{ secrets.DEPLOY_KEY }}
          source: "public/*"
          target: "/var/www/telework-cooking.info/public"

この部分が「アップロード（転送）」のステップです。

appleboy/scp-action という便利なGitHub公式アクションを使っています。

host：接続先サーバのIPアドレス
port：SSHポート番号
username：SSHログインのユーザー名
key GitHub：Secretsに登録した秘密鍵（DEPLOY_KEY）を使用
source：アップロードするローカル側のファイル（public/*）
target：サーバ側で配置するディレクトリ

public フォルダ内のビルド結果を /var/www/telework-cooking.info/public にアップロードする設定です。

④GitHubにpushして動作確認

③で自動ビルドのための設定ファイル作成が完了したため、同ファイルを一度pushして動作を確認してみます。

今回は「自動ビルド用設定ファイル追加」というメモを残してコミットします。

$ git commit -m “自動ビルド用設定ファイル追加”
[main c46b9fd] “自動ビルド用設定ファイル追加”
 1 file changed, 36 insertions(+)
 create mode 100644 .github/workflows/deploy.yml

$ git push origin main

無事にpushが完了したため、リポジトリ管理画面を確認してみます。

GitHub Actionsの動作ログはリポジトリ管理画面のメニュー「Actions」より確認可能です。

Actions確認

確認してみると、③で作ったファイル内で指定したワークフロー名「Build and Deploy Gatsby」のメニューができていました。

その中にコミット時のメモ「自動ビルド用設定ファイル追加」のタイトルが表示されていて、クリックするとjobごとのログが確認できるようです。

job確認

「build-deploy」をクリックします。

step確認

stepごとの処理内容、処理にかかった時間など確認することができます。

今回は一番最後のstep「Complete job」まで問題なく完了しているようなので、無事にファイルが作成できており正常に動作しているようです。

step詳細確認

stepのタイトルをクリックすることで、処理内容の詳細を確認できます。

⑤pushのみでサイトの変更が反映されるか確認

自動ビルドの設定が完了したため、本当にpushのみでサイトへの変更が反映されるのか確認してみます。

まずは現在のサイトの状態を確認。

https://telework-cooking.info/

サイト確認

今回はサイト全体の背景色を変更してみます。

backgroundに「#FFF8DC」を指定します。

ソースコードを変更できたら、再度pushしてサイトを確認してみます。

$ git commit -m “サイトの背景色変更”
[main f91e9e4] “サイトの背景色変更”
 1 file changed, 14 insertions(+), 13 deletions(-)

$ git push origin main

ログを確認してみます。

Actions確認

「サイトの背景色変更」の左に緑のチェックマークがついて、無事に処理が完了したようです。

サイトを確認してみます。

サイト確認

背景色が変わっていませんでした・・・。

リモートサーバ内を確認してみると、どうやらビルドするフォルダが間違っている様子。

ビルドしたいフォルダが

「/var/www/telework-cooking.info/public」なのに対して、配下にさらに「public」が作成されており、
「/var/www/telework-cooking.info/public/public」にビルドがされてしまっていました。

原因としては、deploy.ymlの下記の部分。

source: "public/*"
target: "/var/www/telework-cooking.info/public"

この "public/" の指定が、appleboy/scp-action では「public フォルダの中身」ではなく「public フォルダ自体」をコピーしてしまう挙動になっている場合があります。*

chatGPTに相談したところ、上記の回答がありました。

chatGPTにアドバイスをもらい、この部分を「"public/*"」→「"public/.”」に変更して再度pushしてみます。

source: "public/."
target: "/var/www/telework-cooking.info/public"

$ git commit -m “自動ビルド設定ファイル修正”
[main 6c61d11] “自動ビルド設定ファイル修正”
 1 file changed, 1 insertion(+), 1 deletion(-)

$ git push origin main

Actions確認

無事、処理が完了していました。

ですが、やはり「/var/www/telework-cooking.info/public」の中に「public」をビルドしてしまいました。

今度は下記に修正して再度試してみます。

source: "./public"
target: "/var/www/telework-cooking.info"

【💡 GitHub Actions（scp-action）設定時の注意点】
appleboy/scp-action を使用する際、source: "public/*" のように指定すると、リモート側に「public」ディレクトリ構造を維持したまま転送しようとします。
そのため、ターゲットを /var/www/.../public にしてしまうと、結果として /public/public/ と重なってしまいます。転送先ディレクトリのルートにそのまま中身を展開したい場合は、source: "./public" に対し target: "/var/www/telework-cooking.info" と指定するのがポイントです。

変更後、再度pushします。

$ git commit -m “自動ビルド設定ファイル修正25100902”
[main a602730] “自動ビルド設定ファイル修正25100902”
 1 file changed, 2 insertions(+), 2 deletions(-)
 
$ git push origin main

Actionsログを確認。

Actions確認

処理が正常終了しており、リモートサーバを確認したところ「/var/www/telework-cooking.info/public」が上書き更新されておりビルドできている様子です！

サイトを確認してみます。

サイト確認

無事に背景色が変更されていました！

再度pushのみで変更が反映されるか確認するため、下記の変更を加えてみます。

背景色をもう少し薄い黄色「#fffff0」に変更
画像（No Image）を角丸にする
サイトタイトルを「おうちでつくるテレワークレシピ」に変更してフォントサイズ調整

ソース変更後、pushします。

$ git commit -m “サイトタイトル変更・デザイン修正”
[main 3ab3c7a] “サイトタイトル変更・デザイン修正”
 4 files changed, 117 insertions(+), 83 deletions(-)

$ git push origin main

Actions確認

無事に処理が終了したためサイトを確認してみます。

サイト確認

変更が反映されていました！

これでgithubにpushするだけでリモートサーバに自動ビルドする仕組みが完成です。

まとめ：GitHub Actionsで快適なWeb制作・運用環境を整えよう

今回は、Gatsby.jsサイトを対象に「GitHub Actions」を使った自動デプロイ（CI/CD）環境の構築手順を解説しました。

途中で appleboy/scp-action の転送用パス設定（source と target の階層関係）によってサブフォルダが生成されてしまうトラブルもありましたが、ディレクトリの指定方法を見直すことで、無事に git push だけでの自動更新を再現できるようになりました。

一度この仕組みを作っておけば、

手動でのビルド忘れやアップロード漏れの防止
FTPツールを毎回起動する手間の削減
複数人での開発・運用時の作業フロー統一

など、開発効率と安全性が飛躍的に向上します。

開発チームでは、大規模Webシステムから静的サイトの運用まで、現場の作業負担を減らす自動化の取り組みを日々進めております。自社サイトやWebシステムの運用フロー改善でお悩みの方は、ぜひGitHub Actionsの導入に挑戦してみてください！