ウェブサーバーにファイルをアップロードするには
この記事では、ファイル転送ツールを使用してオンラインでサイトを公開する方法を説明します。
| 前提条件: | ウェブサーバーとは何かとドメイン名の仕組みを知っている必要があります。基本的な環境設定方法と簡単なウェブページの作成方法も理解しておく必要があります。 |
|---|---|
| 目標: | 様々なファイル転送ツールを使用し、ファイルをサーバーにプッシュする方法について説明します。 |
概要
シンプルなウェブページを作成している場合 (例として HTML の基本を参照)、ウェブサーバー上にオンラインで転送したいと思うかもしれません。この記事では SFTP クライアント、RSync、GitHub などの選択肢をとおして、その方法を説明します。
SFTP
SFTP クライアントには、いくつもの選択肢があります。ここのデモは FileZilla を使うことにします。 Windows、macOS、Linux で使え、無料だからです。 FileZilla をインストールするには、 FileZilla ダウンロードページに移動し、大きなダウンロードボタンをクリックしてから、通常の方法でインストーラーファイルからインストールします。
メモ: もちろん他にもたくさんの選択肢があります。詳しくは公開ツールを参照してください。
FileZilla アプリケーションを開きます。次のようなものが表示されます。
ログイン
この例では、ホスティングプロバイダー (私たちの HTTP ウェブサーバーをホスティングするサービス) が架空の会社 "Example Hosting Provider" であり、 URL は mypersonalwebsite.examplehostingprovider.net であったとします。
私たちはアカウントを開設し、その情報を受け取ったばかりです。
Example Hosting Provider でアカウントを開設しましたことをお祝いします。
アカウント:
demozillaあなたのウェブサイトは
demozilla.examplehostingprovider.netで表示されます。このアカウントに公開するには、 SFTP を使用して次の資格情報で接続してください。
- SFTP サーバー:
sftp://demozilla.examplehostingprovider.net- ユーザー名:
demozilla- パスワード:
quickbrownfox- ポート:
5548- ウェブ上に公開するには、ファイルを
Public/htdocsディレクトリーに置いてください。
最初に http://demozilla.examplehostingprovider.net/ を見てみましょう。見ての通り、まだそこには何もありません。
メモ: ホスティングプロバイダーによっては、最初にあなたのウェブアドレスに行ったときに、「このウェブサイトは[ホスティングサービス]によってホストされています。」というようなページが表示されます。
SFTP クライアントを遠隔のサーバーに接続するには、次の手順を実行します。
- メインメニューからファイル > サイトマネージャ... を選択します。
- サイトマネージャウィンドウで、新規サイトボタンをクリックし、提供されたスペースにサイト名を demozilla として入力します。
- ホスティングプロバイダーから提供された SFTP サーバーのホストを Host: フィールドに入力します。
- ログオンの種類ドロップダウンで標準を選択し、提供されたユーザー名とパスワードを該当するフィールドに入力します。
- 正しいポートおよびその他の情報を入力します。
ウィンドウは次のようになります。
次に Connect を押して SFTP サーバーに接続します。
注意: ホスティングプロバイダーがホスティングスペースへの SFTP (セキュア FTP) 接続を提供していることを確認してください。 FTP は本質的に安全ではないため、使用しないでください。
こちらとあちら：ローカルビューとリモートビュー
一度接続すると、画面は次のようになります（私たち自身の例と結びつけて、イメージをつかんでください。）
見えているものを調べてみましょう。
- 中央の左ペインには、ローカルファイルが表示されます。ウェブサイトを保存しているディレクトリー (例:
mdn) に移動します - 中央の右ペインには、リモートファイルが表示されます。遠くの FTP ルート (このケースでは、
users/demozilla) にログインしています - 今のところ、下部と上部のペインを無視することができます。それぞれ、あなたのコンピューターと SFTP サーバー間の接続状態を示すメッセージのログ、 SFTP クライアントとサーバー間のすべてのインタラクションのライブログです
サーバーへのアップロード
私たちのホスト命令の例では、「ウェブ上に公開するには、ファイルを Public/htdocs ディレクトリーに入れてください」となっています。右ペインの指定されたディレクトリーに移動する必要があります。このディレクトリーは実質的にあなたのウェブサイトのルートで、index.html ファイルやその他の資産がどこに行くかを示します。
ファイルを置く正しいリモートディレクトリーが見つかったら、サーバーにファイルをアップロードしますが、それにはファイルを左ペインから右ペインにドラッグ＆ドロップする必要があります。
本当にオンラインですか？
これまでのところとても良いですが、ファイルは本当にオンラインですか？ ブラウザーでウェブサイト (例えば http://demozilla.examplehostingprovider.net/) に戻って再確認することができます。
やりました！ウェブサイトは動いています！
Rsync
Rsync はローカルからリモートへのファイル同期ツールで、ほとんどの Unix ベースのシステム (macOS や Linux など) で一般的に利用可能ですが、 Windows 版も存在します。
既定ではコマンドラインで使用されるため、SFTP よりも高度なツールと見なされています。基本的なコマンドはこんな感じです。
rsync [-options] SOURCE user@x.x.x.x:DESTINATION
-optionsはダッシュの後に 1 つ以上の文字が続きます。たとえば、詳細エラーメッセージの場合は-v、バックアップを作成する場合は-bです。完全なリストは rsync の man ページにあります ("Options summary" を検索してください)。SOURCEは、ファイルのコピー元となるローカルファイルまたはディレクトリーへのパスです。user@は、ファイルのコピー先となるリモートサーバー上のユーザーの資格情報です。x.x.x.xはリモートサーバーの IP アドレスです。DESTINATIONは、リモートサーバー上のディレクトリーまたはファイルをコピーする場所へのパスです。
ホスティングプロバイダーからそのような詳細情報を取得する必要があります。
詳細およびその他の例については、 How to Use Rsync to Copy/Sync Files Between Servers を参照してください。
もちろん、FTP の時と同じように安全な接続のもとで使用することをお勧めします。Rsync の場合は -e オプションを使用して、SSH を介した接続を確立するための SSH 詳細を指定します。
rsync [-options] -e "ssh [SSH DETAILS GO HERE]" SOURCE user@x.x.x.x:DESTINATION
必要なものの詳細については、 How To Copy Files With Rsync Over SSH を参照してください。
Rsync GUI ツール
他のコマンドラインツールと同様に、コマンドラインの使用に慣れていない人向けに Rsync 用の GUI ツールもあります。 Acrosync はそのようなツールの 1 つで、Windows と macOS で利用可能です。
繰り返しになりますが、ホスティングプロバイダーから接続認証情報を取得する必要がありますが、この方法でそれらを入力するための GUI が得られます。
GitHub
GitHub では、GitHub pages (gh-pages) を介してウェブサイトを公開することができます。
これの使い方の基本については、ウェブ入門のウェブサイトの公開の記事で説明しているので、ここでは繰り返しません。
ただし、 GitHub でウェブサイトをホスティングすることはできますが、カスタムドメインを使用することもできます。詳しいガイドは Using a custom domain with GitHub Pages をご覧ください。