Nuxt2 で簡単な API を作ってみる
Nuxt.js とは
Nuxt.js とは、Vue.js ベースの JavaScript のフレームワークで、「ナクスト」と読みます。
Vite(ヴィート)とかもそうですが、読めないですね。
2023 年現在フロントエンドで流行っている Next.js の Vue 版ですね。
今回の記事は少し古いのでは Vue2 ベースの Nuxt2 系でやったときのものです！
今回の結果
GitHub にあげてあるので気になる人はみてください。
流れ
- Nuxt でプロジェクトを作成
- DB を準備
- API を作る
- 動かしてみる
という流れになっています。
正直超簡単でした。
Nuxt でプロジェクトを作成
さてではいつも通りプロジェクトを init していきたいと思います。
npx create-nuxt-app nuxt-mysql
僕の選択結果は以下の様なかんじです。
create-nuxt-app v4.0.0
Generating Nuxt.js project in nuxt-mysql
? Project name: nuxt-mysql
? Programming language: JavaScript
? Package manager: Npm
? UI framework: None
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? What is your GitHub username? ki0i0ro0
? Version control system: Git
これでベースのプロジェクトが完成します。
Successfully created project nuxt-mysql
To get started:
cd nuxt-mysql
npm run dev
To build & start for production:
cd nuxt-mysql
npm run build
npm run start
という感じ書かれている通り以下の実行します。
cd nuxt-mysql
npm run dev
╭───────────────────────────────────────╮
│ │
│ Nuxt @ v2.15.8 │
│ │
│ ▸ Environment: development │
│ ▸ Rendering: server-side │
│ ▸ Target: server │
│ │
│ Listening: http://localhost:3000/ │
│ │
╰───────────────────────────────────────╯
i Preparing project for development 19:57:00
i Initial build may take a while 19:57:00
i Discovered Components: .nuxt/components/readme.md 19:57:00
√ Builder initialized 19:57:00
√ Nuxt files generated 19:57:00
√ Client
Compiled successfully in 10.74s
√ Server
Compiled successfully in 8.82s
i Waiting for file changes 19:57:14
i Memory usage: 270 MB (RSS: 457 MB) 19:57:14
i Listening on: http://localhost:3000/ 19:57:14
No issues found. 19:57:14
今回は Nuxt で簡易 API を作りたかったので SSR を選択しています。
そのため Server も立ち上がっています。
DB を準備
今回 DB からデータを取ってきたいので DB を Docker でサクッと準備したいと思います。
フォルダ構成はこんな感じです。
docker-compose.yml をプロジェクト TOP に置きます。
docker フォルダ内にファイルを配置します。
それぞれの内容は以下になりますが説明は割愛します。
version: "3"
services:
# MySQL
db:
image: mysql:5.7
container_name: mysql_host
environment:
MYSQL_ROOT_PASSWORD: root
MYSQL_DATABASE: test_database
MYSQL_USER: docker
MYSQL_PASSWORD: docker
TZ: "Asia/Tokyo"
command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
volumes:
- ./docker/db/data:/var/lib/mysql
- ./docker/db/my.cnf:/etc/mysql/conf.d/my.cnf
- ./docker/db/sql:/docker-entrypoint-initdb.d
ports:
- 3306:3306
# phpMyAdmin
phpmyadmin:
container_name: test_phpmyadmin
image: phpmyadmin/phpmyadmin
environment:
- PMA_ARBITRARY=1
- PMA_HOSTS=mysql_host
- PMA_USER=root
- PMA_PASSWORD=root
ports:
- 8080:80
[mysqld]
character-set-server=utf8mb4
collation-server=utf8mb4_unicode_ci
[client]
default-character-set=utf8mb4
---- drop ----
DROP TABLE IF EXISTS `test_table`;
---- create ----
create table IF not exists `test_table`
(
`id` INT(20) AUTO_INCREMENT,
`name` VARCHAR(20) NOT NULL,
`created_at` Datetime DEFAULT NULL,
`updated_at` Datetime DEFAULT NULL,
PRIMARY KEY (`id`)
) DEFAULT CHARSET=utf8 COLLATE=utf8_bin;
#!/usr/bin/env bash
mysql -u docker -pdocker test_database < "/docker-entrypoint-initdb.d/001-create-tables.sql"
全部設定したらdocker-compose up -dで Docker を起動して、localhost:8080 からサンプルデータを何かしら登録しておいてください。
次の章で使います。
API を作る
さてでは今回のメインディッシュですね。
DB にアクセスするバックグラウンド用の API を作っていきたいと思います。
nuxt.config.js に以下を追記します。
これにより Server 側の Node.js 上で API を動かすことができます。
// APIの設定
serverMiddleware: ['~/api/'],
次の express と mysql を使ってサンプルデータを取ってきて表示する API を作りたいと思います。
import express from "express";
import { createConnection } from "mysql";
const app = express();
const connection = createConnection({
// 以下、各自のMySQLへの接続情報を書く
host: "localhost",
user: "docker",
password: "docker",
database: "test_database",
});
app.get("/", function (_req, res) {
res.set({ "Access-Control-Allow-Origin": "*" }); // この記載により、※1：CORSを許可する
connection.query("select * from test_table", function (error, results) {
if (error) throw error; // エラー処理
res.send(results[0]); // results[0]により、一番目のデータを返答する
});
});
app.listen(5000, function () {
// port 5000をlistenする
console.log("Example app listening on port 5000!"); // console.logによりファイル実行時にコンソールに文字表示させる
});
はい、これで localhost:5000 にアクセスすると値が取れる API が完成しました。
最後に
今回はフレームワークの Nuxt.js を使って DB からデータを取っきて表示する API を作りました。
API 作る為のものではないのですが簡易な API なら簡単に作れますね。
あまり複雑ではないバックエンドのシステムならこれでサクッと作ってしまってもいいような気もします。
Discussion