AWS Amplify部署Next.js应用时Clerk发布密钥缺失求助

在部署依赖ClerkProvider实现认证功能的Next.js应用到AWS Amplify时，已配置NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY环境变量，但仍收到「发布密钥缺失」的错误提示。该应用在Vercel上可正常运行，但在Amplify部署时反复出现此问题。

已执行的操作总结 #

• 环境变量配置：在AWS Amplify控制台的「环境变量」区域添加NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY，确认无空格或拼写错误。
• Amplify构建配置：amplify.yml文件包含环境变量设置，代码如下：

version: 1
applications:
  - appRoot: frontend
    backend:
      phases:
        build:
          commands:
            - echo "NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=${NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}" >> .env
            - npm install
            - npm run build

• 根布局组件：RootLayout中使用环境变量的代码如下：

import { Inter } from "next/font/google";
import Providers from "./providers";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "Grapher",
  description: "Visualize your stocks!",
};

export default function RootLayout({ children }) {
  return (
    <ClerkProvider
      afterSignOutUrl="/"
      publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}
    >
      <html lang="en">
        <body className={inter.className}>
          <Providers>{children}</Providers>
        </body>
      </html>
    </ClerkProvider>
  );
}

• 部署日志：AWS Amplify的CloudWatch部署日志中Clerk相关错误如下：

2024-09-11T16:46:24.465Z
Clerk Trace ID: ${this.clerkTraceId}`),e},
Object.setPrototypeOf(this,e.prototype),this.status=n,this.message=t,this.clerkTraceId=i,this.clerkError=!0,this.errors=function(e=[]){return e.length>0?e.map(tf):[]}(r)}},tm=Object.freeze({InvalidProxyUrlErrorMessage:"The proxyUrl passed to Clerk is invalid. The expected value for proxyUrl is an absolute URL or a relative path with a leading '/'. (key={{url}})",InvalidPublishableKeyErrorMessage:"The publishableKey passed to Clerk is invalid. You can get your Publishable key at https://dashboard.clerk.com/last-active?path=api-keys. (key={{key}})",MissingPublishableKeyErrorMessage:"Missing publishableKey. You can get your key at https://dashboard.clerk.com/last-active?path=api-keys.",MissingSecretKeyErrorMessage:"Missing secretKey. You can get your key at https://dashboard.clerk.com/last-active?path=api-keys.",MissingClerkProvider:"{{source}} can only be used within the <ClerkProvider /> component. Learn more: https://clerk.com/docs/components/clerk-provider"});function tv({packageName:e,customMessages:t}){let r=e,n={...tm,...t};function i(e,t){if(!t)return`${r}: ${e}`;let n=e;for(let r of e.matchAll(/{{([a-zA-Z0-9-_]+)}}/g)){let e=(t[r[1]]||"").toString();n=n.replace(`{{${r[1]}}}`,e)}return`${r}: ${n}`}return{setPackageName({packageName:e}){return"string"==typeof e&&(r=e),this},setMessages({customMessages:e}){return Object.assign(n,e||{}),this},throwInvalidPublishableKeyError(e){throw Error(i(n.InvalidPublishableKeyErrorMessage,e))},throwInvalidProxyUrl(e){throw Error(i(n.InvalidProxyUrlErrorMessage,e))},throwMissingPublishableKeyError(){throw Error(i(n.MissingPublishableKeyErrorMessage))},throwMissingSecretKeyError(){throw Error(i(n.MissingSecretKeyErrorMessage))},throwMissingClerkProviderError(e){throw Error(i(n.MissingClerkProvider,e))},throw(e){throw Error(i(e))}}}var ty=r(353);async function tb(e,t=1,r=5){try{return await e()}catch(i){var n;if(t>=r)throw i;return await (n=2**t*100,new Promise(e=>setTimeout(e,n))),tb(e,t+1,r)}}var tw=e=>"undefined"!=typeof btoa&&"function"==typeof btoa?btoa(e):"undefined"!=typeof global&&global.Buffer?new global.Buffer(e).toString("base64"):e,t_=[".lcl.dev",".lclstage.dev",".lclclerk.com"],tS=[".lcl.dev",".stg.dev",".lclstage.dev",".stgstage.dev",".dev.lclclerk.com",".stg.lclclerk.com",".accounts.lclclerk.com","accountsstage.dev","accounts.dev"],tk=[".lcl.dev","lclstage.dev",".lclclerk.com",".accounts.lclclerk.com"],tx=[".accountsstage.dev"],tT="https://api.clerk.com",tE="pk_live_";function tC(e,t={}){if(!(e=e||"")||!function(e){let t=(e=e||"").startsWith(tE)||e.startsWith("pk_test_"),r=eY(e.split("_")[2]||"").endsWith("$");return t&&r}(e)){if(t.fatal)throw Error("Publishable key not valid.");return null}let r=e.startsWith(tE)?"production":"development",n=eY(e.split("_")[2]);return n=n.slice(0,-1),t.proxyUrl?n=t.proxyUrl:"development"!==r&&t.domain&&(n=`clerk.${t.domain}`),{instanceType:r,frontendApi:n}}function tO(e){return e.startsWith("test_")||e.startsWith("sk_test_")}async function tR(e,t=globalThis.crypto.subtle){let r=new TextEncoder().encode(e);return tw(String.fromCharCode(...new Uint8Array(await t.digest("sha-1",r)))).replace(/\+/gi,"-").replace(/\//gi,"_").substring(0,8)}var tP=(e,t)=>`${e}_${t}`,tI=()=>!1,tN=()=>{try{return!0}catch(e){}return!1},tA=new Set,tM=(e,t,r)=>{let n=tI()||tN(),i=null!=r?r:e;tA.has(i)||n||(tA.add(i),console.warn(`Clerk - DEPRECATION WARNING: "${e}" is deprecated and will be removed in the next major release.

2024-09-11T16:46:24.465Z
Error: @clerk/nextjs: Missing publishableKey. You can get your key at https://dashboard.clerk.com/last-active?path=api-keys.

2024-09-11T16:46:24.465Z
at Object.throwMissingPublishableKeyError (/tmp/app/.next/server/middleware.js:17:161

恳请协助解决该问题！

内容的提问来源于stack exchange，提问作者J3D