nuxt3の本番実行と環境変数について(備忘) #Nuxt

はじめに

Nuxt3を触っていて疑問になった点やそのうち忘れそうだと思ったことを残します
また、使用しているバージョンはRC13です

本番実行方法

package.jsonの中身は下記の前提

{
  // ...中略
  "scripts": {
    "build": "nuxi build",
    "dev": "nuxi dev",
    "preview": "nuxi preview",
    "postinstall": "nuxi prepare"
  },
  // ...以下略
}

まずはビルドします

$ yarn build

実行結果として下記のような内容が出力される

Σ Total size: 5.6 MB (1.23 MB gzip)
✔ You can preview this build using node .output/server/index.mjs                         nitro 04:58:13
✨  Done in 9.46s.

下記で本番実行

$ node .output/server/index.mjs

たぶん、package.jsonに追記すれば使いやすくなる

{
  // ...中略
  "scripts": {
    "build": "nuxi build",
    "dev": "nuxi dev",
    "preview": "nuxi preview",
    "postinstall": "nuxi prepare",
    "start": "node .output/server/index.mjs" // 追加
  },
  // ...以下略
}

$ yarn start

環境変数

開発モードでの実行時は.envやpackage.jsonに記載している内容をprocess.env.*で読み取れるけど、本番モードでは読めないっぽい
なので、nuxt.config.tsでruntimeConfigを設定してあげる必要がある

こんな感じ

package.json

{
  "version": "0.1.0",
  "updated": "2022/11/16"
}

.env

HOGE=wkwkhogehoge

nuxt.config.ts

export default defineNuxtConfig({
  runtimeConfig: {
    HOGE: process.env.HOGE,
    VERSION: process.env.npm_package_version,
    UPDATED: process.env.npm_package_updated,
  },
})

ただ、これだとフロント側では読めないので、フロントで使う環境変数にはpublicをつけてあげる必要がある

nuxt.config.ts

export default defineNuxtConfig({
  runtimeConfig: {
    public: {  // 追加
      HOGE: process.env.HOGE,
    },
    VERSION: process.env.npm_package_version,
    UPDATED: process.env.npm_package_updated,
  },
})

~~だいぶ面倒だね！~~

1個1個書くの面倒だし、下記のような書き方ってできないのかな？（未検証）

nuxt.config.ts

export default defineNuxtConfig({
  runtimeConfig: {
    private: process.env,
  },
})

設定した環境変数をコード側で利用するにはuseRuntimeConfigを使う

page/index.vue

<script lang="ts" setup>
  const $config = useRuntimeConfig()
</script>
<template>
  <div>{{ $config.HOGE }}</div>
</template>
<style scoped></style>

server/api/env.ts

export default defineEventHandler((event) => {
  const $config = useRuntimeConfig()
  return {
    env: $config.HOGE
  }
})

まとめ

本番実行するときはビルド後にnode .output/server/index.mjsで実行できる
環境変数を使うときはruntimeConfigを設定しよう