Nishil Faldu•6mo ago

AWS Amplify Deployment

Has anyone tried to deploy their app on aws amplify? I am facing this issue for a while now where the app builds fine but gives a 404 when I visit the link. The logs say “clerk secret key missing”. I have put a message in the clerk channel but haven’t really received an answer for it. Sorry to put this here again but I have just been at it for a while now and wanted to know if someone else faced the same issue

21 Replies

Nishil FalduOP•6mo ago

My environment variables does have clerk secret key and I also checked for spelling mistakes

Matt Luo•6mo ago

Vercel has "environment variables" for CLERK_SECRET_KEY. What is the analogous screen for environment variables in Amplify? Can you send a screenshot?

Nishil FalduOP•6mo ago

yes sir on it!

Nishil FalduOP•6mo ago

Nishil FalduOP•6mo ago

They have a 3rd column value on the side but they don't *** or blur it out so I didn't include it here

Matt Luo•6mo ago

Is there a concept in AWS Amplify to "override the build command"? I think this issue is similar to the issue of the host not finding the CONVEX_DEPLOY_KEY Can you send a screenshot of whatever approach you are taking to "override the build command"?

Nishil FalduOP•6mo ago

slightly confused as to what do you mean by override but I think this might help maybe?

version: 1
applications:
  - appRoot: apps/web
    frontend:
      buildPath: /
      phases:
        preBuild:
          commands:
            - yarn install
        build:
          commands:
            # Export environment variables for server-side access
            - env | grep -e NEXT_PUBLIC_ >> .env.production
            - env | grep -e CLERK_ >> .env.production
            - env | grep -e S3_ >> .env.production
            - env | grep -e ACCESS_KEY >> .env.production
            - env | grep -e SECRET_ACCESS_KEY >> .env.production
            - env | grep -e CLOUDFRONT_ >> .env.production
            - cd apps/web
            - yarn build
      artifacts:
        baseDirectory: apps/web/.next
        files:
          - "**/*"
      cache:
        paths:
          - node_modules/**/*
          - apps/web/.next/cache/**/*

version: 1
applications:
  - appRoot: apps/web
    frontend:
      buildPath: /
      phases:
        preBuild:
          commands:
            - yarn install
        build:
          commands:
            # Export environment variables for server-side access
            - env | grep -e NEXT_PUBLIC_ >> .env.production
            - env | grep -e CLERK_ >> .env.production
            - env | grep -e S3_ >> .env.production
            - env | grep -e ACCESS_KEY >> .env.production
            - env | grep -e SECRET_ACCESS_KEY >> .env.production
            - env | grep -e CLOUDFRONT_ >> .env.production
            - cd apps/web
            - yarn build
      artifacts:
        baseDirectory: apps/web/.next
        files:
          - "**/*"
      cache:
        paths:
          - node_modules/**/*
          - apps/web/.next/cache/**/*

thats my amplify.yml file okay I discovered a mistake freak i hope its not that IT WORKS 😭 thanks Matt for looking into it but I was stupid to not change the path of my env file as its a monorepo

Matt Luo•6mo ago

Nice. Btw, I was talking about step 3 here: https://docs.convex.dev/production/hosting/vercel 3. Override the Build command Override the "Build command" to be npx convex deploy --cmd 'npm run build'. If your project lives in a subdirectory of your repository you'll also need to change Root Directory above accordingly.

Using Convex with Vercel | Convex Developer Hub

Host your frontend on Vercel and your backend on Convex.

Matt Luo•6mo ago

Do you do this anywhere in your AWS Amplify setup?

Nishil FalduOP•6mo ago

I didn’t have to do that at all for my setup and it just worked

Matt Luo•6mo ago

Is aws amplify similar to Vercel in that it integrates with a GitHub repo and makes a preview deployment for each branch?

Nishil FalduOP•6mo ago

yep. exactly that

Matt Luo•5mo ago

Hi @Nishil Faldu , I deployed my Convex/Next.js/Clerk app into AWS Amplify, and ran into a 500 internal server error as soon as I went to a URL route that uses Clerk. I wasn't able to find any Convex logs for the event. Maybe I can hunt down this log event by setting up AWS Cloudwatch, but it seems like significant effort. Did you run into a similar 500 error?

Nishil FalduOP•5mo ago

I do remember facing 500 at some point in time but for me the issue was amplify not being able to find my .env file and hence the clerk variables. You already know cloudwatch and as far as I know you shouldn't have to set it up, there should be one setup for you - (click Monitoring) Also there's some weird things with Amplify that I came across during my deployment so I would be more than happy to help if you get some more information through logs

Matt Luo•5mo ago

Thanks, and did you do anything with the build settings? I tried overwriting the default build command: - npm run build with this: npx convex deploy --cmd 'npm run build' That did not change behavior

Matt Luo•5mo ago

Ah, your tip to click Monitoring helped. I hadn't noticed that choice. So, perhaps I am hitting the same error you did. I see this in my log events: 2024-09-30T23:27:51.239Z START RequestId: 78b1f3f2-c0c1-4daf-95bd-b3788a111e40 Version: $LATEST 2024-09-30T23:27:51.253Z Error: Missing Clerk Secret Key or API Key. Go to https://dashboard.clerk.com and get your key for your instance. 2024-09-30T23:27:51.253Z at rC (/tmp/app/.next/server/src/middleware.js:13:65320)

Matt Luo•5mo ago

Did you somehow upload an .env file? I am using AWS Amplify Generation 2 and it seems the environment variables is a GUI:

Matt Luo•5mo ago

Perhaps my issue is that AWS Amplify requires that CLERK_SECRET_KEY be a "secret" and not an environment variable. But simply adding it as en environment variable did not work. Can you share how you set up the build settings (potentially to incorporate the secret)? Maybe I need to do something complicated like this: https://repost.aws/questions/QUm5Wo2gnIRy6p9DS1LuOVEQ/how-to-correctly-include-and-reference-secret-environment-variables-aws-amplify-process-env-secrets

Amazon Web Services, Inc.

How to correctly include and reference secret environment variables...

I have set up an AWS amplify app and imported my github project (a web app using Vue and Supabase as a database). To protect my supabase address and key I stored both values in secret environment ...

Nishil FalduOP•5mo ago

Yeah I also copy pasted all the environment variables one by one - unfortunate here's my build file - amplify.yml

version: 1
applications:
  - appRoot: apps/web
    frontend:
      buildPath: /
      phases:
        preBuild:
          commands:
            - yarn install
        build:
          commands:
            # Export environment variables for server-side access
            - env | grep -e NEXT_PUBLIC_ >> apps/web/.env.production
            - env | grep -e CLERK_ >> apps/web/.env.production
            - env | grep -e S3_ >> apps/web/.env.production
            - env | grep -e ACCESS_KEY >> apps/web/.env.production
            - env | grep -e SECRET_ACCESS_KEY >> apps/web/.env.production
            - env | grep -e CLOUDFRONT_ >> apps/web/.env.production
            - cd apps/web
            - yarn build
      artifacts:
        baseDirectory: apps/web/.next
        files:
          - "**/*"
      cache:
        paths:
          - node_modules/**/*
          - apps/web/.next/cache/**/*

version: 1
applications:
  - appRoot: apps/web
    frontend:
      buildPath: /
      phases:
        preBuild:
          commands:
            - yarn install
        build:
          commands:
            # Export environment variables for server-side access
            - env | grep -e NEXT_PUBLIC_ >> apps/web/.env.production
            - env | grep -e CLERK_ >> apps/web/.env.production
            - env | grep -e S3_ >> apps/web/.env.production
            - env | grep -e ACCESS_KEY >> apps/web/.env.production
            - env | grep -e SECRET_ACCESS_KEY >> apps/web/.env.production
            - env | grep -e CLOUDFRONT_ >> apps/web/.env.production
            - cd apps/web
            - yarn build
      artifacts:
        baseDirectory: apps/web/.next
        files:
          - "**/*"
      cache:
        paths:
          - node_modules/**/*
          - apps/web/.next/cache/**/*

couple of things here: my repo is a monorepo so you won't need appRoot I think and from what I have read that .env vars must be copied in a file during build stage (which is weird but idk what AWS is upto there). Moreover, refer to this as well: https://docs.aws.amazon.com/amplify/latest/userguide/update-app-nextjs-version.html#revert-ssr-migration - for Nextjs 12 or later the platform value must be WEB_COMPUTE and apparently amplify keeps identifying WEB and you might have to make a post request through aws cli to change that For me amplify automatically put CLERK_SECRET_KEY on the secrets page when I added it as one of the env vars. So I guess you should put it in secrets too to check if that works

Matt Luo•5mo ago

To resolve this issue, I had to use the build commands in amplify.yml to grep in each environment variable. I also had to add in the CLERK_SECRET_KEY into the AWS Amplify GUI for environment variables, not just in the GUI for the secrets. This is not intuitive to do because I recall that the docs said to not add secrets as an environment variable. https://docs.aws.amazon.com/amplify/latest/userguide/environment-variables.html

Important Don't use environment variables to store secrets. For a Gen 2 app, use the Secret management feature in the Amplify console.

Using environment variables in an Amplify application - AWS Amplify...

Learn how to use and manage environment variables and secrets for an Amplify application.

Nishil FalduOP•5mo ago

glad you figured it out!

AWS Amplify Deployment

Did you find this page helpful?