はじめに
「Webサイトのファイルをサーバーにアップロードしたいけれど、どこに入れればいいの？」
「FTPソフトでファイルを送ったのに、ブラウザで確認するとページが表示されないのはなぜ？」と困っていませんか。
HTMLやCSS、画像ファイルをパソコンに用意しても、サーバー上の保存場所やファイル名を間違えると、アップロード後にページが正しく表示されないことがあります。
この記事では、Webサイトのファイルをサーバーへアップロードする基本的な手順から、アップロード後に表示されないときの確認ポイントや対処法まで紹介します。
Webサイトのファイルをサーバーにアップロードする方法は？
Webサイトを公開するには、作成したHTMLやCSS、画像などのファイルをWebサーバー上の指定された場所へ配置する必要があります。
ここでは、サーバーへのアップロードで実際に何をするのかを確認したうえで、SFTPやファイルマネージャーを使った方法を順番に説明します。
サーバーへのアップロードとは何をする作業なのか
サーバーへのアップロードとは、パソコンに保存しているHTMLやCSS、画像などを、Webサイトを公開するサーバーへ転送する作業です。
「index.html」などを指定された公開用ディレクトリに配置することで、Webページとして表示できるようになります。
アップロード先を間違えると正しく表示されないため、サーバーで指定されたフォルダを確認してから配置しましょう。
アップロードにはSFTPやファイルマネージャーを使う
ファイルをアップロードする方法には、SFTPソフトやレンタルサーバーのファイルマネージャーがあります。
SFTPではパソコンからサーバーの指定フォルダへファイルを転送し、ファイルマネージャーでは管理画面からファイルを選んでアップロードします。
使いやすい方法を選び、公開用ディレクトリを確認しながら進めると安心です。
サーバーにファイルをアップロードする前に準備するもの
サーバーへファイルをアップロードする前に、接続に必要な情報とファイルを配置する場所を確認しておく必要があります。
アップロードしたファイルをWeb上で公開するためのディレクトリも確認しておきましょう。
ホスト名・ユーザー名・パスワードを確認する
SFTPで接続する場合は、サーバーの管理画面や契約時の案内から、ホスト名・ユーザー名・パスワードを確認します。
入力内容が1文字でも違うと接続できないため、大文字・小文字や記号にも注意しましょう。
SFTPソフトへ入力する前に、案内されている接続情報と一致しているか確認しておくと安心です。
サーバーの公開用ディレクトリを確認する
アップロード前に、Webページを公開するディレクトリの場所をサーバーの管理画面やマニュアルで確認します。
SFTPで接続したら、指定された公開用ディレクトリを開き、HTMLやCSS、画像などを配置します。
別の場所へアップロードするとWebページに表示されないことがあるため、転送先を確認しながら進めましょう。
SFTPでWebサイトのファイルをサーバーにアップロードする手順
SFTPでファイルをアップロードするときは、まずSFTPソフトにサーバーの接続情報を入力し、パソコン側とサーバー側のフォルダを確認してファイルを転送します。
転送後は、index.htmlなどの公開したいファイルをWebサーバーの公開用ディレクトリに配置することが重要です。
最後にブラウザでURLへアクセスし、アップロードしたWebページが正常に表示されるか確認します。
SFTPソフトにサーバーの接続情報を設定する
SFTPソフトを起動し、サーバー会社から案内されたホスト名・ユーザー名・パスワードを入力します。
接続方式はSFTPを選び、必要に応じて指定されたポート番号も設定します。入力内容に間違いがないことを確認してから接続しましょう。
ローカル側とサーバー側を確認してファイルを転送する
接続できたら、パソコン側とサーバー側のフォルダを開き、アップロードするファイルを確認します。
HTMLやCSS、画像などを選び、サーバー側の指定フォルダへドラッグ＆ドロップなどで転送します。転送後はエラーがなく、ファイルがサーバー側に表示されているか確認しましょう。
index.htmlなどを公開用ディレクトリに配置する
index.htmlなどのWebページ用ファイルは、サーバー会社が指定する公開用ディレクトリへ配置します。
別のフォルダへアップロードするとURLからページを表示できないことがあるため、index.htmlが正しい場所にあるか確認しておきましょう。
ブラウザでWebページが表示されるか確認する
アップロードが完了したら、ブラウザでWebサイトのURLを開き、ページが正常に表示されるか確認します。
表示されない場合は、URLに間違いがないか、ファイルが正しい公開用ディレクトリに配置されているかを確認してみましょう。
ファイルマネージャーからサーバーにアップロードする方法
ファイルマネージャーを使えば、SFTPソフトをインストールしなくても、レンタルサーバーの管理画面からWebサイトのファイルをアップロードできます。
まず管理画面からファイルマネージャーを開き、Webサイトを公開するディレクトリを確認します。
そのうえで、公開用ディレクトリを選択してHTMLや画像などの必要なファイルをアップロードします。
レンタルサーバーの管理画面からファイルマネージャーを開く
レンタルサーバーの管理画面へログインし、「ファイルマネージャー」や「ファイル管理」などの項目を開きます。
サーバー内のフォルダが表示されたら、Webサイトで使用する公開用ディレクトリを確認しましょう。
ファイルマネージャーなら、SFTPソフトを使わず管理画面から直接ファイルを操作できます。
公開用ディレクトリを選んでファイルをアップロードする
公開用ディレクトリを開き、アップロードするHTMLやCSS、画像などをパソコンから選択します。
アップロード後は、必要なファイルが一覧に表示されているか確認しましょう。
別のフォルダに配置するとWebページに表示されないことがあるため、アップロード先を確認しながら進めると安心です。
サーバーにファイルをアップロードできないときの確認ポイント
ファイルをアップロードできないときは、サーバーへの接続、ファイルの配置場所、ブラウザに表示される内容の3点を順番に確認します。
ファイルを更新したのに古い内容が表示される場合は、ブラウザやサーバーなどのキャッシュも確認しましょう。
サーバーに接続できない場合は接続情報を確認する
SFTPで接続できない場合は、ホスト名・ユーザー名・パスワード・ポート番号を確認します。
サーバー会社から案内された情報と照らし合わせ、大文字・小文字や記号に間違いがないか見直しましょう。
それでも接続できない場合は、接続方式や指定されているポート番号も確認してみてください。
アップロードしたファイルが表示されない場合は配置場所を確認する
アップロードしたファイルが表示されない場合は、公開用ディレクトリに正しく配置されているか確認します。
別のフォルダにHTMLや画像をアップロードしていた場合は、指定された公開用ディレクトリへ移動します。
移動後にブラウザでURLを開き直し、正常に表示されるか確認しましょう。
更新した内容が反映されない場合はキャッシュを確認する
ファイルを更新しても古い内容が表示される場合は、ブラウザのキャッシュが残っている可能性があります。
まずページを再読み込みし、変わらなければキャッシュを削除してから開き直してみましょう。
それでも反映されない場合は、サーバー側のキャッシュ設定も確認してみてください。
キャッシュを削除しても更新内容が変わらない場合は、Webページが古いファイルを読み込んでいる原因を確認してみましょう。
▶Webサイトを更新しても反映されない原因は？キャッシュやサーバーの確認方法を解説
まとめ
Webサイトのファイルをサーバーへアップロードするときは、HTMLやCSS、画像などのファイルを公開用ディレクトリへ正しく配置することが重要です。
SFTPを使う場合はホスト名・ユーザー名・パスワード・ポート番号を確認して接続し、ファイルマネージャーを使う場合はレンタルサーバーの管理画面から公開用ディレクトリを開いてアップロードします。
アップロード後にページが表示されないときは、ファイルの配置場所とURLを確認し、更新内容が反映されないときはブラウザやサーバーのキャッシュを確認しましょう。
サーバーへの接続からファイルの配置、ブラウザでの表示確認まで順番に確認すれば、アップロード時のトラブルを切り分けやすくなります。
