rescue => MissingNutrient::VitaminE

Nuxt.js + Amplify + axios(proxy) で気をつけること

May 9, 2020 | 1 minute read

AWS Amplify とは

https://aws.amazon.com/jp/amplify/

AWS が提供しているモバイルアプリやウェブアプリを素早く構築するための、開発プラットフォームです。

私の場合は、Nuxt.js のアプリをこの Amplify 環境にデプロイし、サービス提供をしています。

イメージ的には Netlify のような、GitHub に push するだけで、自動的にビルド＆デプロイが走り、ウェブサイトが配信できるような、そういうプラットフォームです。

Nuxt.js で作ったはずのアプリがうまく動かない

さて、この Amplify を用いて、Nuxt.js 製のアプリを配信しようと試みたとき、少し気をつけないと行けない点があったため、ブログに書いておきます。

前提条件

  • Nuxt.js を利用している
  • API 通信には axios + proxy を利用している
  • AWS Amplify でサービスを配信している

現象

ローカルホストで開発しているときには、問題なく API 通信ができ、動作するサービスが、Amplify にデプロイすると API 通信できなくなっている。

解決

axios + proxy を利用していると、ローカルホストでは API 通信のときにローカル内でプロキシした上で、API 通信してくるのですが、Amplify はそのサービスの性質上、proxy を通すような動作ができません。

これは、Amplify が実際のところ Cloudfront + S3 にデプロイしていることに起因しているのかと思っています。

私がデバックしているときも、/api/some_endopoint というエンドポイントにアクセスしようとしたところ S3 側から /api/some_endpoint/ にリダイレクトされてしまい、うまく最初のエンドポイントを叩きに行けていない。という感じでした。

長くなりましたが、Nuxt 側では以下のような API の設定をしているものとします。

// nuxt.config.js
axios: {},
proxy: {
  '/api/': {
    target: process.env.API_BASE_URL,
    pathRewrite: {
      '^/api/': '/',
    },
  },
}

こちらのプロキシ設定を Amplify 側にも設定していく必要があります。

Amplify 側にはプロキシの設定の代わりに、リダイレクトの設定をしていきます。

https://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/redirects.html

Apmlify console からリダイレクトの設定画面へ行き、上記の API 設定を参考に以下のようなリダイレクト設定を書き加えます。

送信元アドレス ターゲットアドレス 入力 国
/api/<*> https://YOUR_API_HOST/<*> 200(Rewrite)  

結局は Nuxt 側の設定だけでは不十分で Amplify 側にもプロキシ相当の設定を書き加える必要があるようです。

<*> は該当するパスをすべて送信元アドレスからターゲットアドレスへパスするようです。

この設定が必要だとわかるまでだいぶ時間がかかってしまいなかなか辛かった。。ｗ

もし、同じような現象でハマっている方がいたら、参考になることを願っています。

今回は、躓いた話でしたが Amplify では PullRequest のプレビュー表示ができたり、環境構築が爆速に行えたりと、いいことも多いので、またそういった紹介もできればな〜と思っています！

それでは。

Related Posts