https://darumap.hatenablog.com/entry/2021/12/19/072747

前置き

この記事は異世界行ったら本気だすぴょこりんクラスタ Advent Calendar 2021 - Adventarのために書かれたものです。

前提

もうちょっとパパっとwebアプリケーションを作れるようになりたいので、こういう機会をチャンスとして仕込んでおく。なお私のこの辺の知識はほぼゼロであるので、多分読んでも学びはない気がします...。初歩的な目標として、データベースに入っているデータをバックエンド側で読み込んでフロントエンド側で可視化する、というところをめざす。

とりあえず、なんかそれっぽい感じで

フロントエンド：vue.js（ただし今回ここまでたどりつかなかった・・・）
バックエンド：node.js
データベース：ＭySQL

でやる。

やったこと

MySQLでデータベースを作る
node.jsからMySQLにつなぐ
データベースの中身をレスポンスとして返す

フロントエンド側でリクエスト飛ばしてレスポンスを表示するところが時間切れだった。。とりあえずWSLのubuntu18.04上で動かす。

MySQLでデータベースを作る

MySQLをインストールする。この辺の初期設定はあやしい・・・

sudo apt install mysql-server
sudo mysql_secure_installation
sudo mysql

ユーザを作り、テスト用のテーブルを作る。

CREATE USER 'hayap'@'localhost' IDENTIFIED BY '(PASSWORD)';
#パスワードポリシーがMID以上だと特殊文字を入れてないとはじかれる、厳しい

CREATE DATABASE FOOD;
CREATE TABLE foods (id INT AUTO_INCREMENT, name TEXT, num INT, PRIMARY KEY (id)) DEFAULT CHARSET=utf8;

(データ挿入は略)

mysql> SELECT * FROM foods;
+----+-------+------+
| id | name  | num  |
+----+-------+------+
|  1 | SUSHI |    2 |
|  2 | STEAK |    5 |
+----+-------+------+
2 rows in set (0.00 sec)

node.jsからMySQLにつなぐ

下記のmysqlモジュールをつっこめばつながりそう。
www.npmjs.com

npmでインストール

npm install mysql

test.jsとして作成

const mysql = require('mysql');
const connection = mysql.createConnection({
                                host: 'localhost',
                                user: 'hayap',
                                password: '(PASSWORD)',
                                database: 'FOOD'
                    });

connection.connect();
connection.query('SELECT * FROM foods', (error, results) => {
                console.log(results[0]);
        });
connection.end();

実行

node test.js
RowDataPacket { id: 1, name: 'SUSHI', num: 2 }

でOK.

データベースの中身をレスポンスとして返す

バックエンド側でリクエストを受けて、データベースの中身を返すようにする。
expressモジュールでルーティング処理を書いてやる。server.jsとして作成。

const express = require('express');
const app = express();
const mysql = require('mysql');
const connection = mysql.createConnection({
                                host: 'localhost',
                                user: 'hayap',
                                password: '(PASSWORD)',
                                database: 'FOOD'
                    });

app.get('/test', (req,res) =>
        res.send({message: 'Hello World!'
        })
);

app.get('/api/foods', (req,res) => {
        connection.connect();
        connection.query('SELECT * FROM foods', (error, results) => {
                res.send(results);
        });
        connection.end();
});

app.listen(process.env.PORT || 3000);

これで、node server.jsして、http://localhost:3000/api/foodsにアクセスするとデータベースの中身がかえってくる。

最後に

引き続き頑張ってYATTEIKI。