【ホームページ公開】エックスサーバー（XServer）にファイルアップロードする方法

こんにちはTERUです。
フリーランスでホームページやECサイト制作を仕事にしています。

読者の悩み

• レンタルサーバー契約したけど、どうやってファイルをアップロードするの？
• ホームページは作ったけど、公開方法が分からない。

本記事では、作成したホームページ（Webサイト）をレンタルサーバーにアップロード（公開）する方法について詳しく解説します。

今回は、エックスサーバー（XServer） でレンタルサーバー契約していることを前提に解説していきます。

レンタルサーバーの選び方については、下記の記事が参考になります。

この記事を読んで分かること

• サーバーへのファイルアップロード方法がわかる。

本記事の信頼性

• フリーランスとしてWordPress案件を中心としたWeb制作をメインに仕事をしている。
• Web制作会社にてディレクターの経験もあり。
• 普段からエックスサーバー（XServer）を利用している。

まずはホームページ公開の大きな流れを理解

WEBサイト（ホームページ）公開までには、大きく5つの作業をクリアする必要があります。

エックスサーバー（XServer）へのファイルアップロード方法

契約したサーバーにファイルをアップロードするためには、下記４ステップの作業が必要になります。

そもそもFTPとは？

ステップの説明に入る前に、FTPを解説します。

FTPとは、ファイルをやり取り（アップロード・ダウンロード）する際に利用する通信プロトコルの一つです。
通信プロトコルは、ネットワーク通信をする際の決まり事（通信手順）です。

STEP1：FTPソフトのインストール

まずはFTPソフトのインストールを行います。

今回は、最も利用されているFTPソフトの一つである「FileZilla」をインストールします。

本記事の手順は、MacOSのパターンです。

手順①：FileZillaの公式ページへアクセスします。

手順②：macOS用のFileZillaを選択するとダウンロードが開始されます。

手順③：ダウンロードしたアーカイブファイルをダブルクリックします。

手順④：「FileZilla」ファイルが表示されるので、「アプリケーション」にドラッグ＆ドロップします。

手順⑤：アプリケーションフォルダ内に「FileZilla」が存在することを確認します。

以上でインストールは完了です。

「FileZilla」について、下記の記事で詳しく解説しています。
※Windowsの手順も記載しています。

STEP2：エックスサーバー（XServer）への接続情報を確認

次にサーバーへ接続するための情報を確認します。

そもそも接続情報とは？

FTPソフトからサーバーへ接続するために必要な情報です。

具体的には、下記3つの情報が必要になります。

ホスト	接続するサーバーのホスト名
ユーザー	サーバーにFTP接続するためのユーザー名
パスワード	サーバーにFTP接続するためのパスワード

接続情報があれば、誰でもサーバーへアクセスされてしまうので接続情報の取り扱いには注意が必要です。

接続情報の確認方法

接続情報は、各レンタルサーバーの管理画面にて確認することができます。

本記事では、エックスサーバー（XServer）での確認手順を解説します。

手順①：まずはサーバーパネルから「サーバーID」と「サーバーパスワード」を入力してログインします。

手順②：サーバーパネル画面にて、「サブFTPアカウント設定」をクリックします。

手順③：ドメイン選択画面にて、すべてのドメインの「選択する」をクリックします。

手順④：サブFTPアカウント設定画面にて、「FTPソフト設定」タブを選択し、「FTP サーバー（ホスト）名」を確認します。

FTP接続（FileZilla）するために必要な情報

ホスト	サブFTPアカウント設定画面にて確認
ユーザー	サーバーパネルのログインに使用したサーバーIDと同じ
パスワード	サーバーパネルのログインに使用したサーバーパスワードと同じ

上記のサーバーパスワードとXServerアカウントパスワードとは別物なので注意してください。
サーバーパスワードを忘れた場合は、下記のページからサーバーパスワードの再設定が可能です。
>>エックスサーバー「サーバーパスワード」再設定フォーム

エックスサーバー（XServer）以外のレンタルサーバーに接続する方法については、「FTP サーバー接続情報の確認方法【レンタルサーバ別】」に詳しく解説しています。

STEP3：FTPソフトを使用してエックスサーバー（XServer）へ接続

サーバーへの接続情報が分かったら、FTPソフトを使って契約したエックスサーバー（XServer）に接続します。

接続方法について、先ほどインストールを行った「FileZilla」を使って説明します。

エックスサーバー（XServer）への接続情報を設定

まずは、先ほど調べた接続情報をFTPソフト（FileZilla）に設定します。

手順①：FileZillaを開き、画面左上の「サイトマネージャー（赤枠部分）」を選択します。

【ショートカットキー】
Macの場合：command + S
Windowsの場合：Ctrl + S

手順②：サイトマネージャー画面で「新しいサイト」を選択します。

手順③：画面右側に調べた接続情報を入力します。

①ホスト	サブFTPアカウント設定画面にて確認
②ユーザー	サーバーパネルのログインに使用したサーバーIDと同じ
③パスワード	サーバーパネルのログインに使用したサーバーパスワードと同じ

設定情報の名前ですが、分かりやすい名前に変えておきましょう。
※マウスで選択すると簡単に変更可能です。

サイトマネージャー上に接続設定を保存していくことができます。
２回目以降は、数クリックで簡単にサーバーへ接続が可能です。

エックスサーバー（XServer）へFTP接続を行う

手順④：接続情報の入力が完了したら、「接続」を選択します。

手順⑤：接続すると画面右側に、サーバー上のファイルやフォルダが表示されます。
独自ドメインを設定した場合、独自ドメイン名のフォルダが作成されています。

STEP4：公開用ファイルのアップロード

サーバーに接続できたら、最後のステップです。
公開用ファイルを下記の順番でサーバーの公開フォルダへアップロードします。

1. 初期ファイルの削除
2. 公開用ファイルをアップロード
3. サイト確認

今回は、「teru1213.online」という独自ドメインにホームページを公開する想定で解説します。

サーバーの公開フォルダとは？

公開フォルダとは、レンタルサーバーにドメイン毎に用意されているファイルの置き場所です。

もう少し詳しく見てみると

公開フォルダとは、独自ドメインやサブドメインを利用したホームページで、公開したいデータを管理するためのフォルダのことです。お客様にて任意のフォルダ名を指定できます。当サービスの仕組みでは、独自ドメインやサブドメインにアクセスした際に、公開フォルダに設定しているフォルダ内のデータを表示します。

公開フォルダとはなんですか – ロリポップ！レンタルサーバー

基本的にドメイン毎に用意されており、ドメイン名フォルダ配下の「public_html」フォルダが公開フォルダになります。

今回であれば、「/teru1213.online/public_html/」が公開フォルダになります。

よくある質問：独自ドメイン名のフォルダが見つかりません

ドメイン設定ができていない可能性が高いです。
エックスサーバー（XServer）の管理画面からドメイン設定を行いましょう。

ドメイン設定の方法は、下記の記事にまとめています。

STEP4-1：初期ファイルの削除

公開フォルダには、初期状態画面を表示するためにいくつか初期ファイルが格納されています。
サイト公開するには、必要ないファイルなので削除していきます。

手順①：FTP接続した状態から対象の独自ドメインの公開フォルダへアクセスします。
画面右側の独自ドメインフォルダ名をダブルクリック

次に「public_html」をダブルクリック

手順②：公開フォルダ内の下記ファイルを削除します。

対象ファイルを選択し「右クリック」-「削除」

確認画面で「はい」を選択します。

手順③：独自ドメインにアクセスして、403ステータス画面が表示されることを確認します。

表示するファイルがないので上記画面が表示されます。

以上で初期ファイルの削除は完了です。

これで公開用ファイルをアップロードする準備が整いました。

STEP4-2：公開用ファイルをアップロード

手順①：公開フォルダ（public_html）に公開用ファイル（HTML・CSS）を全てアップロードします。

FileZillaの画面右（リモートサイト）側にドラック＆ドロップするとアップロードされます。

手順②：公開用ファイルが全てアップロードされたことを確認します。

独自ドメインにアクセスした際に表示したいファイルは「index.html」にします。

STEP4-3：サイト確認

手順①：ブラウザから独自ドメインにアクセスします。

用意した公開用ファイルが表示できれば全ての作業完了です。

【表示されない時にまず試すこと】
・ブラウザのキャッシュをクリアしましょう！
　→Macの場合：「Command ＋ R」/ Windowsの場合：「Ctrl＋R」

ホームページ公開の関連記事

ドメイン取得

ドメイン設定

SSL設定

WEBサイトの仕組み

シンレンタルサーバーとの違い

まとめ

今回は、作成したホームページ（Webサイト）をサーバーにアップロード（公開）する方法について詳しく解説しました。

ホームページ公開の道のりシリーズは、今回がラストになります。

これまでサーバー契約から始まり、自分のサイトを公開するまでの手順を説明しました。

お疲れ様でした。以上です。