この記事ではファイル転送ツールを使用してオンラインでサイトを公開する方法を説明します。
| 学習の前提 | 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あなたのWebサイトは
demozilla.examplehostingprovider.netで表示されます。このアカウントに公開するには、SFTP を使用して次の資格情報で接続してください：
- SFTP サーバ:
sftp://demozilla.examplehostingprovider.net- ユーザ名:
demozilla- パスワード:
quickbrownfox- ポート:
5548- Web 上に公開するには、ファイルを
Public/htdocsディレクトリに置きます
最初に http://demozilla.examplehostingprovider.net/ を見てみましょう。見ての通り、まだそこには何もありません：
メモ: ホスティングプロバイダによっては、最初にあなたの Web アドレスに行ったときに、「このWebサイトは[ホスティングサービス]によってホストされています。」というようなページが表示されます。
SFTP クライアントを遠隔のサーバに接続するには、次の手順を実行します。
- メインメニューから ファイル > サイトマネージャ と選択します
- [サイトマネージャ] ウィンドウで、[新規サイト] ボタンをクリックし、提供されたスペースにサイト名を demozilla として入力します
- ホスティングプロバイダから提供された SFTP サーバのホストを Host: フィールドに入力します
- [ログオンの種類] ドロップダウンで [標準] を選択し、提供されたユーザ名とパスワードを該当するフィールドに入力します
- 正しいポートおよびその他の情報を入力します
ウィンドウは次のようになります：
次に Connect を押して SFTP サーバに接続します。
注意: ホスティングプロバイダがホスティングスペースへの SFTP (セキュア FTP) 接続を提供していることを確認してください。FTP は本質的に安全ではないため、使用しないでください。
こちらとあちら：ローカルビューとリモートビュー
一度接続すると、画面は次のようになります (私たちはあなた自身のアイデアを伝えるために例を挙げています)。
あなたが見ているものを調べてみましょう：
- 中央の左ペインには、ローカルファイルが表示されます。Web サイトを保存しているディレクトリ (例:
mdn) に移動します - 中央の右ペインには、リモートファイルが表示されます。遠くの FTP ルート (このケースでは、
users/demozilla) にログインしています - 今のところ、下部と上部のペインを無視することができます。それぞれ、あなたのコンピュータと SFTP サーバ間の接続状態を示すメッセージのログ、SFTP クライアントとサーバ間のすべてのインタラクションのライブログです
サーバへのアップロード
私たちのホスト命令の例では、「Web 上に公開するには、ファイルを Public/htdocs ディレクトリに入れてください」となっています。右ペインの指定されたディレクトリに移動する必要があります。このディレクトリは実質的にあなたの Web サイトのルートで、index.html ファイルやその他のアセットがどこに行くかを示します。
ファイルを置く正しいリモートディレクトリが見つかったら、サーバにファイルをアップロードしますが、それにはファイルを左ペインから右ペインにドラッグ & ドロップする必要があります。
本当にオンラインですか？
これまでのところとても良いですが、ファイルは本当にオンラインですか？ ブラウザでWebサイト (例えば http://demozilla.examplehostingprovider.net/) に戻って再確認することができます。
そしてやりました！ Web サイトは動いています！
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) を介して Web サイトを公開することができます。
これの使い方の基本については、Web 入門の Web サイトの公開の記事で説明しているので、ここでは繰り返しません。
ただし、GitHub で Web サイトをホストすることはできますが、カスタムドメインを使用することもできます。詳しいガイドは Using a custom domain with GitHub Pages をご覧ください。