web-dev-qa-db-ja.com

本番環境で環境変数をnuxtに渡す方法は？

nuxt.config.js

modules: [
    '@nuxtjs/dotenv'
  ],

server/index.js

const express = require('express')
const consola = require('consola')
const { Nuxt, Builder } = require('nuxt')
const app = express()
const Host = process.env.Host || '0.0.0.0'
const port = 8080
app.set('port', port)
// Import and Set Nuxt.js options
let config = require('../nuxt.config.js')
config.dev = !(process.env.NODE_ENV === 'production')

const Storage = require('@google-cloud/storage')
const dotenv = require('dotenv')


async function getEnv() {
  if (config.dev) {
    dotenv.config({ path: '.env' })
    console.log('Environment local .env file loaded.')
    console.log(process.env.LOCALE)

    return
  }

  try {

    const bucketName = 'env-var'

    const dotEnvSourcePath = `.env`
    const dotEnvDestinationPath = `/tmp/${dotEnvSourcePath}`
    const storage = new Storage({})

    await storage
      .bucket(bucketName)
      .file(dotEnvSourcePath)

      .download({ destination: dotEnvDestinationPath })
    console.log(
      `gs://${bucketName}/${dotEnvSourcePath} downloaded to ${dotEnvDestinationPath}.`
    )


    dotenv.config({ path: dotEnvDestinationPath })


  } catch (err) {
    console.error('ERROR:', err)
  }
}

async function afterEnvProcess() {
  // Init Nuxt.js
  const nuxt = new Nuxt(config)

  // Build only in dev mode
  if (config.dev) {
    const builder = new Builder(nuxt)
    await builder.build()
  }

  // Give nuxt middleware to express
  app.use(nuxt.render)

  // Listen the server
  app.listen(port, Host)
  consola.ready({
    message: `Server listening on http://${Host}:${port}`,
    badge: true
  })
  const fs = require('fs')

  const dotEnvExists = fs.existsSync('.env')
}

getEnv()
  .then(r => afterEnvProcess())
  .catch(e => console.log(e))

アプリを本番環境で実行すると、process.env.<variable>の値がundefinedとして取得されます。開発中に実行すると、値が正しく取得されます。 env変数がnuxt envプロパティに渡されていないようです。

編集1：私はコンソール変数の変数をprocess.envでログに記録すると、Google Cloudログに正しい値が表示されます。しかし同時に、これらのコンソールログステートメントはブラウザコンソールで未定義と表示されます

vue.jsnuxt.js
3
Rounak Jain

ほとんどの人はdotenvパッケージを使用しますが、本番環境と開発で異なる追加のファイルを管理する必要があるため、このソリューションは好きではありません。

より簡単な方法：

_//package.json
  "scripts": {
    "dev": "NODE_ENV=dev nuxt"
  }
_
_//nuxt.config.js
  env: {
    baseUrl:
      process.env.NODE_ENV === 'dev'
        ? 'http://localhost:3000'
        : 'https://my-domain.com'
  }
_

これにより、_process.env.baseUrl_を呼び出して正しい値を使用できるようになります。これは、少なくともChromeではconsole.log(process.env.baseUrl)で確認できますが、console.log(process.env)では確認できません。

9
Samuel Faure

ビルド時にバンドルされた環境変数。ですから、本番用に構築しているときにそれらを設定する必要があります

これらは実行時にserver/index.jsで利用できますが、nuxt build distの場合、process.env。*はビルド時に渡された値に置き換えられるため、サーバーを起動するときに何を渡しても問題ありません。変数。

2
Aldarund

UPD。 nuxtServerInitはSPAモードでは呼び出されないため、これはユニバーサルモードでのみ機能します。

環境変数なしでNuxtをプロダクション用に構築できます。そして、それをnuxtServerInitのストアに設定します。

これにはenv-cmdを使用します。

次の内容の.env-cmdrcファイルがあります：

{
  "production": {
    "API_URL": "https://api.example.com/",
    "IMG_URL": "https://img.example.com/",
    "ENV_PATH": "./.cmdrc.json"
  },
  "staging": {
    "API_URL": "https://stage.example.com/",
    "IMG_URL": "https://stage.img.shavuha.com/",
    "ENV_PATH": "./.cmdrc.json"
  },
  "development": {
    "API_URL": "https://stage.api.example.com/",
    "IMG_URL": "https://stage.img.example.com/",
    "ENV_PATH": "./.cmdrc.json"
  }
}

店で私はこのようなものを持っています：

export const state = () => ({
  api_url: '',
  img_url: ''
})

export const mutations = {
  SET_PROCESS_ENV: (state, payload) => {
    state.api_url = payload.api_url
    state.img_url = payload.img_url
  }
}

nuxtServerInitアクション：

  commit('settings/SET_PROCESS_ENV', {
    api_url: process.env.API_URL,
    img_url: process.env.IMG_URL
  })

package.json：

"dev": "env-cmd -e development -r .env-cmdrc nuxt",
"build": "nuxt build",
"start_stage": "env-cmd -e staging -r .env-cmdrc nuxt start",
1
wkornilow

nuxt.config.env Gotcha！

私を含む将来のGoogle社員にとって、nuxt.config.jsが十分に説明しない厄介な落とし穴があります。

process.env.SOMETHINGはビルド中にconfig.env.SOMETHING値

ビルド前

    if (process.env.SOMETHING == 'testing123')

ビルド後

    if ('testing123' == 'testing123')

これもオブジェクトでは機能しません！リテラルのみ。

// This won't work for you!
mounted() {
  console.log('process.env', process.env)
}

https://nuxtjs.org/api/configuration-env/

1
Ben Winding

本番環境でも/server/index.jsからモジュール設定を更新できる関数を作成しました。

これは、配列スタイルのモジュール構成構文でのみ機能するように設計されています。このような

['@nuxtjs/google-gtag', { ... }]

nuxt.config.js

// Import and Set Nuxt.js options
const config = require('../nuxt.config.js')
config.dev = process.env.NODE_ENV !== 'production'

function updateConfigModuleSettings(name, settings) {
  const i = config.modules.findIndex(m => Array.isArray(m) && m[0] === name)
  if (i > -1) {
    const oldSettings = config.modules[i][1]
    config.modules[i][1] = {
      ...oldSettings,
      ...settings
    }
  } else {
    throw new RangeError(`Nuxt module named '${name}' could not be found`)
  }
}

// call the function as many times as you like with your module settings overrides
updateConfigModuleSettings('@nuxtjs/google-gtag', {
  id: process.env.GOOGLE_ANALYTICS_ID,
  debug: process.env.NODE_ENV === 'development', // enable to track in dev mode
})

async function start () {
  // this will take the overridden config
  const nuxt = new Nuxt(config)

  // ...
}
start()
0
Soviut