Docker上で動いているNuxt.js(SSR)にてwatchQueryを導入しfetchやasyncDataでリロード時にエラーが発生

個人的にハマったのでメモ

下記リンクの「DockerとNuxtのSSRでConnectionRefusedが発生する問題の原因を解説する」が
かなり分かりやすく今回参考にさせて頂きました。

症状
Docker上で動いているNuxt.js(SSR)にてwatchQueryを導入しfetchやasyncDataでリロード時に
エラーが発生しデータが取れない現状が発生

原因
fetchやasyncDataはサーバーサイドで動作するみたいで
Docker上ではホスト~コンテナ間通信ではなく
コンテナ~コンテナ間通信になってしまう様だ。

改善方法

サーバー上での実行時と、クライアント上での実行時でURLを変える設定を追加します。

nuxt.config.ts(.js)

axios: {
    baseUrl: Parsed.API_URL,
    browserBaseURL: Parsed.API_URL_BROWSER
  },

.env

ENV=local
API_URL= http://nginx/api
API_URL_BROWSER=http://localhost/api
BASE_URL=http://localhost:3000

docker-compose.yml (これは今回関係ありません 下記の説明の為に記載しているだけです。)

nginx:
    container_name: nginx
    build:
      context: ./nginx
      dockerfile: Dockerfile
    volumes:
      - ./back:/$WORKDIR
    ports:
      - 80:80
      - 3000:3000
    tty: true
    restart: always
    networks:
            aplication_net:
                ipv4_address: 172.19.0.4
    depends_on:
      - front

  front:
    container_name: front
    build:
      context: ./front
      dockerfile: Dockerfile
      args:
        WORKDIR: $FRONTWORKDIR
        CONTAINER_PORT: $CONTAINER_PORT
    environment:
      PORT: '3000'
      HOST: '0.0.0.0'
    expose:
      - 3000
    volumes:
      - ./front:/$WORKDIR
    stdin_open: true
    tty: true
    restart: always
    networks:
            aplication_net:
               ipv4_address: 172.19.0.5
    depends_on:
      - back

  back:
    container_name: back
    build:
      context: ./back
      dockerfile: Dockerfile

自分がハマった部分
nuxt.js側のfrontからapiサーバー側のbackへリクエストを送る為、
最初、http://back/api と勘違いしていましたが、
自分の環境では、　http://nginx/api となります。
理由としては、back側は http://localhost で動作するようになっており
その場合、 http://localhost でアクセスすると nginx -> back
という流れになる為です。

上記設定前にサーバーサイド時にコンテナ間通信が
動作するか確認するには、アクセス元のDockerのコンテナ(今回の場合だとfront)
に入ってコンテナ内から
curl http://コンテナ名:ポート
で通信できるか確認してください。

あと、fetch、asyncDataをリロード時にも動作させるには必ず
watchQueryを設定してください、動きません。

fetchとasyncDataはサーバーサイド側とクライアントサイド両方で動作し
beforeCreate、created、updatedなどはクライアント(ブラウザ上)でのみしか動作しないので
SSRモードで使用する場合は、出来れば、fetchかasyncDataを主に使用した方が良いのかもしれません。

(参考)
DockerとNuxtのSSRでConnectionRefusedが発生する問題の原因を解説する
https://nakka-k.hatenablog.com/entry/2019/10/10/123753

watchQuery プロパティ
https://develop365.gitlab.io/nuxtjs-2.8.X-doc/ja/api/pages-watchquery/

【Nuxt.jsに入門してみた】asyncData()とfetch()について
https://negalog.com/nuxt-js-fetch-data/

Nuxt.jsのasyncDataとfetchの違いについて
https://gerbel.jp/blog/nuxtjs-asyncdata-fetch/