全体の流れ
1. あなたがコードをpushする
あなたのパソコン → GitHub リポジトリいつものように`git push`でコードをGitHubに送信します。
2. GitHub Actionsが動き出す
GitHubが「新しいコードが来た！」と察知して、自動的に作業を開始します。
3. 仮想のパソコンが起動
GitHub が仮想のUbuntuパソコンを用意してくれます。このパソコンで作業が行われます。
4. あなたのコードがダウンロードされる
仮想パソコンに、あなたがpushしたコードがダウンロードされます。
5. FTPでサーバーに転送
仮想パソコンからあなたのWebサーバーへ、FTPでファイルが送信されます。
設定ファイルの例
`.github/workflows/deploy.yml`というファイルを作成します：
name: ウェブサイトをサーバーに自動デプロイ
# いつ実行するか
on:
push:
branches: [ main ] # mainブランチにpushされたとき
jobs:
deploy:
runs-on: ubuntu-latest # Ubuntu仮想マシンを使用
steps:
# ステップ1: コードをダウンロード
- name: コードをチェックアウト
uses: actions/checkout@v3
# ステップ2: FTPでサーバーに転送
- name: サーバーにFTPアップロード
uses: SamKirkland/FTP-deploy-action@4.3.3
with:
server: あなたのサーバー.com
username: ${{ secrets.FTP_USERNAME }}
password: ${{ secrets.FTP_PASSWORD }}
local-dir: ./public/ # アップロードしたいフォルダ
server-dir: /public_html/ # サーバー上の置き場所FTP Deploy Actionの詳細な動作
ステップ1: サーバーへの接続
仮想パソコン → あなたのWebサーバー- FTPサーバーに接続を試行
- ユーザー名とパスワードで認証
- 接続できない場合はエラーで停止
ステップ2: ファイルの比較
既存のファイル ⚖️ 新しいファイル- サーバーにあるファイルと比較
- 変更されたファイルだけを特定
- 無駄な転送を避けるための賢い仕組み
ステップ3: ファイルの転送
📤 新しいファイル → アップロード
📝 変更されたファイル → 上書き
🗑️ 削除されたファイル → サーバーからも削除ステップ4: 作業完了
- 転送が完了すると、仮想パソコンは自動的に削除されます
- あなたのWebサイトが更新されています！
実際のログの見方
成功時
📁 ローカルの "public" をリモートの "public_html" と同期中
🔍 ファイルをチェック中...
📤 index.html をアップロード中
📤 style.css をアップロード中
📤 script.js をアップロード中
✅ デプロイ完了！エラー時
❌ エラー: FTP接続に失敗しました
原因の可能性:
- サーバーアドレスが間違っている
- ユーザー名・パスワードが間違っている
- サーバーのファイアウォール設定必要な準備
1. GitHub Secretsの設定
リポジトリの設定で、以下の秘密情報を登録します：
- `FTP_USERNAME`: FTPのユーザー名
- `FTP_PASSWORD`: FTPのパスワード
- `FTP_SERVER`: サーバーのアドレス
2. サーバー側の準備
- FTPアクセスが有効になっていること
- 適切なフォルダ権限が設定されていること
メリット
- 自動化: pushするだけで公開される
- 効率的: 変更されたファイルのみ転送
- 安全: パスワードはGitHub Secretsで保護
- 履歴管理: デプロイの記録が残る
注意点
- FTPは暗号化されていないため、重要なデータには不向き
- より安全なSFTPの使用を推奨
- サーバーの設定によっては追加の準備が必要
まとめ
GitHub Actions FTP Deployを使うことで、コードをpushするだけで自動的にWebサイトが更新されるようになります。一度設定してしまえば、あとは普通にコードを書いてpushするだけ。まるで魔法のような便利さを体験できますよ！