はじめに

こんにちは、くらっちです。
今回は、 Pythonでローカル環境にHTTPサーバーを構築し、Webページを確認する方法の紹介です。
Web開発を行う際、作成したページをローカル環境で確認することはとても重要です。
シンプルなWebアプリケーションのテストやブラウザでの表示確認、cssやHTMLの変更を確認することができます。

Pythonには簡単にHTTPサーバーを立ち上げるための組み込み機能があります。
少ない手順で簡単に localhost でWebページを表示できるので是非お試しください。

PythonでHTTPサーバーを構築する利点

PythonでHTTPサーバーを構築する理由としては、以下の点が挙げられます。
１．シンプル：
　PythonのHTTPサーバーはシンプルで特別な設定や追加パッケージのインストールは不要です。
２．クロスプラットフォーム対応：
　PythonはWindows・macOS・Linuxすべてで動作します。
３．簡単な起動：
　１行のコマンドで簡単にサーバーを起動できます。

事前準備

今回の方法を実行するためには、ローカル環境にPythonのインストールが必要です。
WindowsにPythonをインストールする場合は下記手順を実施します。

１．パッケージのダウンロード

・Python 公式サイトにアクセスします。
・Download から最新のPythonのパッケージをダウンロードします。

２．パッケージのインストール

・管理者権限で、ダウンロードしたexeファイルを起動します。
・「Add python.exe to Path」にチェックを入れます。
　チェックしないとPythonが起動しません。チェックし忘れたら再インストールしましょう。
・「Install Now」をクリックします。

３．Pythonの実行

・インストールされたことを確認するためコマンドプロンプトを起動します。
・起動後、python と入力し下図のようにバージョンが表示されれば成功です。

HTTPサーバー起動とWebページの表示

１．HTTPサーバーの起動

Pythonを使ったHTTPサーバーの起動手順は以下の通りです。
・コマンドプロンプトでサンプルのhtmlファイルを保存しているディレクトリに移動します。
・下記コマンドを実行してサーバーを起動します。（Python 3の場合）：

python -m http.server 8000

　※Python 2の場合：

python -m SimpleHTTPServer 8000

結果、下図赤枠内のように表示されていればサーバーは起動しています。

２．Webページの表示

・ブラウザを起動して下記URLに遷移します。

http://localhost:8000

エラー「SyntaxError: invalid syntax」が発生した場合

Pythonを実行した後に、「python -m http.server 8000」を実行するとSyntaxErrorが発生する場合があります。
この場合は、コマンドプロンプトを再起動してからもう一度コマンドを実行してみてください。

サンプルページの作成

下記ソースで上記のWebページを作成できます。手順確認のサンプルとしてご利用ください。
作成したソースファイルは作業用ディレクトリに保存してください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>サンプルWebページ</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
        }
        header {
            background-color: #4CAF50;
            color: white;
            text-align: center;
            padding: 1em 0;
        }
        main {
            padding: 20px;
            background-color: white;
            margin: 20px auto;
            max-width: 800px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            color: #333;
        }
        p {
            line-height: 1.6;
        }
        footer {
            text-align: center;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            position: fixed;
            width: 100%;
            bottom: 0;
        }
    </style>
</head>
<body>
    <header>
        <h1>サンプルWebページへようこそ</h1>
    </header>
    <main>
        <h1>こんにちは！</h1>
        <p>これはサンプルのWebページです。このページはHTMLとCSSを使って作成されています。</p>
        <p>ローカルホストでホスティングして、このページを表示しています。</p>
        <p>Web開発の基本を学ぶために、このシンプルなページを参考にしてください。</p>
    </main>
    <footer>
        &copy; 2024 サンプルWebページ
    </footer>
</body>
</html>

ランキング参加中

Windows開発者

くらっちのクラウド日記

仕事や勉強で得た Microsoft 365 関連の技術知識を投稿していくブログです。

【Python】簡単にローカルHTTPサーバーを立ち上げてWebページを確認する方法