FTPを使ってWebサイトをアップしたいカメ
学び続けるウサギ
FTPを使ってWebサイトをアップしたいカメ
File Transfer Protocol（ファイルトランスファープロトコル）のことで、ネットワーク上のサーバーとクライアント（利用者）のPC間のファイル転送の通信方法です。
サーバーにアップするFTPソフトは色々ありますが、エックスサーバーだけでも作ったWebサイトデータを簡単にサーバーにアップすることができます。
今回はエックスサーバーのFTPを使ってサイトデータをアップロードする方法ついてご紹介していきたいと思います。
目次
エックスサーバーのFTPを使ってWebサイトをアップロードする方法
FTPユーザー名とFTPパスワードを用意する
まずはサーバーにアップロードするために下記の2つの情報を用意します。
- FTPユーザー名（FTPアカウント名）
- FTPパスワード
※FTPパスワードはサーバーパスワードと共通で、Xserverアカウントのパスワードとは違うので注意です。
FTPを使ってWebサイトをアップしたいカメ
２つの必要なFTP情報の確認方法
- サーバー契約した時に送られてくるサーバーアカウント設定完了のお知らせメール
- サーバーパネルで確認
上記の２つの方法で確認することができます。
「アカウントいつ登録したっけ？メールが埋もれてなくなっちゃった…」
という方でも自分のサーバーパネルで確認することができます。
Webサイトをアップしたいカメ
自分のサーバーパネルにログインして、FTPの項目のサブFTPアカウント設定をクリックします。
ドメイン選択画面のすべてのドメインの行の選択するをクリックします。
サブFTPアカウント設定の画面からFTPソフト設定のタブをクリックします。
こちらの初期FTPアカウントの設定内容のユーザー名とパスワードを使います（※サブFTPアカウントを利用しない場合はこのまま使える）
これがFTPユーザー名とFTPパスワードですね。
Webサイトをアップしたいカメ
特定のフォルダ（ディレクトリ）のみアクセス許可のFTPアカウント
ファイルマネージャを使用してアップロードする
ファイルマネージャを使ってWebサイトのファイルをアップロードしていきます。
まずはTOPページのログインの項目のファイルマネージャ（※アカウントパネルのファイル管理からでも可）をクリックしてファイルマネージャのログイン画面を開きます。
先ほど確認した
- FTPユーザー名
- FTPパスワード
を入力してログインします。
ログインできたら画面左側の項目の中からアップロードしたいドメイン名のフォルダをクリックして展開しpublic_htmlフォルダをクリックしてその中にファイルを入れていきます。
※他のフォルダは消したり触らないように注意してください
例えばポートフォリオだったらポートフォリオ用のドメインのフォルダをクリックして、その中のpublic_htmlフォルダを選択してそのフォルダ内に作ったファイルを入れます。
public_htmlフォルダを展開したら画面上部のアップロードをクリックします。
この画面でも既にpublic_htmlの中が指定されてることがわかりますね。
アップロードの画面がでてきたら、自分が作ったWebサイトのアップしたいindex.htmlとその他のファイルなどをドラッグ&ドロップ（ファイル選択）します。（※フォルダ単位でのアップロードもできるようになりました）
ファイルの文字コードをUTF-8などにそれぞれ選択しアップロードします。
追加したかったHTMLやCSSファイルなどが無事に表示されたらOKです。
public_htmlの中にアップできてますね。
それぞれのファイルに違う色がつくので区別しやすいです。
これでネット上に表示させることができます。
今回はさらに画像フォルダを追加したいと思います。
画面上部にある新規フォルダをクリックしてフォルダを作ります。
アップしたいWebサイトのディレクトリ構成のフォルダと同じフォルダ名を記入します（imagesやimgが無難なとこです）。
作成したらimageフォルダを展開します。
アップしたいドメイン名フォルダ内のpublic_htmlフォルダ→ imageフォルダを選択します。
先ほどと同じく上部のアップロードをクリックしてimageフォルダ内に必要な画像を入れてあげます。
※SVG画像などが読み込めないときは、文字コードが原因で反映されないことがあったのでUTF-8などにして試してみてください。
アップロードできたらインターネット上に表示されているかドメイン名を打ち込んで確認してみましょう。
お疲れ様でした。
Webサイトをアップできたカメ
フォルダ単位でアップロードする
2023/7/13〜 フォルダが選択できるようになりました
HTMLやCSSファイルなどをまとめてフォルダの中に入れてアップロードできるようになりました。
とはいえ「ディレクトリ階層は維持されない」のですが、とりあえずサーバー上にあげたいファイルなどをまとめてアップロードできるのでちょっとだけ楽になりましたね。
ダウンロードしたい場合は、そのフォルダを選択しダウンロードをクリックするだけで「Zip形式」でPC上（ローカル）にダウンロードできます。
Webサイトをアップできたカメ
外部FTPソフトなどからでもファイルアップロード可能
外部の下記FTPソフト・ホームページ制作ソフトからでもファイルをサーバーにアップすることができますね。
まとめ：ファイルマネージャでWebサイトをアップしてみよう！
今回はエックスサーバーのFTPでWebサイトをアップする方法についご紹介してきました。
WebサイトデータはFTPソフトでサーバーにアップロードできますが、エックスサーバーのファイルマネージャでも簡単にサーバーにアップすることができます。
Webサイトを簡単にサーバーにアップしたい方に少しでもお役に立てれば幸いです。
エックスサーバー（Xserver）はファイルのアップロード以外にも、ドメインの「更新」費用の安さや、WordPressクイックスタートなども便利ですね。
Web周りとして一元管理してまとめておくと後々使いやすいので、他にもXserverでのWEBメールの作り方や、個人利用でお得なエックスサーバーのスタンダードプランはお得の記事、レンタルサーバーやWordPressを申し込みたい方は下記を参考にしてみてください。
