前提
既存の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 です。