COLUMN コラム

ウェブサイトのコーディングをしている時、簡易的なローカルサーバーを立てたい時はありませんか？
例えばレスポンシブ作業をスマートフォンの実機で確認したい時や、開発環境にアップする程でもない修正の確認など理由は様々です。
今回はそんなちょっとした時に簡単にローカルサーバーを立てる方法を紹介します。

1. 下準備 [Pythonのインストール]

今回の作業は下準備がほとんどと言っても過言ではありません。
Pythonというプログラミング言語を使用するため、まずはPythonを使用できる環境を用意します。
実はmacOSによっては、標準でPythonがインストールされています。既にPythonが使用できる場合は2. ローカル環境の立ち上げまで飛ばしてください。

1-1. Homebrewのインストール

まずはHomebrewをインストールしましょう。
Pythonをインストールするはずなのにいきなり違うものをインストールすることに違和感を感じるかもしれませんが、Homebrewを使用すればより簡単にPythonをインストールすることができますので今回はHomebrewを使用します。
HomebrewとはmacOS上で動作するパッケージ管理ツールで、Homebrewを使用して様々なアプリケーションをインストールすることができます。Google PlayやApp storeのようなものと考えるとイメージしやすいかもしれません。
参考：【完全版】Homebrewとはなんぞや
 
今回の記事ではインストール方法は割愛しますので下記の記事を参考に進めてください。
Homebrewのインストール方法を分かりやすく解説（M1 Macも対応）

1-2. pyenvのインストール

またPythonと違うものをインストールしていると思うかもしれませんが、pyenvはPythonのバージョン管理ツールです。Pythonの複数あるバージョンから任意のバージョンを選んで使用することができます。
pyenvは先ほどインストールしたHomebrew使ってインストールします。
下記のコマンドを実行してください。($は不要です。)

$ brew install pyenv

pyenvが正常にインストールされたかを確認します。

$ pyenv -v

pyenv 0.0.0(バージョン名)が表示されていれば正常にインストールが完了しています。
 
この後は『パスを通す』という初心者の方が最初に躓く作業があるのですが、手順通りに入力すれば問題ありませんので安心してください。画面に変化はありませんが上から順に入力しましょう。

$ echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.zshrc
$ echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.zshrc
$ echo 'eval "$(pyenv init -)"' >> ~/.zshrc
$ source ~/.zshrc

これでPythonをインストールする準備が整いました。

1-3. Pythonのインストール

先ほどインストールしたpyenvを使用してPythonをインストールします。
まずは下記のコマンドを実行してください。

$ pyenv install --list

このように使用可能なバージョンがリスト化されて表示されます。
 

 
今回はバージョン3.11.6を使用したいと思います。
下記のコマンドを実行してください。

$ pyenv install 3.11.6

しばらくすると指定したバージョンのインストールが完了するので、完了したら改めて確認してみましょう。

$ pyenv version

先ほど指定したバージョンが表示されていれば正常にインストールが完了しています。
しかしこの状態ではまだPythonを使用することはできません。最後に下記のコマンドを実行してください。

$ pyenv global 3.11.6

これで下準備は全て完了したので、いよいよローカルサーバーを立ち上げてみたいと思います。

2. ローカル環境の立ち上げ

それではローカルサーバーを立ち上げます。
下記のコマンドをターミナルで実行してください。

$ python -m http.server 1010(任意の番号)

以上で作業は完了です。
ブラウザで下記のURLにアクセスしてみてください。
http://localhost:1010(任意の番号)/
 

 
先ほど実行したコマンドは、コマンドを実行したディレクトリをドキュメントルートにしたWebサーバーが立ち上がります。
なので今度はテストフォルダを用意して実行してみましょう。
 
今回はデスクトップに「test」フォルダを用意し、その中にindex.htmlファイルを用意しました。
 

 
index.html内は下記の記述が記載されています。
 

 
まずはターミナルを使用して作成したtestフォルダに移動します。
下記のコマンドをターミナルで実行してください。

$ cd /~自分の環境に合わせてください~/Desktop/test

ディレクトリの移動が完了したらそのまま先ほどのローカルサーバーを立ち上げるコマンドを実行します。

$ python -m http.server 1010

表示される内容がtestフォルダ内のindex.htmlに変わりました。
 

3. スマートフォン実機でのローカル環境確認方法

今回立ち上げたローカルサーバーは、同じWi-Fiに接続していれば実際のスマートフォンで確認することもできます。
まずは接続しているWi-FiのIPアドレスを調べます。
『システム環境設定』→『ネットワーク』の順で開き、赤枠の部分を確認してください。
そこに表示されている数字が、現在接続しているWi-FiのIPアドレスです。
 

 
そのIPアドレス＋先ほどローカルサーバーを立ち上げた際に入力したポート番号をスマートフォンのブラウザでアクセスすると、PCで立ち上げたローカル環境がスマートフォン側でも表示されます。
例：00.0.0.000:1010
 

おわりに

今回はちょっとした時に使える簡易的なローカルサーバーの立て方を紹介しました。
一度設定してしまえばたった1行のコマンドを実行するだけでローカルサーバーを立てられるので、この記事を参考にぜひ利用してみてください。