Next.js、GitHub Actions CI/CD、Google Cloud 构建和运行、Firebase：机密和环境变量问题

Question

我已成功构建 Web 应用并将其部署到 Google Cloud Run 上。我正在尝试发送调用 firebase Cloud Function，但它需要一些配置密钥，我已在存储库的 Secrets 中输入了密钥。 GitHub Actions 确实可以看到密钥，但我也想在我的环境中使用这些密钥。做了一些研究后，我仍然感到困惑。我尝试在浏览器上记录

process.env.KEY_ID

（示例），但它返回未定义，我不确定这是否是预期的结果，因为如果可以通过浏览器轻松记录但云功能 url，那么它就不是秘密未定义，而它应该是我的 Firebase 项目 ID。很感谢任何形式的帮助。谢谢你。

浏览器的控制台日志

从源“my_url_redacted”获取“https://us-central1-undefined.cloudfunctions.net/addData”的访问已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：无“访问-” Control-Allow-Origin'标头存在于所请求的资源上。如果不透明响应满足您的需求，请将请求模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。

POST https://us-central1-undefined.cloudfunctions.net/addData net::ERR_FAILED

google-cloudrun.yml

# .github/workflows/deploy.yml
name: Build with Cloud Build and Deploy to Cloud Run
on:
  push:
    branches:
      - master
env:
  PROJECT_ID: ${{ secrets.GCP_PROJECT_ID }}
  SERVICE: xxx
  RUN_REGION: xxx
  SA_KEY_JSON: ${{ secrets.GCP_SA_CREDS }}
jobs:
  deploy:
    name: Deploy to Cloud Run
    runs-on: ubuntu-latest
    if: contains(github.event.head_commit.message, 'to deploy')
    steps:
      - uses: actions/checkout@v3

      # Setup gcloud CLI
      # - uses: google-github-actions/setup-gcloud@v0
      #   with:
      #     version: "395.0.0"
      #     service_account_key: ${{ secrets.GCP_SA_CREDS }}
      #     project_id: ${{ secrets.GCP_PROJECT_ID }}

      # Google Auth via Credentials JSON
      - name: Google Auth
        id: auth
        uses: 'google-github-actions/auth@v2'
        with: 
          credentials_json: '${{ secrets.GCP_SA_CREDS }}'

      - name: 'Set up Cloud SDK'
        uses: 'google-github-actions/setup-gcloud@v2'

      - name: 'Use gcloud CLI'
        run: 'gcloud info'

      - name: Set Environment Variables
        run: |
          echo NEXT_PUBLIC_FIREBASE_API_KEY='${{ secrets.NEXT_PUBLIC_FIREBASE_API_KEY }}' > .env.local
          echo NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN='${{ secrets.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN }}' >> .env.local
          echo NEXT_PUBLIC_FIREBASE_DATABASE_URL='${{ secrets.NEXT_PUBLIC_FIREBASE_DATABASE_URL }}' >> .env.local
          echo NEXT_PUBLIC_FIREBASE_PROJECT_ID='${{ secrets.NEXT_PUBLIC_FIREBASE_PROJECT_ID }}' >> .env.local
          echo NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET='${{ secrets.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET }}' >> .env.local
          echo NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID='${{ secrets.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID }}' >> .env.local
          echo NEXT_PUBLIC_FIREBASE_APP_ID='${{ secrets.NEXT_PUBLIC_FIREBASE_APP_ID }}' >> .env.local

      # Build and push image to Google Container Registry
      - name: Build
        run: gcloud builds submit --tag gcr.io/$PROJECT_ID/$SERVICE:$GITHUB_SHA

      - name: Deploy
        run: gcloud run deploy $SERVICE --image gcr.io/$PROJECT_ID/$SERVICE:$GITHUB_SHA --platform managed --region $RUN_REGION --allow-unauthenticated

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
    typescript: {
        ignoreBuildErrors: true,
    },
    output: "standalone",
    reactStrictMode: true,
    env: {
        NEXT_PUBLIC_FIREBASE_API_KEY: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
        NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
        NEXT_PUBLIC_FIREBASE_DATABASE_URL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
        NEXT_PUBLIC_FIREBASE_PROJECT_ID: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
        NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
        NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
        NEXT_PUBLIC_FIREBASE_APP_ID: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
    }
}

module.exports = nextConfig

page.tsx

const firebaseConfig = {
    apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
    authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
    databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
    projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
    storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

const app = initializeApp(firebaseConfig);
        const addDataFunction = httpsCallable(getFunctions(app), 'addData');
        addDataFunction({ cloudFunctionData }).then((result) => {
            // Read result of the Cloud Function
            const data: any = result.data;
            const sanitizedMessage = data.text;
            console.log('Result: ', data);
        }).catch((error) => {
            const code = error.code;
            const message = error.message;
            const details = error.details;
            console.log('Code: ', code);
            console.log('Message: ', message);
            console.log('Details: ', details);
            console.log('APP ID: ', firebaseConfig.appId);
        })

Answer 1

事实证明，我只需在 GA 工作流程中将

.env.local

更改为

.env

，就像在生产中一样。

谢谢@DevonRay。