Nuxt3 で他サービスへのAPIプロキシを設定する方法
2022-11-20 12:29 (1年前)
ytyng
nuxt3 は、 server/api/xxx.ts というファイルを作るとサーバサイド API が簡単につくれるが、 その機能は使わずに、サーバサイドAPIは他の Webフレームワークを使っている場合に、開発環境を簡単に構築するための文書です。
Nuxt3 3.0.0-rc.11 以前では、 nuxt.config.ts の vite.server.proxy を設定すれば良かったのですが、Nuxt3 3.0.0-rc.12 以降ではその 設定が使えなくなっています。
rc.12 以降や正式版では、 nitro.config.ts で devProxy を設定すると、同様に実現できます。
背景
私は、Nuxt のアプリを開発中、Dev サーバで /api/ 以下のパスのリクエストをすべて別サーバ ( Django ) にプロキシしていた。 本番環境は、Kubernetes Ingress で振り分けているため、開発環境のみこのプロキシを使っていた。
これは、 nuxt.config.ts で
export default defineNuxtConfig({
vite: {
server: {
proxy: {
'/api/': {
target: 'https://example.com/',
....
},上記のような設定をすることで実現できる。
Nuxt3 rc.11 では問題無かったが、rc.12 や 3.0.0 正式版にアップデート後、これは動作しなくなっている。
経緯
Github の Discussion でも話題がある。
https://github.com/nuxt/framework/discussions/1223
https://github.com/nuxt/framework/discussions/1223#discussioncomment-2784724
このコメントでもアナウンスのある通り、開発環境を対象とした対応であれば、nitro のプロキシ設定を使えば良い。
設定ファイルが1つ増えるだけで、特に追加パッケージの導入は必要無い。
設定方法
プロジェクトルート ( nuxt.config.ts ) の並びに、 nitro.config.ts を作成する。
nitro.config.ts
import {defineNitroConfig} from 'nitropack'
// https://nitro.unjs.io/config#devproxy
// https://github.com/http-party/node-http-proxy#options
export default defineNitroConfig({
devProxy: {
'/api/': {
target: 'https://api.example.com/api/',
changeOrigin: true,
hostRewrite: true,
cookieDomainRewrite: true,
headers: {
'X-Forwarded-Host': 'localhost:3000',
'X-Forwarded-Proto': 'http'
},
}
}
})その後、開発サーバを再起動する。 これで開発用のプロキシが動く。
検証方法
どのオプションがどのように動作するのか検証するには、手っ取り早いのは nc で開発マシンにサーバを起動してしまう。
nc -l 8000そして、 nitro.config.ts で
export default defineNitroConfig({
devProxy: {
'/api/': {
target: 'http://127.0.0.1:8000',
...このような設定にして動作確認を行う。
リクエスト1つに対してしか応答できないので、使いづらい所はあるが検証としては十分
参考資料
Nitro のドキュメント
- https://nitro.unjs.io/config#devproxy
- https://github.com/http-party/node-http-proxy#options
コメント