クロームブックでWebサーバを立ち上げる

クロームブックでPythonのhttp.serverを利用してWebサーバを立ち上げてみます。

事前に下記の記事を参考にしてPythonを最新版にしておきましょう。

最初にクロスティーニを起動します。

サーバ用のコードは慣習に従い、ホームディレクトリ以下にworkspaceディレクトリを設け、その下にプロジェクト用のディレクトリを設けた後にサーバ用のコードを作成します。

今回はpy-serverというプロジェクト名にして話を進めます。

下記のコマンドを実行します。

$ cd ~
$ mkdir workspace
$ cd workspace
$ mkdir py-server

これで、

/home/******(ユーザ名が入る)/workspace/py-server/

というディレクトリ構造ができました。

続いて下記のパスになるようにファイルを作成します。

/home/******(ユーザ名が入る)/workspace/py-server/index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>python simple server</title>
<head>
<body>
hello python simple server.
</body>
</html>

後はコマンドでサーバを立ち上げるだけですが、その前に下記のコマンドでクロスティーニに振り当てられたローカルIPアドレスを調べておきます。

$ hostname -I

100.115.92.205 240d:1e:3bb:5500:216:3eff:fe45:baf8

のような値が出力されると思います。

この値は100.115.92.205の方がIPv4の値で、残りはIPv6の値になりまして、IPv4の方を記録しておきます。

下記のコマンドを実行してサーバを立ち上げてみます。

$ cd ~/workspace/py-server
$ python3 -m http.server 8000

Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...

コマンド実行後に上記のような値が出力されます。

サーバが立ち上がったら、Chrome(クローム)でアクセスしてみます。

クロームを開き、アドレスバーにhttp://100.115.92.205:8000を入力してエンターを押します。

※100.115.92.205は先程、hostname -Iで取得したIPv4の値になります。

※:8000の箇所はサーバを立ち上げる際にコマンド内で指定した値になります。

クロームの方でエラーが発生せずに上のキャプチャのような表示を確認できればサーバの立ち上げは終了です。

クローム経由でアクセス後にクロームブックのクロスティーニの方を確認してみると、

100.115.92.25 - - [13/Dec/2023 15:50:53] "GET / HTTP/1.1" 200 -

のように表示されていました。

続いて、同一のネットワーク(同じLAN内)にあるスマホ等のデバイスでアクセスできるようにしてみます。

はじめにクロームブックに割り当てられたローカルIPアドレスを調べます。

クロスティーニの起動画面で管理のボタンを押します。

左ナビでネットワークを探し、Wi-Fiの詳細を開き、

Wi-Fiのページで現在接続中のネットワークの詳細を開きます。

IPアドレスに記載されている値(192.168.1.37の箇所)がクロームブックに割り当てられたIPアドレスになりますので記録しておきます。

続いて、クロスティーニの方のポートの転送設定を行います。

再びクロスティーニの起動画面を開き、管理ボタンを押します。

Linux開発環境の詳細を開き、

ポート転送を開きます。

Pythonでサーバを立ち上げる時に指定した値(8000)を入力して追加します。

wlan0:の箇所にポート番号8000が追加され、状態がオンになっていることを確認できれば設定は終了です。

サーバを再び起動して、スマホ等のブラウザでアクセスしてみます。

アクセスする際にアドレスバーに入力する値は、http://192.168.1.37:8000になります。

※192.168.1.37に入る値は先程調べたネットワークに割り当てられたIPアドレスになります。

スマホ等の別デバイスでもクロームブックで立ち上げたサーバからの値を受け取る事ができました。

別デバイスでアクセス後にクロームブックのクロスティーニの方を確認してみると、

192.168.1.44 - - [13/Dec/2023 15:42:33] "GET / HTTP/1.1" 200 -

のような出力が追加されているはずです。