どのようにファイルを Web サーバにアップロードしますか?

この翻訳は不完全です。英語から この記事を翻訳 してください。

この記事ではファイル転送ツールを使用してオンラインでサイトを公開する方法を説明します。

前提条件 あなたはウェブサーバが何であるかドメイン名の仕組みを知っていなければなりません。また、基本的な環境の設定方法簡単なWebページの作成方法も理解しておく必要があります。
目的 FTP を使用してファイルをサーバーにプッシュする方法を学びます。

概要

シンプルな Web ページを作成している場合 (例として HTML の基本を参照)、Web サーバ上にオンラインで配置したいと思うかもしれません。この記事では SFTP クライアント、RSync、GitHub などのさまざまなオプションを使用して、その方法を説明します。

SFTP

そこにいくつかの SFTP クライアントがあります。私たちのデモは FileZilla をカバーしています。それは Windows、macOS、Linuxで無料で利用できます。FileZilla をインストールするには、FileZilla ダウンロードページに移動し、大きなダウンロードボタンをクリックしてから、通常の方法でインストーラファイルからインストールします。

メモ: もちろん他にもたくさんのオプションがあります。詳細についてはパブリッシングツールを参照してください。

FileZilla アプリケーションを開きます。次のようなものが表示されます。

ログイン

この例では、私たちのホスティングプロバイダ (私たちの HTTP Web サーバをホストするサービス) は架空の会社 "Example Hosting Provider" であり、URL は次のようになります:mypersonalwebsite.examplehostingprovider.net

私たちはアカウントを開設し、その情報を受け取ったばかりです:

Example Hosting Provider でアカウントを開設しましたことをお祝いします。

アカウント: demozilla

あなたのウェブサイトは demozilla.examplehostingprovider.net で表示されます。

このアカウントに公開するには、SFTP を使用して次の資格情報で接続してください:

  • SFTP サーバ: sftp://demozilla.examplehostingprovider.net
  • ユーザ名: demozilla
  • パスワード: quickbrownfox
  • ポート: 5548
  • Web 上に公開するには、ファイルを Public/htdocs ディレクトリに置きます

最初に http://demozilla.examplehostingprovider.net/ を見てみましょう。見ての通り、まだそこには何もありません:

Our demozilla personal website, seen in a browser: it's empty

メモ: ホスティングプロバイダによっては、最初にあなたの Web アドレスに行ったときに、「このウェブサイトは[ホスティングサービス]によってホストされています。」というようなページが表示されます。

SFTP クライアントを遠隔のサーバに接続するには、次の手順を実行します。

  1. メインメニューから ファイル > サイトマネージャ と選択します
  2. [サイトマネージャ] ウィンドウで、[新規サイト] ボタンをクリックし、提供されたスペースにサイト名を demozilla として入力します
  3. ホスティングプロバイダから提供された SFTP サーバのホストを Host: フィールドに入力します
  4. [ログオンの種類] ドロップダウンで [標準] を選択し、提供されたユーザ名とパスワードを該当するフィールドに入力します
  5. 正しいポートおよびその他の情報を入力します

あなたのウィンドウは次のようになります:

次に Connect を押して SFTP サーバに接続します。

注意: ホスティングプロバイダがホスティングスペースへの SFTP (セキュア FTP) 接続を提供していることを確認してください。FTP は本質的に安全ではないため、使用しないでください。

こちらとあちら:ローカルビューとリモートビュー

一度接続すると、画面は次のようになります (私たちはあなた自身のアイデアを伝えるために例を挙げています)。

あなたが見ているものを調べてみましょう:

  • 中央の左ペインには、ローカルファイルが表示されます。Web サイトを保存しているディレクトリ (例: mdn) に移動します
  • 中央の右ペインには、リモートファイルが表示されます。遠くの FTP ルート (このケースでは、users/demozilla) にログインしています
  • 今のところ、下部と上部のペインを無視することができます。それぞれ、あなたのコンピュータと SFTP サーバ間の接続状態を示すメッセージのログ、SFTP クライアントとサーバ間のすべてのインタラクションのライブログです

サーバへのアップロード

私たちのホスト命令の例では、「Web 上に公開するには、あなたのファイルを Public/htdocs ディレクトリに入れてください」となっています。右ペインの指定されたディレクトリに移動する必要があります。このディレクトリは実質的にあなたの Web サイトのルートで、index.html ファイルやその他のアセットがどこに行くかを示します。

ファイルを置く正しいリモートディレクトリが見つかったら、サーバにファイルをアップロードしますが、それにはファイルを左ペインから右ペインにドラッグ & ドロップする必要があります。

それらは本当にオンラインですか?

これまでのところとても良いですが、ファイルは本当にオンラインですか? ブラウザでウェブサイト (例えば http://demozilla.examplehostingprovider.net/) に戻って再確認することができます。

Here we go: our website is live!

そしてやりました! 私たちのウェブサイトは動いています!

Rsync

Rsync is a local-to-remote file synchronizing tool, which is generally available on most Unix-based systems (like macOS and Linux), but Windows versions exist too.

It is seen as a more advanced tool than SFTP, beause by default it is used on the command line. A basic command looks like so:

rsync [-options] SOURCE user@x.x.x.x:DESTINATION
  • -options is a dash followed by a one or more letters, for example -v for verbose error messages, and -b to make backups. You can see the full list at the rsync man page (search for "Options summary").
  • SOURCE is the path to the local file or directory that you want to copy files over from.
  • user@ is the credentials of the user on the remote server you want to copy files over to.
  • x.x.x.x is the IP address of the remote server.
  • DESTINATION is the path to the location you want to copy your directory or files to on the remote server.

You'd need to get such details from your hosting provider.

For more information and further eamples, see How to Use Rsync to Copy/Sync Files Between Servers.

Of course, it is a good idea to use a secure connection, like with FTP. In the case of Rsync, you specify SSH details to make the connection over SSH, using the -e option. For example:

rsync [-options] -e "ssh [SSH DETAILS GO HERE]" SOURCE user@x.x.x.x:DESTINATION

You can find more details of what is needed at How To Copy Files With Rsync Over SSH.

Rsync GUI ツール

As with other command line tools, GUI tools also exist for Rsync, for those who are not as comfortable with using the command line. Acrosync is one such tool, and it is available for Windows and macOS.

Again, you would have to get the connection credentials from your hosting provider, but this way you'd have a GUI to enter them in.

GitHub

GitHub allows you to publish websites via GitHub pages (gh-pages).

We've covered the basics of using this in the Publishing your website article from our Getting started with the Web guide, so we aren't going to repeat it all here.

However, it is worth knowing that you can also host a website on GitHub, but use a custom domain with it. See Using a custom domain with GitHub Pages for a detailed guide.

ファイルをアップロードするその他の方法

The FTP protocol is one well-known method for publishing a website, but not the only one. Here are a few other possibilities:

  • Web interfaces. An HTML interface acting as front-end for a remote file upload service. Provided by your hosting service.
  • WebDAV. An extension of the HTTP protocol to allow more advanced file management.

ドキュメントのタグと貢献者

このページの貢献者: silverskyvicto
最終更新者: silverskyvicto,