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

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

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

読者の悩み

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

本記事では、こういった疑問に答えます。

作成したホームページ(Webサイト)をサーバーにアップロード(公開)する方法について詳しく解説します。
今回は、エックスサーバー(XSERVER) でサーバー契約していることを前提に解説していきます。
※エックスサーバー(XSERVER)以外のレンタルサーバーでも手順に大きな違いはありません。

レンタルサーバーの契約がまだの方は、下記の記事を参考にサーバー契約から進めてください。

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

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

本記事の信頼性

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

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

ホームページ公開までには、大きく5つのステップをクリアする必要があります。

ホームページ公開の道のり
  1. サーバー契約
  2. ドメイン取得
  3. ドメイン設定
  4. SSL化(http→https)設定
  5. ファイルアップロード

今回はステップ5にあたる「ファイルアップロード」について、深掘りしていきます。

WEBサイト公開の作業を1から実施したい方は「誰でもできる!WEBサイトの公開方法【初心者向け】」の記事をご覧ください。

目次

ファイルアップロードの方法

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

  1. FTPソフトのインストール
  2. 契約サーバーへの接続情報を確認
  3. FTPソフトを使用して契約サーバーへ接続
  4. 公開用ファイルのアップロード

そもそもFTPとは?

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

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

FTP通信イメージ
FTP通信のイメージ図

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

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

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

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

FileZillaの特徴
  • MacとWindowsのどちらでも利用できる。
  • 無料で利用できる。
  • 日本語対応している。

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

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

FTPソフトのインストール

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

FTPソフトのインストール2

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

FTPソフトのインストール3

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

FTPソフトのインストール4

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

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

STEP2:契約サーバーへの接続情報を確認

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

そもそも接続情報とは?

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

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

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

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

接続情報の確認方法

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

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

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

接続情報の確認方法
補足情報

初期ドメイン「XXXXXX.xsrv.jp」の「XXXXXX」がサーバーIDになります。
また、会員登録完了時に送られる下記メールにも記載されています。

件名:【Xserverアカウント】■重要■サーバーアカウント設定完了のお知らせ〜

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

接続情報の確認方法2

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

接続情報の確認方法3

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

接続情報の確認方法4

FTP接続(FileZilla)するために必要な情報

ホストサブFTPアカウント設定画面にて確認
ユーザーサーバーパネルのログインに使用したサーバーIDと同じ
パスワードサーバーパネルのログインに使用したサーバーパスワードと同じ
FTP接続(FileZilla)するために必要な情報

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

下記の記事にて、レンタルサーバー別に接続情報の調べ方をまとめて解説しています。

TERU

エックスサーバー(XSERVER)以外の場合、こちらを参照ください。

STEP3:FTPソフトを使用して契約サーバーへ接続

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

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

サーバーへの接続情報を設定

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

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

サーバーへの接続情報を設定

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

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

サーバーへの接続情報を設定2

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

サーバーへの接続情報を設定3
①ホストサブFTPアカウント設定画面にて確認
②ユーザーサーバーパネルのログインに使用したサーバーIDと同じ
③パスワードサーバーパネルのログインに使用したサーバーパスワードと同じ
FTP接続(FileZilla)するために必要な情報

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

サーバーへの接続情報を設定4

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

サーバーへFTP接続を行う

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

サーバーへFTP接続を行う

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

サーバーへFTP接続を行う2

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

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

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

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

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

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

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

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

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

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

例)エックスサーバー(XSERVER)の公開フォルダ構成
  • /”独自ドメイン名”/public_html/
  • /”独自ドメイン名2”/public_html/
  • /”独自ドメイン名3”/public_html/

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

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

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

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

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

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

初期ファイル
  • index.html
  • default_page.png
初期ファイルの削除
独自ドメインの初期状態画面

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

初期ファイルの削除2

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

初期ファイルの削除3

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

削除対象ファイル
  • default_page.png
  • index.html

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

初期ファイルの削除4

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

初期ファイルの削除5

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

初期ファイルの削除6

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

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

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

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

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

公開用ファイルをアップロード

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

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

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

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

STEP4-3:サイト確認

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

サイト確認

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

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

それでも表示されない場合チェックする点

・公開用ファイルは全てアップロードされているか?
・アップロード先(公開フォルダ)を間違えていないか?
・ローカル(自分のPC)上では正常に表示できるか?

Webサイト公開の関連記事

ドメイン取得

ドメイン設定

SSL設定

まとめ

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

Webサイト公開の道のり
  1. サーバー契約
  2. ドメイン取得
  3. ドメイン設定
  4. SSL化(http→https)設定
  5. ファイルアップロード←今回はここを解説しました

Webサイト公開の道のりシリーズは、今回がラストになります。

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

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次
目次
閉じる