エックスサーバーでFlaskをCGIスクリプトとして動作させる名簿管理アプリの構築方法

Pythonの軽量Webフレームワーク「Flask」を使用して、エックスサーバー上で動作する名簿管理アプリを構築します。このアプリは、名簿データのCRUD（作成、読み取り、更新、削除）操作を行うシンプルなアプリケーションです。

構築するアプリケーションの概要

このアプリケーションは以下の機能を提供します：

  1. 名簿の新規作成
    名前、メールアドレス、電話番号を登録します。
  2. 名簿一覧の表示
    登録された名簿データを表形式で表示します。
  3. 名簿の編集
    登録済みのデータを編集できます。
  4. 名簿の削除
    不要なデータを削除できます。

ファイル構成

以下の構成でファイルを準備します：

.
├── public_html/               # ドキュメントルート
│   ├── index.cgi              # Flaskアプリを実行するCGIスクリプト
│   ├── main.py                # Flaskアプリ本体
│   ├── templates/             # HTMLテンプレート
│   │   ├── base.html          # 共通レイアウト
│   │   ├── index.html         # 名簿一覧表示
│   │   ├── create.html        # 名簿新規作成
│   │   └── edit.html          # 名簿編集
│   └── .htaccess              # Apache設定ファイル

Miniconda環境の構築

Minicondaのインストール

エックスサーバーにMinicondaをインストールしてPython環境を構築します。手順の詳細は、以下の記事を参照してください：

Minicondaを使ったPython環境構築手順

Flask環境の準備

Flask用の環境を構築し、必要なパッケージをインストールします。

conda create -n flask_env python=3.10 -y
conda activate flask_env
pip install flask flask-sqlalchemy

アプリケーションの実装

1. Flaskアプリ本体 (main.py)

以下のコードを public_html/main.py に保存します。

from flask import Flask, render_template, request, redirect, url_for
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///members.db'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
db = SQLAlchemy(app)

class Member(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(100), nullable=False)
    email = db.Column(db.String(100), nullable=False)
    phone = db.Column(db.String(20), nullable=True)

with app.app_context():
    db.create_all()

@app.route('/')
def index():
    members = Member.query.all()
    return render_template('index.html', members=members)

@app.route('/create', methods=['GET', 'POST'])
def create():
    if request.method == 'POST':
        name = request.form['name']
        email = request.form['email']
        phone = request.form.get('phone')
        new_member = Member(name=name, email=email, phone=phone)
        db.session.add(new_member)
        db.session.commit()
        return redirect(url_for('index'))
    return render_template('create.html')

@app.route('/edit/<int:id>', methods=['GET', 'POST'])
def edit(id):
    member = Member.query.get_or_404(id)
    if request.method == 'POST':
        member.name = request.form['name']
        member.email = request.form['email']
        member.phone = request.form.get('phone')
        db.session.commit()
        return redirect(url_for('index'))
    return render_template('edit.html', member=member)

@app.route('/delete/<int:id>')
def delete(id):
    member = Member.query.get_or_404(id)
    db.session.delete(member)
    db.session.commit()
    return redirect(url_for('index'))

2. CGIスクリプト (index.cgi)

以下のコードを public_html/index.cgi に保存します。

#!/home/ユーザー名/miniconda3/envs/flask_env/bin/python

from main import app
import os

# CGI ハンドラー
def cgi_handler():
    environ = os.environ
    environ['SCRIPT_NAME'] = '/'
    environ['REQUEST_URI'] = environ.get('REQUEST_URI', '/')

    from wsgiref.handlers import CGIHandler
    CGIHandler().run(app)

if __name__ == '__main__':
    cgi_handler()

3. Apache設定ファイル (.htaccess)

以下の内容を public_html/.htaccess に保存します。

Options +ExecCGI
AddHandler cgi-script .cgi
DirectoryIndex index.cgi

# すべてのリクエストを index.cgi に渡す
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.cgi/$1 [QSA,L]

4. HTMLテンプレート

以下のテンプレートファイルを public_html/templates/ に保存します。

名簿一覧表示 (index.html)

{% extends 'base.html' %}

{% block title %}名簿一覧{% endblock %}

{% block content %}
<h2>名簿一覧</h2>
<table border="1" cellspacing="0" cellpadding="5">
    <thead>
        <tr>
            <th>ID</th>
            <th>名前</th>
            <th>メールアドレス</th>
            <th>電話番号</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        {% for member in members %}
        <tr>
            <td>{{ member.id }}</td>
            <td>{{ member.name }}</td>
            <td>{{ member.email }}</td>
            <td>{{ member.phone or '---' }}</td>
            <td>
                <a href="/edit/{{ member.id }}">編集</a>
                <a href="/delete/{{ member.id }}" onclick="return confirm('本当に削除しますか？')">削除</a>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>
{% if members|length == 0 %}
<p>登録された名簿がありません。</p>
{% endif %}
{% endblock %}

名簿新規作成 (create.html)

{% extends 'base.html' %}

{% block title %}名簿新規作成{% endblock %}

{% block content %}
<h2>名簿新規作成</h2>
<form method="post">
    <label for="name">名前:</label><br>
    <input type="text" id="name" name="name" required><br><br>

    <label for="email">メールアドレス:</label><br>
    <input type="email" id="email" name="email" required><br><br>

    <label for="phone">電話番号:</label><br>
    <input type="text" id="phone" name="phone"><br><br>

    <button type="submit">登録</button>
</form>
{% endblock %}

名簿編集 (edit.html)

{% extends 'base.html' %}

{% block title %}名簿編集{% endblock %}

{% block content %}
<h2>名簿編集</h2>
<form method="post">
    <label for="name">名前:</label><br>
    <input type="text" id="name" name="name" value="{{ member.name }}" required><br><br>

    <label for="email">メールアドレス:</label><br>
    <input type="email" id="email" name="email" value="{{ member.email }}" required><br><br>

    <label for="phone">電話番号:</label><br>
    <input type="text" id="phone" name="phone" value="{{ member.phone }}"><br><br>

    <button type="submit">更新</button>
</form>
{% endblock %}

動作確認

  1. ファイルの配置
  • 上記のファイルをすべて public_html/ にアップロードします。
  1. 権限の設定
  • index.cgi に実行権限を付与します：
    chmod +x public_html/index.cgi
  1. ブラウザで確認
  • ブラウザで http://your-domain.com/ にアクセスし、アプリケーションが正しく動作することを確認します。
  • 名簿一覧画面が表示され、CRUD（作成、読み取り、更新、削除）の操作が正常に動作するか確認してください。

よくあるトラブルと解決方法

  1. 「500 Internal Server Error」が表示される場合:
  • index.cgi に実行権限がない可能性があります。次のコマンドで確認・修正してください：
    chmod +x public_html/index.cgi
  • Pythonのインストールパスが正しいか、スクリプトの1行目（#!/home/ユーザー名/miniconda3/envs/flask_env/bin/python）を確認してください。
  1. データが保存されない場合:
  • members.db ファイルに書き込み権限がない可能性があります。次のコマンドで権限を設定してください：
    chmod 666 public_html/members.db
  1. ページが見つからない場合:
  • .htaccess の設定が正しくない可能性があります。特に RewriteRule 部分を確認してください。

発展的なカスタマイズ

  1. 検索機能の追加
  • 名簿データを名前やメールアドレスで検索できる機能を追加できます。
  1. ページネーション
  • 名簿データが多くなる場合に備えて、ページネーション機能を導入することをおすすめします。
  1. デザインの改善
  • CSSフレームワーク（例: Tailwind CSS, Bootstrap）を使用してUIを向上させることで、アプリケーションをより見やすくできます。

まとめ

この記事では、エックスサーバー上でFlaskをCGIスクリプトとして動作させる方法を解説しました。この構成で名簿管理アプリが動作することを確認したら、次のステップとして機能拡張やUIの改善に取り組んでみてください。

Python環境構築に関して詳しく知りたい方は、Minicondaを使ったPython環境構築手順 をご覧ください。

スポンサーリンク

コメント

タイトルとURLをコピーしました