📝

Nuxt2 で簡単な API を作ってみる

2023/04/14に公開

Nuxt.js とは

Nuxt.js とは、Vue.js ベースの JavaScript のフレームワークで、「ナクスト」と読みます。

公式サイト

Vite(ヴィート)とかもそうですが、読めないですね。

2023 年現在フロントエンドで流行っている Next.js の Vue 版ですね。

今回の記事は少し古いのでは Vue2 ベースの Nuxt2 系でやったときのものです!

今回の結果

GitHub にあげてあるので気になる人はみてください。

ki0i0ro0/nuxt-mysql

流れ

  1. Nuxt でプロジェクトを作成
  2. DB を準備
  3. API を作る
  4. 動かしてみる

という流れになっています。

正直超簡単でした。

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 フォルダ内にファイルを配置します。

それぞれの内容は以下になりますが説明は割愛します。

docker-compose.yml
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
my.cnf
[mysqld]
character-set-server=utf8mb4
collation-server=utf8mb4_unicode_ci

[client]
default-character-set=utf8mb4
001-create-tables.sql
---- 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;
init-database.sh
#!/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 を動かすことができます。

nuxt.config.js
  // APIの設定
  serverMiddleware: ['~/api/'],

次の express と mysql を使ってサンプルデータを取ってきて表示する API を作りたいと思います。

index.js
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