スポンサーリンク

Git初心者がGitHub ActionsでXserver自動デプロイに挑んだ奮闘記!Cursorとの連携も。

スポンサーリンク
スポンサーリンク

なんだかよくわからないままGitを使い始め、「これ、本当に便利になるの……?」と疑いながらも、今日も今日とて初心者は奮闘中です。

正直、最初はエラーが出まくりで、心がポッキリ折れる寸前でした。「もうGitなんて、得体が知れないしメンドイ!」と投げ出したくなる気持ちをぐっと堪えて、なんとか会社のPCに環境を構築。さらにGit(GitHub)からXserverへ自動でファイルをアップロードする仕組みまで辿り着きました。

ベテランのエンジニアさんから見れば「屁でもないこと」なのかもしれません。でも、初心者にとっては一歩一歩がエベレスト級の難所なんですよね……。

「でも、頑張る! 便利になるって信じてるから!」

そんな私の、泥臭くも一歩前進した記録をここに残します。同じように「Git、わけわからん!」と頭を抱えている仲間の助けになれば嬉しいです。

スポンサーリンク

1. 会社のPCにクリーンな環境をセットする(Git Clone)

初心者がまず悩むのが、「今の環境をどうやって整理して、新しく始めるか」というところ。 中途半端にファイルが残っていると、何が原因でエラーが出ているのかすら見えなくなります。

今回は会社のPCで「1からやり直したい」と思ったので、まずは環境をまっさらにすることから始めました。

まずは環境をリセット!

Windowsユーザーの味方、Xamppのhtdocsフォルダ。この中にある、これまでぐちゃぐちゃに弄ってしまったプロジェクトフォルダを一度全部消去します。まっさらな状態にするのって、勇気がいりますが気持ちいいですね。

魔法の呪文「git clone」

そこから、GitHubにあるリモートリポジトリをローカル(自分のPC)にコピーします。

>git clone https://github.com/********/qumcum.com.git

たったこれだけで、最新の状態が手元のPCに再現される。これだけでも「おぉ……」と感動します。

修正からPushまでの基本ルーティン

慣れてしまえば、日々の作業はたったこれだけのコマンドで済むようです。

  1. プログラムをガリガリ修正・改造する

  2. 変更をステージングするgit add .

  3. メッセージを添えて記録するgit commit -m "修正内容のメッセージ"

  4. GitHubへ送信!git push origin main

「たったこれだけ」なんですよ。理屈ではわかっています。 でも、ここに行き着くまでに、何度も何度も得体の知れないエラーに囲まれて、本当に苦労しました。でも、ようやくこの基本のサイクルが回せるようになってきました。

2. GitからXserverへ自動アップロードしたい!

基本ができるようになると、ちょっと欲が出てくるのが人間の性(さが)です。 最近お気に入りのエディタ「Cursor」でコードを修正して、GitHubへpushした瞬間、勝手に本番サーバー(Xserver)へアップロードされたら最高じゃないですか?

これを「自動デプロイ」って言うらしいのですが、初心者には魔法のように聞こえます。 ただ、ひとつ懸念が。「タイミングを間違えると、まだ未完成なのに勝手にアップロードされちゃうかも?」という不安です。でも、これについては「mainブランチにpushした時だけ」というルールを決めれば解決できそう。

よし、挑戦です!

3. GitHub Actionsを使って自動化の情報をセットする

GitHubには「GitHub Actions」という、特定の操作をきっかけに作業を自動化してくれる超絶便利な機能があります。これを使って、FTP転送を自動化します。

ステップ1:GitHub側に秘密の情報を預ける

サーバーのログイン情報(パスワードなど)を、そのままコードに書くのは超危険。 なので、GitHubの安全な金庫に保管します。

  1. GitHubのリポジトリ画面で Settings  Secrets and variables  Actions を開く。

  2. New repository secret をクリックして、以下の情報を1つずつ登録していきます。

「Add secret」で1行ずつ登録。これでGitHubが私の代わりにサーバーへログインしてくれる準備が整いました。

Name (名前) Secret (値)
FTP_SERVER エックスサーバーのサーバー番号(例: sv123.xserver.jp
FTP_USERNAME サーバーのFTPユーザー名(例: xs123456 など)
FTP_PASSWORD サーバーのFTPパスワード

を1行ずつAdd secret で登録していく

4. プロジェクトに「デプロイ指令書」を作る

次に、プロジェクトのフォルダの中に「何をどう自動化するか」を書いた設定ファイル(YAMLファイル)を作ります。

プロジェクトのルート(一番上の階層)に、以下のようなフォルダとファイルを作成します。

(プロジェクトのルート) 
 └── .github/ 
    └── workflows/ 
       └── deploy.yml <-- これを新しく作る!

deploy.ymlの中身

name: Deploy to Xserver
on:
  push:
    branches:
      - main  # mainブランチにpushされたら実行
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: FTP Deploy
        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
        with:
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          local-dir: ./
          # 転送先(qumcum.comのpublic_html直下)
          server-dir: /qumcum.com/public_html/

この設定ファイルが、GitHub Actionsへの「指示書」になります。「mainブランチに更新があったら、金庫の中のパスワードを使って、このサーバーのこのフォルダにファイルを投げてね!」という具合です。

5. 運命の瞬間:pushして自動転送を確認!

git add .
git commit -m "GitHub Actionsの設定を追加"
git push origin main

これだけで……。 なんと、勝手にFTP転送が始まります!

GitHubの「Actions」タブを見ると、作業が進んでいる様子がリアルタイムでわかります。完了すると、緑のチェックマークが。 今までFileZillaなどのFTPソフトを開いて、手動でファイルをドラッグ&ドロップしていたあの手間はなんだったのか……。

しかも、GitHub側にはコミットメッセージ(修正内容のメモ)がしっかり残っているので、「いつ、何を直して、いつ本番に反映したか」が丸わかり。これは、初心者にこそ必要な安心感かもしれません。

6. 自宅と会社、どこでも作業がスムーズに!

この環境を一度作ってしまうと、驚くほど作業が楽になります。

会社で作業してpushして帰宅。 家で「あ、あそこちょっと直したいな」と思ったら、

git pull origin main

とやるだけで、会社でやった最新の仕事が手元のPCに降ってくる。 そして修正してpushすれば、そのまま本番サーバーも更新される。

「うううんんんんんんんんんんんん……便利だ……!!」

あんなに「メンドイ! 得体がしれない!」と叫んでいたGitが、今では頼もしい相棒に見えてきました。

まとめ:初心者がGitと仲良くなるために

まだまだGitの深い機能(ブランチを分けたり、マージしたり、コンフリクトを直したり……)については、考えただけで知恵熱が出そうです。

でも、今回のように「GitHub Actionsで自動化する」という具体的なメリットを体験すると、重い腰を上げて勉強した甲斐があったな、と感じます。

今回の学び:

  • Gitは、最初はエラーだらけで当たり前。

  • 自動化(GitHub Actions)を組み合わせると、FTPソフトの手間が消える。

  • pushpullを覚えるだけで、会社と自宅の連携が爆速になる。

もし、あなたが「Gitなんてエンジニアが使うものでしょ?」と思っているなら、ぜひこの「自動アップロード」から試してみてください。その便利さに気づいた時、きっと私のように「うううんんん……」と唸ってしまうはずですから。

さあ、明日もエラーに負けずに頑張るぞ!

コメント

タイトルとURLをコピーしました