问题

以下是翻译好的部分：

"I have a SPA with NextJs that submits a contact form to Google sheet, which works perfectly fine locally and gives me a 500 error in production.
on my .env file I have as following:

NEXT_PUBLIC_GOOGLE_CLIENT_EMAIL=
NEXT_PUBLIC_GOOGLE_PRIVATE_KEY=
NEXT_PUBLIC_GOOGLE_SHEET_ID=

I do have the actual secret on my .env.local file,

and here is my submit.js file

import { google } from 'googleapis'
require('dotenv-flow').config()

export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).send('Only POST requests are allowed!')
  }
  // log to see the secret which are visible in local
  console.log('process.env', process.env)
  console.log(
    'email process with error ',
    process.env.NEXT_PUBLIC_GOOGLE_CLIENT_EMAIL
  )
  const body = req.body

  try {
    const auth = new google.auth.GoogleAuth({
      credentials: {
        client_email: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_EMAIL,
        private_key: process.env.NEXT_PUBLIC_GOOGLE_PRIVATE_KEY?.replace(
          /\n/g,
          '\n'
        ),
      },
      scopes: [
        'https://www.googleapis.com/auth/drive',
        'https://www.googleapis.com/auth/drive.file',
        'https://www.googleapis.com/auth/spreadsheets',
      ],
    })
    const sheets = google.sheets({
      auth,
      version: 'v4',
    })

    const submittedAt = new Date().toUTCString()

    const response = await sheets.spreadsheets.values.append({
      spreadsheetId: process.env.NEXT_PUBLIC_GOOGLE_SHEET_ID,
      range: 'A1:F1',
      valueInputOption: 'USER_ENTERED',
      requestBody: {
        values: [
          [
            body.name,
            body.company,
            body.product,
            body.email,
            body.phone,
            submittedAt,
          ],
        ],
      },
    })

    return res.status(201).json({
      data: response.data,
    })
  } catch (error) {
    console.log(
      'email process with error ',
      process.env.NEXT_PUBLIC_GOOGLE_CLIENT_EMAIL
    )
    // the log for this error is down below
    console.log('error.code', error)
    return res.status(error.code).send({ message: error.message })
  }
}

error.code Error: The incoming JSON object does not contain a client_email field error.code Error: The incoming JSON object does not contain a client_email field

Ps, the secrets are injected with aws and are visible in the cloud watch log.

question1, Do I need to have these secrets in my Dockerfile?
question2, can it be CSP related? ( which hasn't been implemented)

** Update
I tried setting the key in dockerfile which didn't work
also tried to add CSP with class component to _document.js/ or by adding next config which didn't work as well

** update
On the production/development environment, I cannot read the values although it's been injected from the vault"

请注意，代码部分未进行翻译，只提供了文本内容的翻译。

NEXT_PUBLIC_GOOGLE_CLIENT_EMAIL=
NEXT_PUBLIC_GOOGLE_PRIVATE_KEY=
NEXT_PUBLIC_GOOGLE_SHEET_ID=

import { google } from 'googleapis'
require('dotenv-flow').config()
export default async function handler(req, res) {
if (req.method !== 'POST') {
return res.status(405).send('Only POST requests are allowed!')
}
// log to see the secret which are visible in local  
console.log('process.env', process.env)
console.log(
'email process with error ',
process.env.NEXT_PUBLIC_GOOGLE_CLIENT_EMAIL
)
const body = req.body
try {
const auth = new google.auth.GoogleAuth({
credentials: {
client_email: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_EMAIL,
private_key: process.env.NEXT_PUBLIC_GOOGLE_PRIVATE_KEY?.replace(
/\\n/g,
'\n'
),
},
scopes: [
'https://www.googleapis.com/auth/drive',
'https://www.googleapis.com/auth/drive.file',
'https://www.googleapis.com/auth/spreadsheets',
],
})
const sheets = google.sheets({
auth,
version: 'v4',
})
const submittedAt = new Date().toUTCString()
const response = await sheets.spreadsheets.values.append({
spreadsheetId: process.env.NEXT_PUBLIC_GOOGLE_SHEET_ID,
range: 'A1:F1',
valueInputOption: 'USER_ENTERED',
requestBody: {
values: [
[
body.name,
body.company,
body.product,
body.email,
body.phone,
submittedAt,
],
],
},
})
return res.status(201).json({
data: response.data,
})
} catch (error) {
console.log(
'email process with error ',
process.env.NEXT_PUBLIC_GOOGLE_CLIENT_EMAIL
)
// the log fo r this error is down below
console.log('error.code', error)
return res.status(error.code).send({ message: error.message })
}
}

答案1

得分: 0

我发现 NEXT_PUBLIC_ 不应该在这里使用，删除它们后，它开始正常工作。但仍然有另一个需要使用前缀的秘密（GTM），但未加载。

更新和解决方案

事实证明，我需要调用 server.js 并请求 env 变量。server.js 大致如下：

export default function handler(req, res) {
  const publicEnv = Object.keys(process.env)
    .filter((key) => key.startsWith('NEXT_PUBLIC'))
    .reduce((acc, key) => {
      acc[key] = process.env[key]
      return acc
    }, {})

  res.status(200).json(publicEnv)
}

export default function handler(req, res) {
const publicEnv = Object.keys(process.env)
.filter((key) => key.startsWith('NEXT_PUBLIC'))
.reduce((acc, key) => {
acc[key] = process.env[key]
return acc
}, {})
res.status(200).json(publicEnv)
}