【ポートフォリオ 04 検証】ラズパイから動的HTMLを取得して動作検証するまで
はじめに
前回、擬似観光スポットのHTMLを「DOM操作」「連想配列」「オブジェクト」を使用して、動的HTMLとして実装しました。
詳しくは、以下の記事をご参照ください
開発中は、VS Code右下にある「Go Live」をクリックすることで、自分のPC上にローカルサーバを設置し、ブラウザ上での表示を確認していました。
今回は、WebサーバをPC外部に構築し、そこからHTMLを取得して、ブラウザに表示していくプロセスを記事にまとめていきます。
前提
- Ubuntu Server をインストールした Raspberry Pi 4（以下、「ラズパイ」と表記）をセット
- ラズパイは MacBook・GitHubとSSH連携済み
- ラズパイ・使用中の MacBook は同じローカルネットワークに所属
- Frontend のポートフォリオを格納したリポジトリは未クローンの状態
HTML取得の手順
1. ラズパイにリポジトリを配置するまで
2. ラズパイに Web サーバを用意する
3. Pythonモジュールを使用して簡易HTTPサーバを構築するまで
4. ブラウザからサーバにアクセス
1. ラズパイ（OS: Ubuntu Server）にリポジトリを配置するまで
1-1. GitHubからSSHのURLをコピー
1-2. ラズパイにSSH接続
1-3. リモートリポジトリをラズパイにクローン
コマンド実行後
URLを git clone の後に貼ることで、Gitがどこから情報をとってくればいいかを明確にします。
1-4. リポジトリの確認
作成したディレクトリがラズパイに配置されたことを確認
※ 今回のケースでは、クローンしたときには、既に 01_travel_spot ディレクトリを含んだ状態であったため、
2. ラズパイに Web サーバを用意する
Ubuntu Serverをインストールしたラズパイ上に簡易サーバを構築する方法は2つあります。
① Python の簡易HTTPサーバ
② Nginx / Apache を使う
今回のケースでは①を選択しました。
理由
- 後のプロジェクトでNginx等のWebサーバについて学習する機会があること
- すでにPythonをインストールしていること
3. Pythonモジュールを使用して簡易HTTPサーバを構築するまで
現在のディレクトリをWebルートとして公開し、ポート8000で待機する簡易サーバを起動します。
python3 -m http.server 8000
python3 の標準モジュール http.server を使い、現在のディレクトリをルートとして HTTP サーバを起動します。
ポート8000で待機するので、ブラウザから http://<ラズパイのIP>:8000 にアクセスできます。
これで、サーバの準備が完了しました。
実際にブラウザからアクセスしていきます。
4. ブラウザからサーバにアクセス
4-1. ラズパイのIPアドレスを調べて、ブラウザのURL欄に入力
初回アクセス
http// と :（コロン）を失念してしまったためにページを出力できませんでした。
もう一度、コロンを入れて再アクセスしていきます。
2回目のアクセス
ここで、作成した「01_travel_spot/」をクリックします。
実際に、自分のPCの外部のサーバにリポジトリを配置し、HTTPリクエストとHTTPレスポンスを通じて、HTMLを取得することに成功しました。
このときのラズパイ（Server）側は以下のようになっていました。
GETリクエストにより必要なHTML、CSS、JSファイル、画像をリクエストしていることがわかります。
4-2. Serverの停止
Ctrl + C コマンドを入力し、サーバを停止します。
「Not Secure」について
今回は、個人情報を含まないHTMLを取得していることを目的としていたため、HTTPを使用しました。
そのため、通信に平文が使われるため、HTTPSより安全性の面で劣ることから、ブラウザのURL欄に表示されました。
今後の課題
今回は、簡易サーバを構築するために、Pythonの標準モジュールである http.server を使用しました。
実際のシステムにおいては、Webサーバとして、NginxやApacheが使用されています。
これにより、HTTPリクエストを効率的に捌くことが可能になります。
したがって、今後の改善点としては、
- 目的に応じて、Nginx / Apacheの導入を検討すること
- 通信の安全性を高めるために、HTTPSの導入を検討すること
が挙げられます。
今後の学習スケジュール・プロジェクトとしてこれらの点があるため、しっかり学習して使えるようにしていきます。
まとめ
実際に作成した動的なHTMLを、外部のサーバから取得し、ブラウザに表示できるか検証しました。
結果として、簡易なエラーを発生させながらもHTMLを正常に取得し、ブラウザに表示することができました。
今後の課題に記載した内容について、しっかり学習を進めていき、自分のものにしていきます。
最後までお読みいただき、ありがとうございました。
参考URL
Discussion