Nuxt.jsで環境変数が取得できない。

Question

事象

Nuxt.jsで環境ごとの情報を.envから取得するようにしたいため下記のように「process.env.XXXX」でファイルを修正しましたがうまくいきませんでした。

やったこと

１．docker-compose.ymlとnuxt.config.ts下記のようにを修正。
２．そのあと開発環境に下記２ファイルの修正をデプロイ。
３．.envはgit管理から外しているので、サーバー上でviコマンドで.envを下記のように修正。
４．docker再起動。
上記を試してもうまくいきませんでした。（おそらくprocess.env.HOSTNAMEで取得できていない）

気になった事：docker-compose.ymlのenvironmentは.env内の情報を取得してコンテナ内で利用するために記述するキーなのでしょうか？

#nuxt.config.ts

import colors from 'vuetify/es5/util/colors'
export default {

  env: {
    baseUrl: process.env.BASE_URL',   //ここはうまく取得できてる模様
  },
  sitemap: {
    path: '/sitemap.xml',
    hostname: process.env.HOSTNAME,     //sitemapを追記して最終的にhostnameのサイトマップ情報を取得してくる
  }
}

#docker-compose.yml

version: '3'
services:
  nuxt:
    container_name: XXX-nuxt
    build: .
    command: sh -c "npm install && npm run build && npm run start"
    environment:
      BASE_URL: ${BASE_URL}
      HOSTNAME: ${HOSTNAME}       //docker再起動時に.envから取得してくるように記載
    volumes:
      - ./:/app
    ports:
      - "3000:3000"

#.env

BASE_URL=http://AAAAAAA/
HOSTNAME=http://BBBBBBB/　//今回追記

Answer 1

nuxt.config.tsではなくてnuxt.config.jsに変えたらできました。