本番サーバーをVSCodeから直接編集できると知って驚いた

WordPressのサイト制作をしていると、サーバー上のファイルを直接修正したい場面があります。

これまで僕は、

FTPソフトでサーバーに接続する

修正したいファイルをダウンロードする

VSCodeで編集する

FTPソフトからアップロードする

ブラウザで確認する

という流れで作業することが多くありました。

もちろん、この方法でも問題なく作業できます。

ただ最近、VSCodeからそのまま本番サーバーに接続して、サーバー上のファイルを直接編集できることを知りました。

これが個人的にはかなり衝撃でした。

VSCodeからサーバーに接続できる

使うのはSSHという仕組みです。

SSHは、簡単に言えば、

自分のパソコンから別のコンピューターに安全に接続するための仕組み

です。

レンタルサーバー側でSSH接続が利用できる場合、VSCodeからサーバーへ接続できます。

接続すると、VSCodeのエクスプローラーにサーバー上のフォルダやファイルが表示されます。

つまり、

「ローカルのWordPressファイルを開いている」

のとほぼ同じ感覚で、

「本番サーバー上のWordPressファイルを開く」

ことができます。

最初に見たときは、

「FTPソフトを開かなくてもいいの？」

と思いました。

修正から確認までがかなり速い

例えばWordPressテーマのCSSを少し修正するとします。

FTPを使っている場合は、

修正

↓

アップロード

↓

ブラウザ確認

↓

再修正

↓

再アップロード

という作業が発生します。

VSCodeから本番サーバーを直接開いている場合は、

修正

↓

保存

↓

ブラウザ確認

だけです。

ファイルを保存した時点でサーバー上のファイルが変更されているため、アップロード作業がありません。

CSSの数値を少し変えたり、WordPressテーマのPHPを微調整したりするときには、かなり楽です。

VSCodeの機能もそのまま使える

個人的に便利だと感じたのがここです。

サーバー上のファイルだからといって、特殊なエディタを使うわけではありません。

普段使っているVSCodeなので、

ファイル検索

コード検索

複数ファイルの確認

シンタックスハイライト

補完

ターミナル

なども利用できます。

WordPressのテーマファイルが大量にある場合、FTPソフトでファイルを探して編集するよりも、VSCode上でプロジェクト全体を確認できる方が圧倒的に作業しやすいです。

FTPが不要になるわけではない

ただし、

「じゃあ今後は全部、本番サーバーを直接編集すればいい」

という話ではありません。

むしろここは注意が必要です。

本番サーバーをVSCodeから直接編集するということは、保存した変更がそのまま公開サイトに反映されるということです。

例えばPHPファイルで記述を間違えると、サイトにエラーが表示される可能性があります。

CSSを間違えれば、当然そのままデザインが崩れます。

便利な分、ローカル環境よりも慎重に扱う必要があります。

本格的な変更はテスト環境でやるべき

個人的には、

小さな修正は本番サーバーを直接編集

大きな変更はローカル環境やテスト環境で確認

という使い分けがいいと思っています。

例えば、

文字の修正

CSSの微調整

画像パスの修正

軽微なレイアウト修正

程度であれば、直接編集するとかなり効率的です。

一方で、

新しい機能を追加する

テンプレートを大幅に変更する

PHPを大きく書き換える

WordPress全体に影響する処理を変更する

といった作業を、いきなり本番環境で試すのは危険です。

テスト環境で動作確認してから本番へ反映した方が安全です。

Gitと組み合わせるとさらに便利

さらに調べていくと、SSHだけでなくGitも組み合わせられます。

これまでFTP中心でWordPressを触っていると、

「サーバーにファイルをアップロードする」

という考え方になりがちです。

しかしGitを使うようになると、

変更履歴を管理しながらサイトを更新する

という開発に近い運用ができます。

誰がどこを変更したのか確認したり、問題が起きたときに以前の状態と比較したりできるため、サイトの規模が大きくなるほどメリットも大きくなります。

「サーバーはFTPで触るもの」だと思っていた

FTP自体が悪いわけではありません。

今でもファイルをまとめてアップロードするときなど、FTPが便利な場面はあります。

ただ、

「レンタルサーバーのファイルを編集するならFTP」

と思い込んでいたので、VSCodeから直接接続できると知ったときはかなり驚きました。

普段コードを書いているVSCodeの中で、

ローカル環境

テスト環境

本番環境

まで扱えると、作業環境を切り替える回数も減ります。

便利だからこそ慎重に使いたい

VSCodeから本番サーバーを直接編集できるようになると、WordPressの修正作業はかなり快適になります。

特に細かい修正が何度も発生する案件では、FTPで毎回アップロードする手間がなくなるだけでも大きな違いがあります。

ただし、

便利になった＝安全になった

ではありません。

むしろ本番環境へのアクセスが簡単になる分、操作ミスによる影響も大きくなります。

バックアップを取る、Gitで変更履歴を管理する、大きな修正はテスト環境で行うなど、運用方法も一緒に考える必要があります。

それでも、

「VSCodeって本番サーバーまで直接触れるんだ」

と知ったことで、WordPress制作の作業方法に対する考え方がかなり変わりました。

FTPだけで作業している人は、SSH接続という方法を知っておくだけでも、今後の作業効率がかなり変わるかもしれません。