NuxtでAPIサーバー立ててみた

1. NuxtでAPIサーバー立ててみた

2. 結論
● NuxtでAPIサーバーを立てた
● データを取って返すだけの簡単な処理ならこれで良さそう
● Node.jsのベストプラクティスがわからないので実践で使えるかは未知数

3. Nuxtについて
● Vue.jsのフレームワーク
● SPAだけでなくSSR / SSGに対応⇒SEO対策
● Vue RouterやVuexを初めからインストール済み
● create-nuxt-appコマンドで手軽に始められる

4. 気になる点
● アプリマーケットだとLaravel × Nuxt
● 簡単なアプリケーションならNuxtだけでいけるのでは？
● でもフロントエンドで外部APIを叩くとAPI KEYとかが丸見え
● なのでそういった処理はサーバーサイドでやりたい

5. NuxtのserverMiddlewareとは
"Nuxt はカスタムミドルウェアを追加できる connect インスタンスを内部で作ります。これにより外
部サーバーを必要とせずに（通常は /api ルート）を登録できます。”
https://nuxtjs.org/ja/docs/configuration-glossary/configuration-servermiddleware/ から引用
● API用のルーティングを追加できる
● Express等で拡張可能
● SSR前に実行したい処理も追加可能
⇒これを使えばいけるのでは？

6. 実際に使ってみた

7. 実際に使ってみた
● nuxt.config.jsに以下を追記
// Server middleware
serverMiddleware: [
~/api/'
],
● apiディレクトリを作成し、index.jsを作成
const express = require('express')
const axios = require('axios')
const app = express()
app.get('/', (req, res) => {
res.json({
message: 'hoge'
})
})
module.exports = {
path: '/api/',
handler: app
}

8. 実際に使ってみた

9. 実際に使ってみた
app.get('/advice', async (req, res) => {
const advice = await axios.get('https://api.adviceslip.com/advice')
res.json(advice.data)
})
● もちろんaxiosを使って外部APIを叩くことも可能

10. 実際に使ってみた

11. 実際に使ってみた
実際に使う際はコンポーネントからaxiosでAPIを叩く
async asyncData({ $axios }) {
const response = $axios.$get('/api/advice')
console.log(response)
}

12. まとめ
● 簡単にAPIサーバーを構築できた
● 実際には踏み台サーバーとしての用途がメイン？
● Node.jsでのベストプラクティスがわからない為、
実際に使いこなすにはまだまだ勉強が必要