サーバー上でGitHubリポジトリからファイルを自動更新する方法

by

GitHubリポジトリから最新のコードを取得し、自動的にデプロイを実行する仕組みを作成する方法を解説します。この手順を使用すると、手動での操作を最小限に抑え、効率的にサーバーを管理できます。

必要な条件

  • GitHubリポジトリが正しく設定され、サーバーでクローンされていること。
  • Svelteアプリケーションがデプロイされている（PM2やその他の方法で実行中）。
  • 必要なNode.js依存関係がインストールされていること。

自動更新の仕組み

以下の流れで設定を行います：

  1. GitHubからコードを自動取得:
    • git pull を使用してリモートリポジトリから最新の変更を取得します。
  2. 依存関係を更新:
    • npm install を実行して、必要な依存関係をインストールします。
  3. アプリケーションを再ビルド:
    • npm run build を使用してSvelteアプリをビルドします。
  4. アプリケーションを再起動:
    • PM2などでアプリケーションを再起動します。

スクリプトを作成

自動更新を行うスクリプトを作成します。

スクリプトファイルを作成: サーバー上で以下のコマンドを実行し、スクリプトファイルを作成します。

下記のkaihatsublogはSvelteアプリがデプロイされているディレクトリでGitHubのリポがクローンされている状態です。

sudo nano /var/www/kaihatsublog/update.sh

スクリプト内容を記載: 以下の内容をスクリプトに記載します。

#!/bin/bash

# 移動先ディレクトリ
cd /var/www/kaihatsublog

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

# 必要な依存関係をインストール
npm install

# Svelteアプリをビルド
npm run build

# アプリケーションを再起動 (PM2を使用している場合)
pm2 restart kaihatsublog

もし、メモリの小さい共有のサーバーを使用している場合は下記の様に更新できます。

#!/bin/bash

# 移動先ディレクトリ
cd /var/www/kaihatsublog || exit

# 最新のコードを取得
echo "Fetching latest code from GitHub..."
git pull origin main

# 必要な依存関係をインストール
echo "Installing dependencies..."
npm install

# Svelteアプリをビルド (ヒープメモリ制限を増加)
echo "Building the application with increased memory limit..."
NODE_OPTIONS="--max-old-space-size=4096" npm run build

# アプリケーションを再起動 (PM2を使用)
echo "Restarting the application with PM2..."
if pm2 list | grep -q "kaihatsublog"; then
  pm2 restart kaihatsublog
else
  echo "PM2 process 'kaihatsublog' not found. Starting a new PM2 process..."
  pm2 start npm --name "kaihatsublog" -- start
fi

# PM2設定の保存
pm2 save

echo "Deployment complete!"

※ main の部分は、GitHubのブランチ名に合わせて変更してください。 ※ pm2 restart の引数は、PM2に登録されたアプリ名に合わせてください。

スクリプトに実行権限を付与:

sudo chmod +x /var/www/kaihatsublog/update.sh

スクリプトを実行して動作を確認します：

sudo /var/www/kaihatsublog/update.sh

それぞれ記載したコマンドの結果がかえってきます。

Fetching latest code from GitHub...
Updating 99bedc8..be20802
Fast-forward
 src/app.css     | 359 +++++++++++++++++++++++++++++++++++++++++----------
 ...
Building the application with increased memory limit...
Restarting the application with PM2...
Deployment complete!

修正手順

1. package.json の修正

Svelteアプリが外部アクセス可能でない場合、start スクリプトに --host オプションを追加します：

sudo nano /var/www/kaihatsublog/package.json

以下のように修正します：

"scripts": {
    "start": "vite preview --port 3000 --host"
}

保存後、PM2プロセスを再起動します：

下記のkaihatsublogはpm2インスタンスの名称です。

pm2 restart kaihatsublog
pm2 save

保存して閉じます。

2. PM2 プロセスの再起動

必要に応じてPM2 でアプリを再起動します。

pm2 restart kaihatsublog
pm2 save

3. 動作確認

バックエンドが応答するか確認:

curl http://127.0.0.1:3000

ブラウザで確認：

  • http://yourdomain.com
  • または http://your-server-ip

トラブルシューティング

PM2 プロセスが起動しない場合

PM2 ログを確認します：

pm2 logs kaihatsublog

Nginx経由の接続に問題がある場合

Nginxの設定ファイルを確認し、proxy_pass が適切なポートに設定されていることを確認します：

location / {
    proxy_pass http://127.0.0.1:3000;
    ...
}

Nginx 設定を再読み込み：

sudo systemctl reload nginx

Leave a Comment