こんにちは、エンジニアの坂口です。
Web制作や保守運用をしていると、本番環境、つまり、サイトやサービスが稼働中のサーバ上のファイルを直接触る作業があります。
本来はGit管理された状態からデプロイするのが理想ですが、既存案件や古い運用フローだと、どうしてもFTPでファイルをアップロードする場面があります。
※ FTPはセキュアではないので、本来は使うべきではないとかいう話は一旦置いておいて。
こうした作業で特に気をつけたいのが、ファイルの上書きやアップロード漏れです。
たとえば、
「本番のファイルを間違って上書きしてしまった」
「必要なファイルをアップロードし忘れた」
「バックアップとの差分がよく分からなくなった」
といったことが起きると、原因の特定や復旧に時間がかかってしまいます。
今回は、そのあたりを少しでも防ぐために、自分がやっているファイル比較の方法、使えそうなツールや手順をまとめてみました。
まず前提として、いきなり本番ファイルを触らない
当たり前ではあるのですが、まずは本番ファイルを直接編集しないことが大事だと思います。
作業前に必ずバックアップを取る。
できれば、日付つきのフォルダに退避しておく。
たとえばこんな感じです。
backup/ 2026-07-01/ index.php css/ js/
この状態にしておくと、あとから
「作業前と作業後で何が変わったか」
「アップロードしたファイルに漏れがないか」
「意図しない変更が入っていないか」
を確認しやすくなります。
手間はかかりますが、こうした事前準備が結果的に事故防止につながると思います。
Git管理フォルダに一時的に上書きして差分を見る
自分がよくやるのは、FileZillaなどで本番ファイルを取得し、Gitで管理しているローカルフォルダ上で差分を確認する方法です。
もちろん、取得したファイルをそのままコミットするわけではありません。
確認用のブランチを作ったり、一時確認用のコピーを用意したりしたうえで、本番から取得したファイルをローカル側に置きます。
そうすることで、VS CodeやSourceTree、Gitコマンドなどを使って差分を確認できます。
git diff
これで、ローカルの管理ファイルと本番から取得したファイルの差分が見られます。
Gitを使っている案件なら、これが一番手軽かもしれません。
「本番にあるファイルが、リポジトリ上のファイルと同じなのか」
「本番だけに入っている修正がないか」
「今回アップロード予定の変更だけになっているか」
といった確認がしやすいです。
ただし、作業中のローカルファイルにそのまま上書きしてしまうと危ないので、確認用ブランチや一時フォルダを使うなど、誤って作業中の内容を壊さないように注意が必要です。
VS Codeのファイル比較を使う
VS Codeでも2つのファイルを比較できます。
ファイル一覧や、開いているエディターの一覧上で片方のファイルを右クリックして、
比較対象の選択
を選び、もう片方のファイルで
選択項目と比較
を選ぶと、差分表示ができます。
もっと簡単にするには、ファイルを2つ選択して右クリックして、
選択項目の比較
とやると、色付きで比較できて差分が見られます。
もちろん編集もできるので、バックアップファイルや過去のバージョンのファイルとの比較をしやすいです。
普段VS Codeを使っている人なら、これが一番自然かもしれません。
ソースコードの修正確認とかでも、そのまま見られるので便利です。
ちょっとした差分確認なら、専用ツールを起動しなくてもVS Codeだけで十分な場面も多いと思います。
GUIの比較ツールを使う
ファイル単位だけでなく、フォルダごと比較したい場合は、GUIの比較ツールが便利です。
変更箇所がハイライトされますし、ツールによっては左右の差分を見ながらマージもできます。
CompareMerge
CompareMergeは、Mac向けのファイル比較・マージツールです。
WinMergeに近い感覚で使えるMac用の比較ツールとして紹介されることがあり、テキストファイルの差分確認やマージに使えます。Mac App Storeにも掲載されており、ファイルの変更内容を確認したい場面で候補に入るツールです。
古い記事では無料版やSourceForge版への言及もありますが、現在利用する場合は配布元や対応OS、更新状況を確認してから使うのがよさそうです。
参考: https://vutienthinh.wordpress.com/comparemerge/
Meld
Meldも有名な比較・マージツールです。
Linux系の印象が強いですが、MacでもHomebrewなどから入れられるようです。
ただ、macOSでは完全に公式サポートされているわけではないようなので、環境によっては少しクセがあるかもしれません。
無料で使えるGUI比較ツールを探しているなら候補には入ると思います。
WinMerge
WinMergeはWindowsではよく使われているファイル・フォルダ比較ツールです。
個人的にはかなり使いやすいと思っています。
テキストファイルだけでなく、フォルダ比較や画像比較もできるので、Web制作の現場では役に立つ場面が多いです。
ただし、基本的にはWindows向けのツールなので、Macで使う場合は少し工夫が必要です。
WineskinServerを使ってMac上でWinMergeを動かす方法もあるようですが、私が試したときはどうまく導入できなかったです。
パッケージ名が変わっていたり、エラーが発生したりで、最新の情報がまとまってない感じでした(以前試したときは動作したのですが)。
MacでどうしてもWinMergeっぽい操作感が欲しい場合は、試してみる価値はあるかもしれません。
参考: https://qiita.com/yaju/items/aa80b38bfb20e5f51a51
WinXMerge
WinXMergeという、WinMergeのMac版っぽい雰囲気のツールもあります。
自分ではまだあまり試せていませんが、名前や画面の方向性としてはWinMergeユーザーには気になる存在です。
テキスト比較、フォルダ比較、画像比較、CSV比較、Excel系ファイルの比較などにも対応しているようなので、今後もう少し触ってみたいところです。
参考: https://zenn.dev/antilogic/articles/ac4f945a41516a
VisualDiffer
Mac向けのフォルダ・ファイル比較ツールとして、VisualDifferという選択肢もあります。
macOSアプリとして作られているので、MacでGUI比較をしたい場合には試してみてもよさそうです。
WinMergeの代替を探している人には、こういうMacネイティブ寄りのツールも合うかもしれません。
参考: https://github.com/visualdiffer/visualdiffer
Kaleidoscope
有償ですが、Kaleidoscopeはかなり使いやすかったです。
見た目も操作感もMacらしくて、ファイル比較、フォルダ比較、画像比較などが気持ちよく使えます。
ただ、以前の買い切り形式からサブスク寄りになったタイミングで、自分は使うのをやめました。
便利なのは間違いないですが、まずは無料ツールで運用できないか試してからでもいいのではないかと思います。
Finderの右クリックメニューから比較できるようにする
Macの場合、Finderでファイルやフォルダを複数選択して、右クリックメニューから比較ツールを起動できるようにしておくと便利です。
Automatorやショートカットアプリを使って、
〇〇で比較
のようなクイックアクションを作っておくイメージです。
たとえば、2つのファイルを選択して右クリックし、VS Codeなどに渡すようにしておくと、GUIでの比較がかなり楽になります。
毎回ターミナルでパスを打つのは面倒なので、こういう導線を作っておくのも地味に効きます。
このあたりの設定方法は、Automatorやショートカットアプリの使い方として紹介されている記事がいくつかあります。
自分もよく使う形を整理できたら、別記事でまとめてみてもよさそうだと思っています。
diffコマンドを使う
GUIツールを使わず、CLIで確認するなら `diff` コマンドがあります。
たとえば、2つのファイルを比較するならこうです。
diff -u path/to/file1.php path/to/file2.php
`-u` を付けると、いわゆる unified diff 形式で表示されます。
Gitの差分表示に近い形なので、エンジニアには見慣れた形式だと思います。
フォルダ同士を比較するなら、こんな感じです。
diff -ru path/to/dir1 path/to/dir2
ただ、差分が多いとターミナル上では見づらくなりがちです。
ざっくり確認はCLI、細かく見るときはGUI、という使い分けが現実的ではないかと思います。
git diff --no-index も便利
Git管理外の2ファイル、または2フォルダを比較したい場合は、`git diff --no-index` も使えます。
git diff --no-index path/to/before path/to/after
Gitリポジトリではないフォルダ同士でも比較できます。
普段Gitの差分表示に慣れている人なら、通常の `diff` コマンドより見やすいかもしれません。
本番から取得したバックアップフォルダと、アップロード予定のフォルダを比較するような用途でも使えます。
git diff --no-index backup/2026-06-26 upload/
こうしておくと、アップロード漏れや、意図しない変更に気づきやすくなります。
rsync の dry-run でアップロード前に確認する
サーバへの反映方法によっては、`rsync` の dry-run も便利です。
rsync -avnc ./local/ user@example.com:/path/to/remote/
`-n` を付けると、実際にはコピーせずに「何が更新される予定か」だけ確認できます。
FTPだけの運用だと使えない場面もありますが、SSHが使えるサーバならかなり有効です。
アップロード前に、
- 「追加されるファイル」
- 「更新されるファイル」
- 「差分がないファイル」
を確認できるので、手作業アップロードより安心感があります。
個人的には、SSHが使えるならFTPよりrsyncやデプロイツールに寄せたほうが安全ではないかと思います。
できれば「比較する前提」の作業フローにする
ツールを入れることも大事ですが、それ以上に大事なのは作業フローだと思います。
たとえば、こんな感じです。
- 本番ファイルをバックアップする
- アップロード予定ファイルを別フォルダにまとめる
- バックアップとアップロード予定ファイルを比較する
- 差分を確認する
- 問題なければアップロードする
- アップロード後に再度、本番ファイルを取得して比較する
ここまでやると少し手間は増えますが、確実です。
本番作業のミスはあとから取り返すほうが大変ですので、間違いない手法を取るのが良いかと思います。
特に古いCMS、独自実装、Git管理されていないファイルが混じっている案件では、差分確認を作業フローに入れておいたほうが安全だと思います。
baserCMSやCakePHPの案件でも、View、Template、Helper、Elements、CSS、JS、画像などなど、触るファイルが散らばることがあります。
そういうときこそ、感覚でアップロードするのではなく、比較ツールを使って確認したほうがいいのではないかと思います。
キャッチアップでの取り組み
キャッチアップでは、メンバーが作成したデプロイツールを利用しています。
デプロイツールでは、こうしたバックアップやリリース作業を事前に準備したリストからワンコマンドで実行できます。
手作業でのミスを減らすためにも、こういったツールを使いこなして仕組み化していくと、ケアレスミスを減らしていけるのではないかと思います。
まとめ
本番サーバのファイル上書きミスやアップロード漏れを防ぐには、バックアップと差分比較がかなり大事です。
完璧な方法は案件や環境によって変わります。
ただ、少なくとも「バックアップを取ったから大丈夫」ではなく、「バックアップと今のファイルを比較できる状態にしておく」ことが大事だと思います。
無料で使えるツールも多いので、自分の作業環境に合うものをいくつか試しておくと、本番作業の安心感が少し上がるのではないかと思います。
baserCMSやWebサイト構築のご相談など
お気軽にお問い合わせください