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

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

下記リンクの「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/