nuxt で axios 使っていると、フロントエンドの通信が、localhost:3000 に向かってしまいうまく動かないということがありました。
調べていくと、BaseURL だったり API_URL だったりを設定すれば良い・・・とのことですが、色々と不都合でした･･･。
作成したアプリケーションは、事前に nuxt build して、静的ファイルとして nginx で配信するつもりなのです。
この時点では配信するURLは決まっていません。Dockerイメージにして、任意のURLで配信できるようにしたいので、ビルド時点で確定することは難しいです。
axios で調べると、ブラウザで動かす分には BaseURL=”/” で動くよ、という情報があったので、試してみたところ、良い感じでした。
SSRの時はこれだとまずいと思うので、SSR利用時は、ブラウザとサーバでBaseURLを変えるようにすれば良いかと思われます。
Dockerビルド時はこちらのように、 API_URLで”/” を指定してビルド･･･（マルチステージビルド）してます。
FROM node:13 as frontend
ADD . /work
WORKDIR /work
ENV API_URL=/
RUN yarn install && yarn buildこれを、次のように公開用のイメージで取り込んだ所･･･
COPY --from=frontend /work/dist /app/publicいい感じに動きました！やったね。
コメント