ペコネット

ページの先頭へ
ページの先頭へ
ホーム > サーバー構築 > IISでHTMLサイト > ホームページの公開

ホームページ(コンテンツ)の公開

が設定されましたのでコンテンツを公開するWebサイトを作成します。

Webサイトの追加

画像の拡大

IISマネージャーを起動して、左ペインのサーバー名を右クリック。「Webサイト」の追加を選択します。

Webサイトの追加の設定

画像の拡大

Webサイトの追加の設定画面ですが、Webサイト名を「pecotest」(任意)としました。

「物理パス」はルートディレクトリの作成で作成したフォルダ「C:\inetpub\wwwroot\pecotest」を指定します。

「ホスト名」はサーバーを固定IPにする。ホスト名を設定する。で設定したホスト名「www.pecotest.local」を指定します。「OK」をクリックして閉じます。

Webサイトの確認

画像の拡大

IISマネージャーの左ペインを見ると「pecotest」が表示されサービスを開始しています。

FTPでファイル(コンテンツ)を転送する。(準備)

仮想ディレクトリの追加

画像の拡大

IISマネージャーを起動して、左ペインのFTPの設置と設定で作成したFTPサイト(WinFTP)を右クリック。「仮想ディレクトリの追加」を選択します。

仮想ディレクトリの追加の設定

画像の拡大

仮想ディレクトリの追加の設定画面。エイリアス名を「link-pecotest」としました(任意)

物理パスはルートディレクトリの作成で作成したフォルダ「C:\inetpub\wwwroot\pecotest」を指定します。

仮想ディレクトリの確認

画像の拡大

FTPサイトに仮想ディレクトリが表示されています。この仮想ディレクトリにFTPクライアントでアクセスすることによりWebサイトのルートディレクトリにアクセス出来るようになります。

※ セキュリティを考慮した設定ですが、直接アクセスすることも可能です。

FTPクライアントでコンテンツ(ファイル)を転送する。

Windows10などのクライアントPCからFTPクライアントのFFFTPを使ってファイルを転送します。

コンテンツを準備する

コンテンツの準備

画像の拡大

コンテンツを転送するクライアントPCのCドライブ直下に「pecotest」というフォルダを作成して(この場所は任意で配置して下さい)その中に、テスト画像とそれを表示する簡単なhtmlファイルを準備しました。

FFFTPで転送、設定。

FFFTPの起動

画像の拡大

FFFTPを起動します。

FFFTP:新規ホストの設定1

画像の拡大

新規ホストのボタンをクリック。基本設定タブで

  • ホストの設定名:「WinFTP」…「FTPの設置」で設定
     ↑この名前は一致していなくても構いませんん。
  • ホスト名:「ftp.pecotest.local」…「 ホスト名を設定する」で設定
  • ユーザー名:「ftp-user」…「FTPの設置」で設定
  • パスワード:「***」…「FTPの設置」で設定
  • ローカルの初期フォルダ:コンテンツを用意したフォルダ「C:\pecotest」とします。
  • ホストの初期フォルダ「/link-pecotest/」先ほど設定したFTPサイトの仮想ディレクトリを指定します。
FFFTP:新規ホストの設定2

画像の拡大

次に「暗号化」タブをクリックして「暗号化なしで接続を許可」のチェックを外します。

※ FTPSの設定をしていない場合は外さないで下さい。

FFFTP:証明書の確認

画像の拡大

接続します。この証明書を信頼し、通信を続行するには「OK」を選択してください。とのウインドウが表示されます。「OK」をクリックします。

FFFTP:暗号化状態の保存

画像の拡大

暗号化状態の保存。「はい」をクリックします。

FFFTP:サーバーに接続

画像の拡大

サーバーに接続されました。
「www.pecotest.local」のドキュメントルートが表示されます(現在は空)

FFFTP:ファイルのアップロード

画像の拡大

準備した画像ファイルとそれを表示するためのhtmlファイルを選択してアップロードします。

FFFTP:ファイルのアップロードの確認

画像の拡大

右側のテストサイトのルートディレクトリにアップロードされました。

Webブラウザでアクセスして表示を確認する。

Windows10などのクライアントPCから、Google ChromeなどのWebブラウザを使ってアクセスします。

Chromeの起動

画像の拡大

Google Chromeを起動します。

Chromeのアドレスバー

画像の拡大

アドレスバーに「http://www.pecotest.local」と入力してアクセスします。

Webサイトの表示の確認

画像の拡大

Webブラウザにテストサイトにアップロードした画像(コンテンツ)が表示されました。