僕の個人プロジェクトを加速させたNuxt

## はじめに
2019年は年間通してNuxtにお世話になったのでその感想を書きたかったのですが、感想という感想を書く時間がなくもう11日です。そのため内容はお察しください。

## Nuxt とは何か？

> Nuxt は、Vue の公式ガイドラインに沿って強力なアーキテクチャを提供するように設計されたフレームワークです。一部分から徐々に採用することが可能で、静的なランディングページから複雑な企業向け web アプリケーションの作成に使用できます。
本質的に汎用性があり、さまざまなターゲット（サーバー、サーバーレス、または静的）をサポートし、サーバーサイドのレンダリングは切り替えることができます。
強力なモジュールエコシステムにより拡張可能で、REST や GraphQL エンドポイント、お気に入りの CMS や CSS フレームワークなどさまざまなものに簡単に接続できます。PWA および AMP のサポートは、Nuxt プロジェクトにはないモジュールのみになります。
NuxtJS は Vue.js プロジェクトのバックボーンであり、柔軟でありながら自信を持ってプロジェクトを構築するための構造を提供します。

参考:https://ja.nuxtjs.org/guide/#nuxtjs-%E3%81%A8%E3%81%AF%E4%BD%95%E3%81%8B-

## Nuxtを使ってみて
**さまざまなものに簡単に接続できます。**とNuxtも唱っている通り、とても簡単です。
日本語ドキュメントも充実しているため、Nuxtでの開発は簡単で楽しいものでした（ただStorybookの導入はちょっときつかった記憶、知識的な意味で）。
初めてVueを勉強しようと思った際に、以前はAPIをJavaで作ったりしていましたが言語とプロジェクトあっち行ったりこっち行ったりとをSwitchするのが僕はきつかった印象でした。
そのため中々進捗がなかったのですが、Nuxtで**serverMiddleware**プロパティがあることを知った際に別にJavaで作る必要ないんじゃない？（今更）と思いました。
そこから中々進捗のなかった個人プロジェクトに進捗の兆しが見えはじめました。

## serverMiddlewareとは
> Nuxt は内部で connect のインスタンスを作ります。 それはミドルウェアをスタックに登録したり、 外部サーバーを必要とせず に API などのルートを増やす事を可能にしてくれます。

参考:
https://ja.nuxtjs.org/api/configuration-servermiddleware/#servermiddleware-%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3

サクッというとNuxtだけでViewルート + APIルート作れるというものです。
これでプロジェクトあっち行ったりこっち行ったり問題が解決しました。更にNode + Expressを利用することで言語Switch問題も解決しました。嬉しい。

## serverMiddlewareの導入
Nuxt.config.tsにserverMiddlewareを定義

``` Nuxt.config.ts
 serverMiddleware: [
   'redirect-ssl',
   { path: '/api', handler: '~/api/index.ts' }
 ]
```

Nuxtプロジェクトにapiディレクトリを作成
apiディレクトリにindex.tsを作成

``` api/index.ts
const express = require('express')
 
const app = express()
 
const routes = require('./routes')

app.use(express.urlencoded({ extended: true }))
app.use(express.json())
 
const routeKeys = Object.keys(routes)
routeKeys.forEach((filename) => app.use(routes[filename]))
 
module.exports = {
 path: '/api',
 handler: app
}
```

apiディレクトリにroutesディレクトリを作成
routesディレクトリにindex.tsを作成

``` routes/index.ts
import test from './test'
 
const routes = {
 test,
}
 
module.exports = routes
```

routesディレクトリにtest.tsを作成
'Hello World!'をただ返すだけです。loggerはそのままコピペでは使えないよ☆

``` routes/test.ts
import { Router } from 'express'
import common from '../common'
const router = Router()
 
// APIテスト用
router.get('/test', (req, res) => {
 res.send('Hello World!'),
   common.logger.LogAccessInfo('success: /api/test/')
})
 
export default router
```

localhost:3000の立ち上げ

```
$ yarn run dev
```

PostmanでHello world がget出来るか確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302413/321410bc-28ba-9246-1618-a6aadc95db5a.png)

とりあえずここまでくればあとはいい感じにAPIつくればよいだけです。
DBと繋ぎたいときもあると思います。そんなときは**Nuxt.config.ts**の`env`はServer側でも利用出来るので便利です。（書いてる時思ったけど普通にimportしてるから使えるよね。。。）
僕はこんな感じで使っています。devは勿論Dockerで。

``` docker-compose.yml
version: '3.7'

services:
  db:
    image: mysql:5.6
    container_name: mysql
    environment:
      MYSQL_ROOT_PASSWORD: XXXXXXXX
      MYSQL_USER: XXXXXXXX
      MYSQL_PASSWORD: XXXXXXXX
    volumes:
    - ./sql:/docker-entrypoint-initdb.d
    - ./my.cnf:/etc/mysql/my.cnf
    ports:
    - 3306:3306
```

```
// 使用時
const mysql = {
  dev: {
      host: '0.0.0.0',
      user: 'XXXXXXXX',
      password: 'XXXXXXXX',
      database: 'XXXXXXXX'
  },
  production: {
      host: 'XXXXXXXXX',
      user: 'XXXXXXXXX',
      password: 'XXXXXXXXX',
      port: 3306,
      database: 'XXXXXXXXX'
  }
}
const mysqlConf = process.env.NODE_ENV === 'production' ? mysql.production : mysql.dev

const connection = await mysql.createConnection(mysqlConf)
```

## あとがき
HerokuにもGithub連携して、環境変数設定（Nuxtのドキュメント通り）してとすぐにデプロイまで出来たので何かつくるならこの構成でいいなーって感じです。
しかしHerokuでMySQL使うにはクレジットカードが必須ですが、認証出来なくてそれが1番の難関でした。~~楽◯カードマンめ~~(´・ω・`)
あとMySQL5.6までしか使えなかったのでそれもトラップでしたが無料で使えるのはありがたかったです。
時間こそかかってしまいましたが結構手軽にWebアプリケーションつくれた印象でしたのでオススメしたいです！！！

## 明日は
「North Detail Advent Calendar」 12日目は @k_azm さんです！いえーい :clap: