nuxt.js(フロント)とLaravel(API)を同一リポジトリ/サーバで動かす時

web server

• nuxt.jsは yarn start でデフォルトの3000番でうける
• APIは php artisan serve でデフォルトの8000番でうける
• nginxでプロキシする

nginx.conf

server {
    index index.html;
    server_name sample.com;

    location /api {
        proxy_pass http://localhost:8000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_b
}

Laravelで作るAPIは、デフォルト /api のprefixがつく。
/api だったら8000番へ。それ以外 3000番へ

@nuxtjs/axiosによるAPIコール

apiComponent.vue

const response = this.$axios.$get('/api/users')

この時、@nuxtjs/axiosは自動的にURLを作成して、コールしようとする。
デフォルトは、 http://[HOST]:[PORT][PREFIX]

cf: https://axios.nuxtjs.org/options > baseURL

nginxが localhost:3000 にproxyしているので、このままだとブラウザから http://localhost:3000/api/users がコールされエラーとなる。

@nuxtjs/proxy と axiosの設定

@nuxtjs/proxyを使って、特定のURLパスのときにAPIをプロキシ（実際はプロキシじゃなくてURLの書き換え？）する。

add_package

$ yarn add @nuxtjs/proxy

nuxt.config.js

  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy',
  ],
  axios: {
    baseURL: '/',
  },
  proxy: {
    '/api': 'http://sample.com/',
  },

proxyの設定で /api だったらサーバにリクエストが飛ぶようにする。
サーバサイドではnginxが /api のパスを見て localhost:8000 にプロキシする。

また、@nuxtjs/proxyにおける /api はパスを見てくれるのではなく、どうやらaxiosのbaseURLを見ている様子だった。
axiosの設定で baseURL: '/' の指定も必須っぽい？