はじめに

今回はNuxt.jsとExpressの環境をDockerで作成した記事です。

環境

今回は、Nuxt.jsにTypeScriptを導入し、Composition-APIの書き方を採用します。
また、バックエンドにはORMとしてPrismaを採用します。

Prismaの導入に関してものすごく手間取りました。
Qiitaで質問にお答えいただいた2名の方に感謝申し上げます。

Dockerfile

MySQL (5.7)
Node.js （【Express】14.15.3-alpine）
Node.js （【Nuxt.js】14.15.3-alpine）

Frontend

採用する技術は以下の通りです。

Nuxt.js
TypeScript
Vue3.0（Composition-API）

Composition-APIに関して全く知識がない方は以下の記事をご覧ください。

Backend

採用する技術は以下の通りです。

Express
TypeScript
Prisma

Github

コードはこちらです。

READMEに環境構築の方法を書いてますが、Qiitaにまとめてみます。

それでは環境を作りましょう〜！

①クローンしてディレクトリを移動する

ターミナル

$ git clone git@github.com:ssk9597/Docker-Nuxt-TypeScript-Express-Prisma.git

$ cd Docker-Nuxt-TypeScript-Express-Prisma

②作成するテーブルを記載する

api/prisma/schema.prismaに現在デフォルトで以下が記載されています。

api/prisma/schema.prisma

model User {
  id    Int    @id @default(autoincrement())
  name  String
  email String @unique
}

上記の意味は、以下の通りです
①Userテーブルを作成
②カラムは3つ
③idというカラムは数値型で、オートインクリメントになっている
④nameというカラムは文字列型になっている
⑤emailというカラムは文字列型でユニークになっている

リレーションなどもできるので詳しくは公式サイトを確認しましょう。

③`make nuxt`を実行して、`Nuxt.js`の作成とDockerの起動を行う

Nuxt.jsの作成では、必ずTypeScriptを選択してください。

ターミナル

$ make nuxt

> npx create-nuxt-app frontend

create-nuxt-app v3.6.0
✨  Generating Nuxt.js project in frontend
? Project name: nuxt-typescript
? Programming language: TypeScript
? Package manager: Npm
? UI framework: None
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? 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? XXXXX
? Version control system: Git

④`nuxt.config.js`と`.env`を修正する

`nuxt.config.js`

frontend/nuxt.config.js

require('dotenv').config();
const { API_URL, API_URL_BROWSER } = process.env;

export default {
  head: {
    title: 'frontend',
    htmlAttrs: {
      lang: 'ja',
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },

  css: [],

  plugins: [],

  components: true,

  buildModules: ['@nuxt/typescript-build'],

  watchers: {
    webpack: {
      poll: true,
    },
  },

  modules: ['@nuxtjs/axios', '@nuxtjs/proxy', '@nuxtjs/dotenv'],

  env: {
    API_URL,
    API_URL_BROWSER,
  },

  proxy: {
    '/api': process.env.API_URL,
  },

  axios: {
    baseURL: process.env.API_URL,
    browserBaseURL: process.env.API_URL_BROWSER,
  },

  build: {},
};

`.env`

frontend/.env

API_URL = "http://app:18080"
API_URL_BROWSER = "http://localhost:18080"

⑤`make migrate`で`Prisma`のマイグレーションを行う

ターミナル

$ make migrate

こちらの実行でマイグレーションとGUIでデータベース上のデータを閲覧・編集できるPrisma studioが使用できるようになります。

これがめちゃんこ便利です！

⑥`make typescript`でTypeScriptを導入する

まずはターミナルで必要なパッケージをインストールしましょう。

ターミナル

$ make typescript

次に必要なファイルに追記を行います。

shims-vue.d.ts

frontend/shims-vue.d.ts

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

tsconfig.json

frontend/tsconfig.json

{
  "compilerOptions": {
    "target": "ES2018",
    "module": "ESNext",
    "moduleResolution": "Node",
    "lib": ["ESNext", "ESNext.AsyncIterable", "DOM"],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "experimentalDecorators": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./*"]
    },
    "types": ["@nuxt/types", "@types/node"]
  },
  "files": ["shims-vue.d.ts"],
  "include": [
    "components/**/*.ts",
    "components/**/*.vue",
    "layouts/**/*.ts",
    "layouts/**/*.vue",
    "pages/**/*.ts",
    "pages/**/*.vue"
  ],
  "exclude": ["node_modules", ".nuxt", "dist"]
}

これでTypeScriptが使えます。

⑦`make composition-api`でComposition-APIを導入する

まずはターミナルで必要なパッケージをインストールしましょう。

ターミナル

$ make composition-api

次に必要なファイルに追記を行います。

nuxt.config.js

frontend/nuxt.config.js

require('dotenv').config();
const { API_URL, API_URL_BROWSER } = process.env;

export default {
  head: {
    title: 'frontend',
    htmlAttrs: {
      lang: 'ja',
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },

  css: [],

  plugins: [],

  components: true,

  buildModules: ['@nuxt/typescript-build', '@nuxtjs/composition-api/module'],

  generate: {
    interval: 2000,
  },

  watchers: {
    webpack: {
      poll: true,
    },
  },

  modules: ['@nuxtjs/axios', '@nuxtjs/proxy', '@nuxtjs/dotenv'],

  env: {
    API_URL,
    API_URL_BROWSER,
  },

  proxy: {
    '/api': process.env.API_URL,
  },

  axios: {
    baseURL: process.env.API_URL,
    browserBaseURL: process.env.API_URL_BROWSER,
  },

  build: {},
};

⑧`pages/index.vue`を修正してバックエンドとの通信を図る

では、バックエンドとの通信ができているか確認しましょう。

frontend/pages/index.vue

<template>
  <div>
    <h1>
      {{ data }}
    </h1>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, useAsync, useContext } from '@nuxtjs/composition-api';
import axios from '@nuxtjs/axios';

export default defineComponent({
  setup() {
    const data = ref({});
    const { $axios } = useContext();
    useAsync(async () => {
      const result = await $axios.$get('/api');
      data.value = result;
    });
    return { data };
  },
});
</script>

このように表示されていれば問題なく通信ができています！

また、Prismaのクエリに関してはこちらを確認してください。
基本のCRUDに関してはまとめてあるのでこれを使いこなせれば問題ないと思います。

ここからは任意です

UI開発用ツールのStorybookを使いたい方は以下も行うようにしましょう。

ちなみに、Storybookが何か分からない方は以下の記事を確認されてください。

コマンド1つでStorybookが実行できます。

ターミナル

$ make storybook

// 再起動したいとき
$ make re-storybook

終わりに

ここまでできればNuxt.jsとExpressの環境構築はばっちりです👍
あとは作りたいものを作っていきましょう！