FileZillaを利用した安全なアップロードの設定

ながまつのプロフィール画像
エンジニアながまつ

サイトのリリースにはいくつかの手法があります。例えば、CIツールを利用して変更を自動的にデプロイする方法や、FTPソフトを使って手動でアップロードする方法が挙げられます。

特に、昔からよく利用しているのがFileZillaを使った手動アップロードです。今もなお頻繁に利用しており、その際に便利なFileZillaの設定をご紹介します。

接続サーバーごとに背景色指定する

FileZillaでは、接続サーバーごとに背景色を変更することが可能です。自分は自社で管理しているサーバーと他のサーバーを視覚的に区別するため、この機能を利用しています。サーバーごとに色を設定することで、特定のサーバーでの作業時に注意が向くようになります。

  1. 「ファイル」をクリックする。
  2. 「サイトマネージャー」をクリックする。
  3. 右側のタブ「一般」を選択し、「背景色」のプルダウンから色を選択して「OK」をクリックする。

これで設定したサーバーに接続した時に指定の背景色で表示されます。

同期ブラウジングで異なるディレクトリへのアップロードを防止する

同期ブラウジングは、左側のローカルディレクトリを移動すると、右側のリモートディレクトリも同時に移動する機能です。この設定により、異なるディレクトリに誤ってアップロードしたり、関連のないローカルファイルをアップロードするリスクを低減できます。ブックマークを活用すれば、サーバーごとに素早く目的のディレクトリにアクセスできるため、自分は必ず設定するようにしています。

【同期ブラウジング+ブックマークの設定方法

  1. サーバーに接続し、ローカルとリモートのディレクトリを合わせる。
  2. 「ブックマーク」をクリックする。
  3. 「ブックマークの追加」をクリックする。
  4. 「名前」に管理しやすい名前を入れ、リモートは現在いるディレクトリが入るので、ローカルのディレクトリだけ参照から設定します。
  5. 「同期ブラウジングを使用する」にチェックを入れ、「OK」をクリックする。

これで同期ブラウジングが設定されたブックマークが追加されました。次に接続する時はサーバーに接続後、「ブックマーク」から追加したブックマークをクリックすれば、設定したディレクトリが表示されます。

ディレクトリを比較してアップロード前に差分をチェックする

FileZillaには、ローカルとリモートのファイルを比較し、差分を視覚的に示してくれる便利な機能があります。ただし、文字コードや改行の設定によっては同じ内容でも差分として表示されることがある為、完全にFileZillaに頼るわけにはいきませんが、差分を見ることで誤った上書きを防ぐ助けになります。

【ディレクトリの比較+ブックマークの設定方法

  1. ブックマークの設定は「【同期ブラウジング+ブックマークの設定方法】-4」まで同じです。
  2. 「ディレクトリの比較」にチェックを入れ、「OK」をクリックする。

これでディレクトリの比較が設定されたブックマークが追加されました。次に接続する時はサーバーに接続後、「ブックマーク」から追加したブックマークをクリックすれば、設定したディレクトリが表示され、比較した差分を見た目でわかりやすく表示してくれます。

おわりに

FTPでの手動アップロードは、人為的なミスが発生する可能性がゼロではありません。そのリスクを最小限に抑えるために、安全なアップロードを行うための設定は場合によって必要でしょう。

さらに、アップロード方法には冒頭に述べたように様々な選択肢が存在します。安全なアップロードを実現するためには、手動でのアップロードだけでなく、時には手段も変える柔軟性が求められると感じています。新しい技術や手法の導入を検討しつつ、最適なアップロード手法を見つける努力が重要になってくると感じています。

現在、エンジニアを募集中です。

ベイジでは現在、2024年春にかけて2~3名の一緒に働いてくれるフロントエンドエンジニア/HTMLコーダーを募集中です。経験の有無を問わず募集しておりますので、ご興味がある方は採用サイトをご覧ください。

こんな記事も読まれています

【2024年】ハンバーガーメニューの作り方決定版【コピペ可能】
【2024年】ハンバーガーメニューの作り方決定版【コピペ可能】
かんののプロフィール画像
かんの
ウェブアプリ開発にTailwind CSSを導入してみた
ウェブアプリ開発にTailwind CSSを導入してみた
金 伯冠のプロフィール画像
金 伯冠
俺流フロントエンドのディレクトリ構成と設計の考え方
俺流フロントエンドのディレクトリ構成と設計の考え方
アマノのプロフィール画像
アマノ
ChatGPTの新機能GPTs!自分だけのオリジナルGPTを作ってみた!
ChatGPTの新機能GPTs!自分だけのオリジナルGPTを作ってみた!
金 伯冠のプロフィール画像
金 伯冠
上に戻る