こんにちはTERUです。
フリーランスでホームページやECサイト制作を仕事にしています。
読者の悩み
- レンタルサーバー契約したけど、どうやってファイルをアップロードするの?
- ホームページは作ったけど、公開方法が分からない。
本記事では、作成したホームページ(Webサイト)をレンタルサーバーにアップロード(公開)する方法について詳しく解説します。
今回は、エックスサーバー(XSERVER) でレンタルサーバー契約していることを前提に解説していきます。
サーバー契約がまだの方は、以下の記事を参考にレンタルサーバー契約を先に進めてください。
![](https://teru1213.com/wp-content/uploads/2022/12/open.jpg)
![](https://teru1213.com/wp-content/uploads/2023/09/IMG_5091-150x150.png)
エックスサーバー(XSERVER)以外のレンタルサーバーでも手順に大きな違いはありません。
レンタルサーバーの選び方については、下記の記事が参考になります。
![](https://teru1213.com/wp-content/uploads/2023/01/portfolio-300x158.jpg)
![](https://teru1213.com/wp-content/uploads/2023/01/portfolio-300x158.jpg)
この記事を読んで分かること
- サーバーへのファイルアップロード方法がわかる。
本記事の信頼性
- フリーランスとしてWordPress案件を中心としたWeb制作をメインに仕事をしている。
- Web制作会社にてディレクターの経験もあり。
- 普段からエックスサーバー(XSERVER)を利用している。
まずはホームページ公開の大きな流れを理解
WEBサイト(ホームページ)公開までには、大きく5つの作業をクリアする必要があります。
- サーバー契約
- ドメイン取得
- ドメイン設定
- SSL化(http→https)設定
- ファイルアップロード
![](https://teru1213.com/wp-content/uploads/2023/09/IMG_5091-150x150.png)
![](https://teru1213.com/wp-content/uploads/2023/09/IMG_5091-150x150.png)
![](https://teru1213.com/wp-content/uploads/2023/09/IMG_5091-150x150.png)
今回はステップ5にあたる「ファイルアップロード」について、深掘りしていきます。
エックスサーバー(XSERVER)へのファイルアップロード方法
契約したサーバーにファイルをアップロードするためには、下記4ステップの作業が必要になります。
そもそもFTPとは?
ステップの説明に入る前に、FTPを解説します。
FTPとは、ファイルをやり取り(アップロード・ダウンロード)する際に利用する通信プロトコルの一つです。
通信プロトコルは、ネットワーク通信をする際の決まり事(通信手順)です。
![FTP通信イメージ](https://teru1213.com/wp-content/uploads/2022/06/ftp-1-1024x683.jpg)
![FTP通信イメージ](https://teru1213.com/wp-content/uploads/2022/06/ftp-1-1024x683.jpg)
STEP1:FTPソフトのインストール
まずはFTPソフトのインストールを行います。
今回は、最も利用されているFTPソフトの一つである「FileZilla」をインストールします。
- MacとWindowsのどちらでも利用できる。
- 無料で利用できる。
- 日本語対応している。
手順①:FileZillaの公式ページへアクセスします。
手順②:macOS用のFileZillaを選択するとダウンロードが開始されます。
![FTPソフトのインストール](https://teru1213.com/wp-content/uploads/2022/06/001-4-1024x516.jpg)
![FTPソフトのインストール](https://teru1213.com/wp-content/uploads/2022/06/001-4-1024x516.jpg)
手順③:ダウンロードしたアーカイブファイルをダブルクリックします。
![FTPソフトのインストール2](https://teru1213.com/wp-content/uploads/2022/06/002-5-1024x147.jpg)
![FTPソフトのインストール2](https://teru1213.com/wp-content/uploads/2022/06/002-5-1024x147.jpg)
手順④:「FileZilla」ファイルが表示されるので、「アプリケーション」にドラッグ&ドロップします。
![FTPソフトのインストール3](https://teru1213.com/wp-content/uploads/2022/06/003-5-1024x371.jpg)
![FTPソフトのインストール3](https://teru1213.com/wp-content/uploads/2022/06/003-5-1024x371.jpg)
手順⑤:アプリケーションフォルダ内に「FileZilla」が存在することを確認します。
![FTPソフトのインストール4](https://teru1213.com/wp-content/uploads/2022/06/004-4-1024x448.jpg)
![FTPソフトのインストール4](https://teru1213.com/wp-content/uploads/2022/06/004-4-1024x448.jpg)
以上でインストールは完了です。
「FileZilla」について、下記の記事で詳しく解説しています。
※Windowsの手順も記載しています。
![](https://teru1213.com/wp-content/uploads/2022/03/file26-300x158.jpg)
![](https://teru1213.com/wp-content/uploads/2022/03/file26-300x158.jpg)
STEP2:エックスサーバー(XSERVER)への接続情報を確認
次にサーバーへ接続するための情報を確認します。
そもそも接続情報とは?
FTPソフトからサーバーへ接続するために必要な情報です。
具体的には、下記3つの情報が必要になります。
ホスト | 接続するサーバーのホスト名 |
ユーザー | サーバーにFTP接続するためのユーザー名 |
パスワード | サーバーにFTP接続するためのパスワード |
接続情報の確認方法
接続情報は、各レンタルサーバーの管理画面にて確認することができます。
手順①:まずはサーバーパネルから「サーバーID」と「サーバーパスワード」を入力してログインします。
![接続情報の確認方法](https://teru1213.com/wp-content/uploads/2022/06/004-2-1024x712.jpg)
![接続情報の確認方法](https://teru1213.com/wp-content/uploads/2022/06/004-2-1024x712.jpg)
初期ドメイン「XXXXXX.xsrv.jp」の「XXXXXX」がサーバーIDになります。
また、会員登録完了時に送られる下記メールにも記載されています。
件名:【Xserverアカウント】■重要■サーバーアカウント設定完了のお知らせ〜
手順②:サーバーパネル画面にて、「サブFTPアカウント設定」をクリックします。
![接続情報の確認方法2](https://teru1213.com/wp-content/uploads/2022/06/005-4-1024x761.jpg)
![接続情報の確認方法2](https://teru1213.com/wp-content/uploads/2022/06/005-4-1024x761.jpg)
手順③:ドメイン選択画面にて、すべてのドメインの「選択する」をクリックします。
![接続情報の確認方法3](https://teru1213.com/wp-content/uploads/2022/06/006-3-1024x700.jpg)
![接続情報の確認方法3](https://teru1213.com/wp-content/uploads/2022/06/006-3-1024x700.jpg)
手順④:サブFTPアカウント設定画面にて、「FTPソフト設定」タブを選択し、「FTP サーバー(ホスト)名」を確認します。
![接続情報の確認方法4](https://teru1213.com/wp-content/uploads/2022/06/007-3-1024x607.jpg)
![接続情報の確認方法4](https://teru1213.com/wp-content/uploads/2022/06/007-3-1024x607.jpg)
ホスト | サブFTPアカウント設定画面にて確認 |
ユーザー | サーバーパネルのログインに使用したサーバーIDと同じ |
パスワード | サーバーパネルのログインに使用したサーバーパスワードと同じ |
エックスサーバー(XSERVER)以外のレンタルサーバーに接続する方法については、「FTP サーバー接続情報の確認方法【レンタルサーバ別】」に詳しく解説しています。
![](https://teru1213.com/wp-content/uploads/2023/09/IMG_5091-150x150.png)
![](https://teru1213.com/wp-content/uploads/2023/09/IMG_5091-150x150.png)
![](https://teru1213.com/wp-content/uploads/2023/09/IMG_5091-150x150.png)
エックスサーバー(XSERVER)以外の場合、こちらを参照ください。
STEP3:FTPソフトを使用してエックスサーバー(XSERVER)へ接続
サーバーへの接続情報が分かったら、FTPソフトを使って契約したエックスサーバー(XSERVER)に接続します。
接続方法について、先ほどインストールを行った「FileZilla」を使って説明します。
エックスサーバー(XSERVER)への接続情報を設定
まずは、先ほど調べた接続情報をFTPソフト(FileZilla)に設定します。
手順①:FileZillaを開き、画面左上の「サイトマネージャー(赤枠部分)」を選択します。
![サーバーへの接続情報を設定](https://teru1213.com/wp-content/uploads/2022/06/010-2-1024x575.jpg)
![サーバーへの接続情報を設定](https://teru1213.com/wp-content/uploads/2022/06/010-2-1024x575.jpg)
手順②:サイトマネージャー画面で「新しいサイト」を選択します。
![サーバーへの接続情報を設定2](https://teru1213.com/wp-content/uploads/2022/06/011-2-1024x528.jpg)
![サーバーへの接続情報を設定2](https://teru1213.com/wp-content/uploads/2022/06/011-2-1024x528.jpg)
手順③:画面右側に調べた接続情報を入力します。
![サーバーへの接続情報を設定3](https://teru1213.com/wp-content/uploads/2022/06/012-2-1024x528.jpg)
![サーバーへの接続情報を設定3](https://teru1213.com/wp-content/uploads/2022/06/012-2-1024x528.jpg)
①ホスト | サブFTPアカウント設定画面にて確認 |
②ユーザー | サーバーパネルのログインに使用したサーバーIDと同じ |
③パスワード | サーバーパネルのログインに使用したサーバーパスワードと同じ |
設定情報の名前ですが、分かりやすい名前に変えておきましょう。
※マウスで選択すると簡単に変更可能です。
![サーバーへの接続情報を設定4](https://teru1213.com/wp-content/uploads/2022/06/013-2-1024x531.jpg)
![サーバーへの接続情報を設定4](https://teru1213.com/wp-content/uploads/2022/06/013-2-1024x531.jpg)
エックスサーバー(XSERVER)へFTP接続を行う
手順④:接続情報の入力が完了したら、「接続」を選択します。
![サーバーへFTP接続を行う](https://teru1213.com/wp-content/uploads/2022/06/014-2-1024x527.jpg)
![サーバーへFTP接続を行う](https://teru1213.com/wp-content/uploads/2022/06/014-2-1024x527.jpg)
手順⑤:接続すると画面右側に、サーバー上のファイルやフォルダが表示されます。
独自ドメインを設定した場合、独自ドメイン名のフォルダが作成されています。
![サーバーへFTP接続を行う2](https://teru1213.com/wp-content/uploads/2022/06/015-2-1024x591.jpg)
![サーバーへFTP接続を行う2](https://teru1213.com/wp-content/uploads/2022/06/015-2-1024x591.jpg)
STEP4:公開用ファイルのアップロード
サーバーに接続できたら、最後のステップです。
公開用ファイルを下記の順番でサーバーの公開フォルダへアップロードします。
- 初期ファイルの削除
- 公開用ファイルをアップロード
- サイト確認
サーバーの公開フォルダとは?
公開フォルダとは、レンタルサーバーにドメイン毎に用意されているファイルの置き場所です。
もう少し詳しく見てみると
公開フォルダとは、独自ドメインやサブドメインを利用したホームページで、公開したいデータを管理するためのフォルダのことです。お客様にて任意のフォルダ名を指定できます。当サービスの仕組みでは、独自ドメインやサブドメインにアクセスした際に、公開フォルダに設定しているフォルダ内のデータを表示します。
公開フォルダとはなんですか – ロリポップ!レンタルサーバー
基本的にドメイン毎に用意されており、ドメイン名フォルダ配下の「public_html」フォルダが公開フォルダになります。
- /”独自ドメイン名”/public_html/
- /”独自ドメイン名2”/public_html/
- /”独自ドメイン名3”/public_html/
今回であれば、「/teru1213.online/public_html/」が公開フォルダになります。
よくある質問:独自ドメイン名のフォルダが見つかりません
ドメイン設定ができていない可能性が高いです。
エックスサーバー(XSERVER)の管理画面からドメイン設定を行いましょう。
ドメイン設定の方法は、下記の記事にまとめています。
![](https://teru1213.com/wp-content/uploads/2022/11/domain-300x158.jpg)
![](https://teru1213.com/wp-content/uploads/2022/11/domain-300x158.jpg)
STEP4-1:初期ファイルの削除
公開フォルダには、初期状態画面を表示するためにいくつか初期ファイルが格納されています。
サイト公開するには、必要ないファイルなので削除していきます。
- index.html
- default_page.png
![初期ファイルの削除](https://teru1213.com/wp-content/uploads/2022/06/018-2-1024x431.jpg)
![初期ファイルの削除](https://teru1213.com/wp-content/uploads/2022/06/018-2-1024x431.jpg)
手順①:FTP接続した状態から対象の独自ドメインの公開フォルダへアクセスします。
画面右側の独自ドメインフォルダ名をダブルクリック
![初期ファイルの削除2](https://teru1213.com/wp-content/uploads/2022/06/016-1-1024x498.jpg)
![初期ファイルの削除2](https://teru1213.com/wp-content/uploads/2022/06/016-1-1024x498.jpg)
次に「public_html」をダブルクリック
![初期ファイルの削除3](https://teru1213.com/wp-content/uploads/2022/06/017-1-1024x495.jpg)
![初期ファイルの削除3](https://teru1213.com/wp-content/uploads/2022/06/017-1-1024x495.jpg)
手順②:公開フォルダ内の下記ファイルを削除します。
- default_page.png
- index.html
対象ファイルを選択し「右クリック」-「削除」
![初期ファイルの削除4](https://teru1213.com/wp-content/uploads/2022/06/019-1-1024x470.jpg)
![初期ファイルの削除4](https://teru1213.com/wp-content/uploads/2022/06/019-1-1024x470.jpg)
確認画面で「はい」を選択します。
![初期ファイルの削除5](https://teru1213.com/wp-content/uploads/2022/06/019-2.jpg)
![初期ファイルの削除5](https://teru1213.com/wp-content/uploads/2022/06/019-2.jpg)
手順③:独自ドメインにアクセスして、403ステータス画面が表示されることを確認します。
![初期ファイルの削除6](https://teru1213.com/wp-content/uploads/2022/06/020-1-1024x680.jpg)
![初期ファイルの削除6](https://teru1213.com/wp-content/uploads/2022/06/020-1-1024x680.jpg)
表示するファイルがないので上記画面が表示されます。
以上で初期ファイルの削除は完了です。
これで公開用ファイルをアップロードする準備が整いました。
STEP4-2:公開用ファイルをアップロード
手順①:公開フォルダ(public_html)に公開用ファイル(HTML・CSS)を全てアップロードします。
![公開用ファイルをアップロード](https://teru1213.com/wp-content/uploads/2022/06/021-1-1024x459.jpg)
![公開用ファイルをアップロード](https://teru1213.com/wp-content/uploads/2022/06/021-1-1024x459.jpg)
手順②:公開用ファイルが全てアップロードされたことを確認します。
![公開用ファイルをアップロード2](https://teru1213.com/wp-content/uploads/2022/06/022-1024x466.jpg)
![公開用ファイルをアップロード2](https://teru1213.com/wp-content/uploads/2022/06/022-1024x466.jpg)
STEP4-3:サイト確認
手順①:ブラウザから独自ドメインにアクセスします。
![サイト確認](https://teru1213.com/wp-content/uploads/2022/06/023-1024x683.jpg)
![サイト確認](https://teru1213.com/wp-content/uploads/2022/06/023-1024x683.jpg)
用意した公開用ファイルが表示できれば全ての作業完了です。
・公開用ファイルは全てアップロードされているか?
・アップロード先(公開フォルダ)を間違えていないか?
・ローカル(自分のPC)上では正常に表示できるか?
ホームページ公開の関連記事
![](https://teru1213.com/wp-content/uploads/2022/11/domain2-300x158.jpg)
![](https://teru1213.com/wp-content/uploads/2022/11/domain2-300x158.jpg)
![](https://teru1213.com/wp-content/uploads/2022/07/domain-300x200.jpg)
![](https://teru1213.com/wp-content/uploads/2022/07/domain-300x200.jpg)
![](https://teru1213.com/wp-content/uploads/2022/11/domain-300x158.jpg)
![](https://teru1213.com/wp-content/uploads/2022/11/domain-300x158.jpg)
![](https://teru1213.com/wp-content/uploads/2022/09/ssl-300x158.jpg)
![](https://teru1213.com/wp-content/uploads/2022/09/ssl-300x158.jpg)
![](https://teru1213.com/wp-content/uploads/2023/02/structure-300x158.jpg)
![](https://teru1213.com/wp-content/uploads/2023/02/structure-300x158.jpg)
![](https://teru1213.com/wp-content/uploads/2023/01/sinrental2-300x158.jpg)
![](https://teru1213.com/wp-content/uploads/2023/01/sinrental2-300x158.jpg)
まとめ
今回は、作成したホームページ(Webサイト)をサーバーにアップロード(公開)する方法について詳しく解説しました。
- サーバー契約
- ドメイン取得
- ドメイン設定
- SSL化(http→https)設定
- ファイルアップロード←今回はここを解説しました
ホームページ公開の道のりシリーズは、今回がラストになります。
これまでサーバー契約から始まり、自分のサイトを公開するまでの手順を説明しました。
お疲れ様でした。以上です。