Blog | ytyng.comhttps://b.ytyng.com/blog/2024-03-29T03:07:47+00:00BlogNuxt3 で他サービスへのAPIプロキシを設定する方法2022-11-20T03:29:57+00:002024-03-27T23:56:41+00:00ytynghttps://b.ytyng.com/blog/author/ytyng/https://b.ytyng.com/blog/nuxt3-how-to-proxy-outside-api-server/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 で
```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
```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 で
```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#optionsnuxt で、async メソッド内の $axios.$get が失敗した時トーストを表示する typescript デコレーター2020-10-07T12:49:56+00:002024-03-29T03:07:47+00:00ytynghttps://b.ytyng.com/blog/author/ytyng/https://b.ytyng.com/blog/nuxt-%E3%81%A7async-%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89%E5%86%85%E3%81%AE-axiosget-%E3%81%8C%E5%A4%B1%E6%95%97%E3%81%97%E3%81%9F%E6%99%82%E3%83%88%E3%83%BC%E3%82%B9%E3%83%88%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B-typescript-%E3%83%87%E3%82%B3%E3%83%AC%E3%83%BC%E3%82%BF%E3%83%BC/<p>nuxt で、async メソッド内の $axios.$get が失敗した時トーストを表示する TypeScript デコレーター</p>
<p></p>
<pre><span>/**<br/></span><span> * async function 用デコレータ<br/></span><span> *<br/></span><span> * メソッドの中で、await $axios.$get... などの処理で axios 通信をする時、<br/></span><span> * 失敗したらエラートーストを表示する<br/></span><span> */<br/></span><span>export function </span><span>axiosErrorToast </span>(_target: Vue, _propertyKey: <span>string</span>, descriptor: <span>PropertyDescriptor</span>) {<br/> <span>const </span><span>method </span>= descriptor.<span>value<br/></span><span> </span>descriptor.<span>value </span>= <span>async function </span>(<span>this</span>: Vue) {<br/> <span>try </span>{<br/> <span>return await </span><span>Reflect</span>.<span>apply</span>(<span>method</span>, <span>this</span>, arguments)<br/> } <span>catch </span>(error) {<br/> <span>if </span>(!error.<span>isAxiosError</span>) {<br/> <span>throw </span>error<br/> }<br/> <span>this</span>.<span>$root</span>.<span>$bvToast</span>.<span>toast</span>(<span>'サーバとの通信でエラーが発生しました'</span>, {<br/> <span>title</span>: <span>'サーバーエラー'</span>,<br/> <span>variant</span>: <span>'danger'</span>,<br/> <span>toaster</span>: <span>'b-toaster-bottom-center'<br/></span><span> </span>})<br/> }<br/> }<br/>}</pre>nuxt axios proxyモードで、プロキシ先のサーバが自己署名証明書を使っている場合、axios config の httpsAgent の注入では対応できない2020-01-02T11:53:39+00:002024-03-22T07:14:02+00:00ytynghttps://b.ytyng.com/blog/author/ytyng/https://b.ytyng.com/blog/nuxt-axios-https-self-signed/<p>2020-01-02 時点での話</p>
<p></p>
<p>nuxt で axios の proxy モードを使っている時、プロキシ先のサーバが自己署名のSSL証明書を使っていたため、接続時に</p>
<p>UNABLE_TO_VERIFY_LEAF_SIGNATURE</p>
<p>のエラーが出ていた。</p>
<p></p>
<p><a href="https://teratail.com/questions/210638">https://teratail.com/questions/210638</a></p>
<p>こちらを参考に、axios の証明書エラーを無視するプラグインを作り、導入しても変わらず。</p>
<p></p>
<p>axios の issue を見てみたら、どうやら未解決の issue のようだ。</p>
<p><a href="https://github.com/axios/axios/issues/1981">https://github.com/axios/axios/issues/1981</a></p>
<p></p>
<p>なので、あきらめて証明書の署名をきちんとする。</p>