Help us understand the problem. What is going on with this article?

SPAモードのNuxt.jsで、外部のAPIを呼び出す

More than 1 year has passed since last update.

前提

既存のGoogle App Engine Python + Angular 1.x + CoffeeScriptのサービスを、Google App Engine Python + Nuxt.jsに置き換えようとしています。

最終的には、Nuxt.jsでbuildした結果を、Google App Engineのstatic_filesとして配信する予定です。
SPAモードを利用し、SSRは利用しません。(GAEでNodeを動かすのが大変そうなので)

今回APIアクセスには、 @nuxtjs/axios を利用しようと思います。標準っぽかったので。

環境・やりたいこと

まず、ローカルで開発時は、本番稼働しているサーバに接続しようと思います。
(今後、ローカルでサーバを実行して、そちらに向けることも想定しています。)

また、GAEではデプロイごとに https://20180610t220204-dot-my-android-server.appspot.com/ といった形のバージョンごとのドメインが作成され、そこで動作確認などを行えます。
デプロイ後は、アクセスしたドメインそれぞれのAPIを利用しようと思います。

表にすると、こんな感じ。

向き先
ローカル https://my-android-server.appspot.com
デプロイ後 js配信と同一のドメイン
https://20180610t220204-dot-my-android-server.appspot.com など

現状調査

@nuxtjs/axios では、 https://github.com/nuxt-community/axios-module/blob/master/lib/module.js#L19 などを見るとわかるように、どうにかしてドメインを考えているようでした。

そのまま動かすと、Nuxt自体を起動している localhost:3000 を見に行ってしまいました。

解決策

@nuxtjs/proxy を利用します。

まずは npm install --save @nuxtjs/proxy でインストール。

https://github.com/nuxt-community/proxy-module#setup を参考に、 nuxt.config.js の modules に追記。

  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],

今回、アクセスするAPIは /api 以下にあるので、そのアクセスを特定のドメインにproxyします。

  proxy: {
    '/api': 'https://my-android-server.appspot.com'
  },

これにより、開発環境で /api 以下は本番のAPIにproxyするようになります。

次に、nuxt buildを実行し、デプロイした際に相対パスで見に行くようにします。
これは、ビルド時の環境変数で与えれば良いらしいです。

そのために、 package.json のスクリプトを変更します。

  "scripts": {
    "build": "API_URL=/ nuxt build",
  },

これにより、buildした際にはドメイン指定無しでアクセスできるようになりました。

今回の修正は https://github.com/noboru-i/kyouen-python/commit/55fc5c7062a4ea6d5ba68b51aec0a021dffd21d0 です。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away