Xserver VPS：HTML/JSからPHP経由でMySQLを操作したのでメモ

2026/01/29

Docker ComposeとNginx Proxy Managerの設定には幾度となく壁に突き当たりましたが、試行錯誤の末、ようやくPHPからMySQLへ正常に接続できる開発基盤が完成しました。

【Xserver VPS】docker-compose.yml のDBパラメータを編集した際に起きた問題と復旧方法

docker-compose.yml の設定（SQLのパスワードなど）を書き換えた場合、コンテナを再起動するだけでは設定が反映されないことがあります。特にデータベースの初期化情報は最初の起動時に作成されるためです。Dockerを使用した開発環境において、データベースのユーザー名やパスワードを変更する作業は一見単純に思えますが、実際には「データの永続化」や「リバースプロキシ（Nginx Proxy Manager）の仕様」が複雑に絡み合い、単純な設定ファイルの書き換えだけでは解決できない深い迷宮に陥ることがあります。今回は、docker compose ...

今回は、構築した環境上で「テーブル作成」「データ挿入」「データ取得」という一連のDB操作をフロントエンドから実行する機能を実装したので書き留めておきます。

HTML/Javascript: index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>DB操作パネル</title>
    <style>
        body { font-family: sans-serif; margin: 40px; background: #f4f7f6; }
        .panel { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        button { padding: 10px 20px; cursor: pointer; border: none; border-radius: 4px; background: #2196F3; color: white; transition: 0.3s; }
        button:hover { background: #1976D2; }
        #resultLog { background: #333; color: #fff; padding: 10px; border-radius: 4px; margin: 20px 0; min-height: 1.2em; }
        .data-list { margin-top: 20px; border-top: 2px solid #eee; padding-top: 20px; }
        .item { background: #fff; border: 1px solid #ddd; padding: 10px; margin-bottom: 5px; border-radius: 4px; }
    </style>
</head>
<body>

<div class="panel">
    <h1>DB操作パネル (API連携版)</h1>
    
    <div id="resultLog">ボタンを押してください</div>

    <div class="btn-group">
        <button onclick="dbAction('create')">テーブル作成</button>
        <button onclick="dbAction('insert')">データ挿入</button>
        <button onclick="dbAction('select')">データ取得</button>
        <button onclick="dbAction('delete')">データ全削除</button>
    </div>

    <div id="displayArea" class="data-list"></div>
</div>

<script>
async function dbAction(mode) {
    const log = document.getElementById('resultLog');
    const area = document.getElementById('displayArea');
    log.innerText = "処理中...";

    try {
        // FormDataを作成してPHPに送信
        const formData = new FormData();
        formData.append('mode', mode);

        const response = await fetch('api.php', {
            method: 'POST',
            body: formData
        });

        const res = await response.json();
        log.innerText = res.message;

        // データの表示処理
        if (mode === 'select' && res.data) {
            area.innerHTML = '<h2>保存されたデータ</h2>';
            res.data.forEach(item => {
                area.innerHTML += `
                    <div class="item">
                        <strong>ID:</strong> ${item.id} | 
                        <strong>名前:</strong> ${item.name} | 
                        <strong>内容:</strong> ${item.message}
                    </div>`;
            });
        }
    } catch (error) {
        log.innerText = "エラーが発生しました";
        console.error(error);
    }
}
</script>

</body>
</html>

PHP: api.php

<?php
header('Content-Type: application/json; charset=UTF-8');

// --- 接続設定 ---
$host = 'host_name';
$db   = 'db_name';
$user = 'user_name'; 
$pass = 'password';

$dsn = "mysql:host=$host;dbname=$db;charset=utf8mb4";
$options = [
    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
];

try {
    $pdo = new PDO($dsn, $user, $pass, $options);
} catch (\PDOException $e) {
    echo json_encode(['message' => 'DB接続失敗: ' . $e->getMessage()]);
    exit;
}

$mode = $_POST['mode'] ?? '';
$response = ['message' => '不明な操作です', 'data' => []];

if ($mode === 'create') {
    $sql = "CREATE TABLE IF NOT EXISTS test_table (
        id INT AUTO_INCREMENT PRIMARY KEY,
        name VARCHAR(50) NOT NULL,
        message TEXT,
        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;";
    $pdo->exec($sql);
    $response['message'] = "テーブルを作成または確認しました。";

} elseif ($mode === 'insert') {
    $sql = "INSERT INTO test_table (name, message) VALUES (:name, :msg)";
    $stmt = $pdo->prepare($sql);
    $stmt->execute(['name' => 'Satoshi', 'msg' => 'API投稿: ' . date('H:i:s')]);
    $response['message'] = "データを1件挿入しました。";

} elseif ($mode === 'select') {
    $sql = "SELECT * FROM test_table ORDER BY id DESC";
    $stmt = $pdo->query($sql);
    $response['data'] = $stmt->fetchAll();
    $response['message'] = "最新のデータを取得しました。";
} elseif ($mode === 'delete') {
    $sql = "DELETE FROM test_table";
    $stmt = $pdo->query($sql);
    $response['data'] = $stmt->fetchAll();
    $response['message'] = "全データを削除しました。";
}

echo json_encode($response);

実行結果

- Xserver VPS