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

いい感じに動きました!やったね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です