VueプロジェクトでVPS上のMySQLからデータを取得するためには、以下の手順と必要なツール、チェックリストを確認しながら進めるとスムーズです。ここでは、フロントエンドのVueとバックエンドをNode.jsやExpressを使って構成し、VPSのMySQLデータベースからデータを取得する方法を説明します。

必要なもの

1. Vueプロジェクト（フロントエンド）

2. VPSサーバー（Ubuntu）

3. MySQL（VPS上にインストール）

4. Node.jsとExpress（バックエンドAPIとして）

5. MySQLドライバ（バックエンドでMySQLに接続するため）

6. NginxまたはApache（VPSでリバースプロキシの設定）

7. セキュリティ設定（SSH、MySQLアクセス制限、ファイアウォール設定）

手順

1. VPS上にMySQLのセットアップ

• MySQLをUbuntuにインストールし、必要なデータベースとテーブルを作成します。

  1. bash　sudo apt update
     sudo apt install mysql-server

• MySQLの設定（リモートアクセスが必要な場合は設定を変更）

  • /etc/mysql/mysql.conf.d/mysqld.cnf の bind-address を 0.0.0.0 に変更することで、外部からのアクセスを許可します。

• MySQLユーザーの作成とリモートアクセス許可

  1. sql　CREATE USER 'username'@'%' IDENTIFIED BY 'password';
     GRANT ALL PRIVILEGES ON database_name.* TO 'username'@'%';
     FLUSH PRIVILEGES;

2. VPSにNode.jsとExpressをセットアップ

• Node.jsとExpressをVPSにインストールし、MySQLに接続するためのAPIを作成します。

  1. bash　sudo apt install nodejs
     sudo apt install npm

• ExpressでバックエンドAPIを作成し、MySQLに接続する。

  1. javascript　

3. フロントエンド(Vue)でAPIを呼び出す

• Vueプロジェクトで、作成したAPIを使ってデータを取得します。

  1. javascript　const express = require('express');
     const mysql = require('mysql2');
     const cors = require('cors');
     const app = express();

app.use(cors());

const db = mysql.createConnection({
host: 'your_vps_ip_address', // または 'localhost' （ローカルアクセスのみの場合）
user: 'username',
password: 'password',
database: 'database_name'
});

db.connect(err => {
if (err) {
console.error('Database connection failed: ' + err.stack);
return;
}
console.log('Connected to database.');
});

app.get('/api/data', (req, res) => {
db.query('SELECT * FROM your_table', (error, results) => {
if (error) {
return res.status(500).json({ error });
}
res.json(results);
});
});

app.listen(3000, () => {
console.log('Server is running on port 3000');
});

<template>
<div>
<h1>MySQL Data</h1>
<ul>
<li v-for="item in data" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>

<script>
export default {
data() {
return {
data: []
};
},
mounted() {
fetch('http://your_vps_ip_address:3000/api/data')
.then(response => response.json())
.then(data => {
this.data = data;
})
.catch(error => {
console.error('Error fetching data:', error);
});
}
};
</script>