前回の学習で作成した「学園祭のWebページ」をRaspberry Piに入れて、他のコンピュータやスマートフォンなどから見ることができるようにします。
他のパソコンとかスマホでも見れるの！すげー
はい、でもそのためには準備が必要なので、しっかりやっていきましょう！
以下の手順で準備をしていきます。
WebページをWebサーバで公開するための4つのステップ
- ステップ1. WebページをWebサーバに設置する
- ステップ2. WebサーバのIPアドレスを確認する
- ステップ3. Webページを閲覧する端末のネットワークを確認する
- ステップ4. Webページを閲覧する端末からページを開く
早速ステップ1から始めましょう。
ステップ1. WebページをWebサーバに設置する
前回の学習で作成したWebページをRaspberry Piにコピーします。
WindowsやMacなど他のコンピュータで作成していた場合は、USBを使ってコピーしてください。
前回提出したアクティビティは、レッスン一覧の「提出したアクティビティ」からもダウンロードできます。
レッスン一覧
準備するファイル
- ip0108k2.html
- style.css
「ip0108k2.html」ファイルと「style.css」ファイルを、Raspberry Piの「/var/www/html」フォルダの中に、CSSフォルダを作成し、次のフォルダ構成でコピーします。
ファイルの構造
Raspberry Piのファイルマネージャで見ると次のようになっていればうまくできています。
続いて、「ステップ2. WebサーバのIPアドレスを確認する」に進みましょう。
ステップ2. WebサーバのIPアドレスを確認する
外部のコンピュータからWebサーバにアクセスするには、IPアドレスがわかっている必要があります。
IPアドレスとは、ネットワーク上でのその端末機器の住所を表すものでしたね。
WebサーバであるRaspberry PiのIPアドレスを調べる方法はいくつかありますが、Wi-Fiのマークから調べることができます。
Wi-Fiのマークからは次のように調べます。
接続情報からIPアドレスがわかります。このIPアドレスはのちに利用するのでメモしておきましょう。
IPアドレスはコマンドで確認することも可能です。
hostname -I
続いて、「ステップ3. Webページを閲覧する端末のネットワークを確認する」に進みましょう。
ステップ3. Webページを閲覧する端末のネットワークを確認する
Raspberry PiのWebページを他のコンピュータからWebブラウザで見る場合は、1つだけ条件があります。それはRaspberry Piと同じネットワークに存在する端末であることです。
同じネットワークに存在するには、Wi-Fiのアクセスポイントまたはルータを、同じものを使っている必要があります。
今回は、同じWi-Fiのアクセスポイントを使う設定をすることとします。
③-1 Raspberry PiのWi-Fiを確認する。
Raspberry Piが利用しているWi-FiはWi-Fiのアイコンから調べることができます。
このRaspberry Piは「Buffalo-5G-FD98」を使っていることがわかります。
Webページを見る他のコンピュータのWi-Fiを同じアクセスポイントを使っているか確認します。
例えばWindows11であれば下記のように確認できます。
Wi-Fiのアクセスポイントが異なっている場合は、同じWi-Fiを使うように切り替えてください。
続いて、「ステップ4. Webページを閲覧する端末からページを開く」に進みましょう。
ステップ4. Webページを閲覧する端末からページを開く
スマートフォンやWindowsなどの他のパソコンからRaspberry PiのWebサーバにアクセスするには、Webブラウザを起動して、WebページのURLを入力して行います。
WebサーバのURLは次のように指定します。
今回の例の場合、IPアドレス、Webページのファイル名、及びURL例は次のようになります。
- IPアドレス：192.168.11.37(②で調べた値、人によって異なる)
- ファイル名：ip0108k2.html(全員同じ値)
- URL例：192.168.11.37/ip0108k2.html
IPアドレスは、個人ごとに異なるので必ず②で調べた値を指定してください。
Windows11からWebブラウザを起動して表示すると次のようになります。
他の端末からWebページを見ることができましたか？
