2024.01.05
この記事を書いた人
だいち
今回はローカル（PC上）にあるデータを、レンタルサーバーにアップロードする方法について解説します。
「FTPが何かいまいちわかってない…」「設定難しそう… 」となっている方も、実際の操作画像を使って解説していきます。
操作説明環境はMacOS、ブラウザはChromeで進めていくため、他環境だと若干画面が違うこともあるかと思いますが、基本的な操作内容は同じと思ってください。
また、前提としてドメイン取得済み・サーバー設定情報も持っている状態で解説していくので、ドメインやサーバーの契約が済んでない方は先にこちらの記事を読んで設定してみましょう。
※なおこの記事では「エックスサーバー」へのアップロード方法で解説を進めていきますが、基本的な操作手順は他サーバーでも同様の流れになります。
FTPとは
FTP は「File Transfer Protocol」（ファイル転送プロトコル）の略称です。では、プロトコルとは何でしょうか。プロトコルとは、簡単に言えば電子機器が互いに通信するための手順や規則をまとめたものです。つまり FTP は、TCP/IP ネットワーク（インターネット）上の機器同士がファイルを転送するために使用する一連のルールということになります。
FTP とは？ – Dropbox Business
「通信プロトコル」と呼ばれるものはいくつか種類がありますが、FTPはそのうちの一つです。
簡単に言うとファイルを送受信するためのルールで、「FTPサーバー（Webサーバーなど）」と「FTPクライアント（ユーザーのPCなど）」を繋ぐための決まりごとです。
FTPソフトとは、サーバーとクライアントを繋いで、データを送受信するために使用するツール、ということになります。
Webサイトの公開やWebサーバー内のデータ更新、Webサーバーデータのダウンロード（バックアップ）に用いられます。
URLの手前にあるhttpやhttpsも通信プロトコルの一つです。（Webサーバーとhtmlファイルなどを送受信するためのルール）
詳しく知りたい方は「通信プロトコル 種類」などのキーワードでググってみましょう！
FileZillaとは
まずはFTPソフトをPCにインストールします。
FTPソフトは無料だと「FFFTP」「Cyberduck」、有料だと「Transmit」など、有名なものがいくつかありますが、今回は多くの方に使われている「FileZilla」という無料ソフトで進めていきます。
- 無料で使える
- Windows、Mac OS、LinuxなどのメジャーOSで使える
- ローカルファイルとサーバー上のファイル一覧を並べて表示できる
- 通信状況や転送結果が表示されて分かりやすい
接続するための基本的な考え方は同じなので、色々なソフトを試して使いやすいツールを選んでもらってもいいですが、FileZillaは初心者向けとなっています。
【注意点】FileZillaとマルウェア（ウィルス）について
FileZillaは公式サイト以外でも配布されていることがありますが、マルウェア（ウィルス）が含まれていたということで過去話題になったことがありました。
安全面を考慮して、インストールする場合は公式サイトからにしましょう。（Macの場合appstoreにアプリ版がありますが、年間契約の有料になります）
ただ、公式サイトのダウンロードファイルにはアドウェア（広告を表示するソフト）が含まれていることがあります。
これが要因でセキュリティソフトと競合し、上手くダウンロードできないといった事象が起こることがあります。
公式サイトが配布しているものなので悪質なものでは無いと思いますが、スムーズに使用が始められないと余計な混乱を招くので今回はそちらを避けるための方法を紹介します。
非推奨のダウンロード手順
この章では失敗するパターンをあえて説明します。ご存知の方は飛ばして先に進んでいいです。
まずは公式サイトにいきます。
「FileZilla Client」の方を選びます。
上の緑のボタンをクリックします。
無料プランなので、一番左のdownloadボタンをクリックします。
すると、Chromeの場合は上の画像のようにアクセス拒否された画面へと切り替わり、複数のインストーラがまとめてダウンロードされます。
…どういうこと？となりますね。
ここでダウンロードされたファイル名が「FileZilla_○.○.○.○_macosx-x86.app.tar.bz2」となっていればとりあえず問題ありません。（上の図の場合は問題なし）
この進め方だと「セキュリティソフトに検知されて上手く進めない」といった情報も見かけますが、原因はダウンロードされたファイルがzip版（インストーラ版）の場合に起こるようです。bz2版であれば問題ありません。
※失敗パターンを紹介するために自分でやってみたのですが、結果失敗しなかったので例として分かりづらいですね、すみません…。
ただ、端末などで表示内容が変わる可能性があるので、基本的には次の章から紹介する手順で必要ソフトだけダウンロードしましょう。
手順1：FileZillaダウンロード
改めてトップページ「FileZilla Client」に入ったところからです。
Macであっても上の緑のボタンではなく、下の「Show additional download options」をクリックします。（OSによってこの画面は変わりますが、クリックする場所は同じです）
すると「MacOS」「Windows」「Linux」のダウンロードページにうつります。ここから自分の使用しているOSを選択しましょう。
Macであれば「FileZilla_○.○.○.○_macosx-x86.app.tar.bz2」、Winの場合は「FileZilla_○. ○.○_win-setup.exe」のほうを選びましょう。
ファイル名をクリックするとダウンロードが開始します。
アクセス拒否画面になる場合がありますが、ひとまず気にせずソフトがダウンロードされるのを確認します。
複数ファイルがダウンロードされる場合がありますが、とりあえず一つダブルクリックしてみましょう。
上のようにFileZillaのアプリだけ解凍されればOKです。
手順2：サーバー側でSFTP設定
通常設定だとFTP接続となりますが、今回はセキュリティレベルを引き上げて安全にデータ転送するために、「SFTP」接続を可能にするための設定を行います。
エックスサーバーのサーバーパネルにログインします。
ログイン情報はサーバー契約時のメールなどを確認しましょう。（分からない場合は以下記事も参考にしてみてください）
ログインしたらSSH設定をクリックします。
SSH設定画面で「ONにする」にチェックを入れて「設定する」ボタンへ進みます。
画像のように「変更完了」となればOKです。次に公開鍵認証用鍵ペアの生成を行います。
「公開鍵認証用鍵ペアの生成」をクリックするとパスフレーズというものを入力する画面になるので、任意で決めたら確認画面へ進みます。
パスフレーズはFTPソフトで接続するためのパスワードにもなるので必ず記録しておきましょう。
問題なければ「生成する」ボタンをクリックします。
すると秘密鍵のダウンロードが開始されます。ここまで行えばサーバー側でのSFTP設定は完了です。
手順3：FileZillaソフト立ち上げ
アプリケーションをダブルクリックしたらモーダルが出てきますが、OKで進みます。
FileZillaが立ち上がりますので、ひとまずサーバーと接続するために設定していきます。
FileZilla側でのSFTP設定
上メニューバーから「FileZilla」→「設定」へ進みます。
設定画面が出てきたら「SFTP」をクリックします。
「鍵ファイルの追加」をクリックしたら、先ほどダウンロードした秘密鍵のデータを選択して開きます。
このポップアップが出たら「はい」で進みます。
パスワード入力画面が出るため、先ほどサーバー側でSSH設定時に決めパスフレーズを入力します。
鍵ファイル（.ppk)の名前と保存先を聞かれるので、任意で指定したら保存します。
この鍵ファイルは後で格納先を変えると再設定が必要になるので、それも踏まえて進んでください。
適当な場所にファイルを置いて進んでいた方は、一度鍵情報を削除して、再度追加からやり直してもいいと思います。
ppkデータを保存したら鍵ファイルが追加されているので、確認したらOKをクリックします。
これでFileZillaへのSFTP設定は完了です。
接続先作成＆設定
接続情報を入力するために、左上のアイコンをクリックします。（もしくは上のメニュー「ファイル」から「サイトマネージャー」を選択）
サイトマネージャーが立ち上がるので、左下「新しいサイト」をクリックしたら、エントリの選択の中に接続先ができるので任意の名前を決めます。
右側に必要情報を入力していきます。
- プロトコル → SFTPを選択
- ホスト → サーバー契約時に得た「FTPホスト名」
- ポート → 10022
- ユーザー → サーバー契約時に得た「FTPユーザー名」
①はSFTP、③はエックスサーバーのSFTP画面でも表示されていましたが「10022」と入力してください。
②と④については、サーバー契約時にメールなどで通知されている「FTP情報」を確認して入力します。
入力したら右下の接続ボタンをクリックします。
不明なホスト鍵という画面が表示されたら「常にこのホストを信用し、この鍵をキャッシュに追加」にチェックを入れてOKで進んでください。
ここで改めてパスワード入力画面が出ますので、先ほどサーバー側でSSH設定時に決めたパスフレーズを入力します。
OKを押した後、右側のリモートサイトにサーバー側のディレクトリが表示されたら接続成功です。
手順4：FTPソフト(FileZilla)からサーバーにアップロード
ここからはWebサイトとして公開するためのアップロード作業方法について説明していきます（めちゃくちゃ簡単です）
リモートサイトの指定
右側リモートサイトから、サーバーの指定するアップロード先を確認します。
エックスサーバーの場合は「public_html」の直下と指定されているので、見つけたらクリックします。
接続できたら事故防止のため、サーバーデータのバックアップをとるなど、出来る限りリスクヘッジをした状態で臨むようにしましょう。
画像のように、任意のサーバーファイルをドラッグ＆ドロップで移動するだけで、ファイルのダウンロードができます。（この作業だけであればサーバー側に影響はありません）
ローカルサイトの指定
ここから、PC上のデータをサーバーにアップロードします。
左側のローカルサイト（PC側）からは、アップロードしたいファイルのあるディレクトリを指定します。
パスが記載されている窓に直接入力して指定することもできます。
あとは左のローカルから右のリモートへファイルをドラッグ＆ドロップするだけでアップロードができます。
同名ファイルがある場合は上書きするかどうかなどの確認も入ります。
上の接続状況に「接続成功」と表示される、もしくは右側のファイル更新日時が最新になっていたらアップロードは完了です。
あとはURLからWebサイトの公開状況を確認してみましょう。
公開済みサイトの更新であれば、キャッシュをクリアしてリロードし、アップロード内容が反映されていれば成功です。
一度ソフトを閉じても、再度サイトマネージャーを開いてパスワードを入力すれば、同じサーバーへ再接続できます。
最後に
FTPソフトを使ったサーバーアップロード方法について解説してみましたが、上手くいきましたでしょうか？
アップロード作業自体は、ソフトの機能でかなり簡単に実施できます。
ただ、実際はこのアップロード作業を一番慎重に行うようにしてください。
FTPソフトでサーバー接続すれば、アップロードだけでなく、サーバーに保管されているファイルを直接いじることができますし、データをダウンロードすることもできます。
ここで不注意に操作をしていると、ファイルやディレクトリを誤って上書きしたり、消してしまう事故が発生することもあります。
途中にも記載してますが、バックアップ対応であったり、できる対策はとった後に実行するようにしましょう。
サーバー契約がまだ済んでない方はこちらの記事を参考にして、Web公開までやってみましょう。
また、当記事を読まれている方の中にはWeb制作初学者の方もいるかと思います。デザインやコーディングの基礎知識を学びたい方向けの記事を用意しているので是非見ていってください！
PENGIN無料コーディング課題
オススメ書籍紹介
オススメUdemy講座紹介
