Quantcast
Channel: Node.jsタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8703

Nuxt.jsのサーバフレームワークをKoa.jsに変更する

$
0
0

選択できなくなっていたサーバフレームワーク

Nuxt.jsインストール時にはExpressやKoa.jsなどのサーバサイドフレームワークを選択できていたと思うんだけど、最近のバージョンだとそれができなくなっていたので、フレームワークをKoa.jsに変更する方法を記載する。Expressでも同じかと。

デフォルトでは "connect"

https://ja.nuxtjs.org/api/configuration-servermiddleware
で次のように記載されているように、デフォルトではconnectが適用されるらしい。

Nuxt は内部で connect のインスタンスを作ります。
それはミドルウェアをスタックに登録したり、 外部サーバーを
必要とせず に API などのルートを増やす事を可能にしてくれます。
connect 自体はミドルウェアで、登録されたミドルウェアは
nuxt start と express-template のようなプログラム的な
使用法を持つミドルウェアとして使用されます。

connectのままでもいいんだろうけども、自分的にはKoa.jsの方が使い慣れてるし、今はまだKoa.jsの方が広く受け入れられてると思う。

手順

1. Nuxt.js、Koa.jsインストール

npx create-nuxt-app app
cd app
npm i koa

2. server/index.js 作成

アプリフォルダ直下にserverフォルダを作成し、その配下にindex.jsを作成する。

index.jsはKoa.jsのページにある"Hello World"のサンプルにexport defaultを追加。
あとは煮るなり焼くなり。

index.js
constKoa=require('koa')constapp=newKoa()app.use((ctx)=>{ctx.body='Hello World'})exportdefault{path:'/api',handler:app.callback()}

3. nuxt.config.js 編集

serverMiddleware: ['~~/server/'] を追加する。

nuxt.config.js
importcolorsfrom'vuetify/es5/util/colors'exportdefault{serverMiddleware:['~~/server/'],

以上で完了。/apiにアクセスするとKoa.jsが動く。
screen02.png


Viewing all articles
Browse latest Browse all 8703

Trending Articles