next.jsvercelgoogle-translation-api

Linking Google credentials to vercel


I did my best to figure this one out by myself, but I'm totally missing something.

I'm using NextJS 12 and Google Cloud Translate's API to convert a word on a button. Locally it works fine, but once I try to deploy to vercel the permissions/keys gets messed up somewhere.

Locally I have my key.json, which I got from my service account. It's just in my project's root. I have my .env.local file that has references that key file. It looks like this

GOOGLE_APPLICATION_CREDENTIALS=./<projectid&key>.json

But when I try to translate, I get hit with an error. 'Request failed with status code 500'

My translate endpoint looks like this, which I pretty much copied from Google's small tutorial.

import { NextApiRequest, NextApiResponse } from "next";

export default async (req: NextApiRequest, res: NextApiResponse) => {
  const translationClient = new TranslationServiceClient();

  const projectId = <myprojectID>;
  const location = "global";

  async function translateText() {
    const request = {
      parent: `projects/${projectId}/locations/${location}`,
      contents: [req.body.text],
      mimeType: "text/plain",
      sourceLanguageCode: "en",
      targetLanguageCode: "es",
    };

    const [response] = await translationClient.translateText(request);

    res.json(response.translations[0].translatedText);
  }
  translateText();
};

Things I've tried

  1. Putting the JSON as one single environmental variable on vercel. So It was basically GOOGLE_APPLICATION_CREDENTIALS and the key.json file.
  2. Tried putting it all in one line.
  3. Tried taking the keys apart and putting it into a format like this:
GOOGLE_ACCOUNT_TYPE=service_account
GOOGLE_PROJECT_ID=project11111
GOOGLE_PRIVATE_KEY_ID=11111111111111
etc

However I wasn't about to get this method working locally either. 4. Kept the .env.local's path to key.json and just uploaded the key.json itself.

None of these worked and I'm pretty lost.

Resources I've looked at

  1. https://github.com/vercel/vercel/issues/749#issuecomment-715009494
  2. Escaping issue with firebase privateKey as a Heroku config variable
  3. https://daveteu.medium.com/call-google-cloud-function-from-vercel-serverless-hosting-1b1688bb462c

I've tried to apply these to my situation, but I couldn't figure it out. I'd really appreciate any help! Thank you so much.


Solution

  • After looking around for a few days, I found a solution that worked.

    I turned my keys.json into a base64 string using a similar command. https://gist.github.com/tomi/0675e58919af4554b198cee3f84405e5

    Then used the method found here. https://github.com/orgs/vercel/discussions/219

    I put that base64 string into one line in my .env file to check and then did the same for Vercel environmental variables, and it worked.