Solved

Missing Shopify API Key when app is deployed to AWS Elastic Beanstalk

wristbands
Shopify Partner
20 3 8

I am trying to deploy my Shopify app to AWS Elastic Beanstalk. I'm basically following the Deploy your Shopify web app guide.

 

My app supports an embedded app in the Shopify admin portal, as well as a theme app extension that enables merchants to add an app block to any page (the app block lets customers complete a form that gets submitted to our app).

 

My app works perfectly fine when running locally through ngrok.io. But when I try to deploy to AWS Elastic Beanstalk, it doesn't completely work. The theme app extension works fine, but if you go to the embedded app in the Shopify admin portal, it shows the error:

 

Missing Shopify API Key

Your app is running without the SHOPIFY_API_KEY environment variable. Please ensure that it is set when running or building your React app.

 

However, I have indeed set the SHOPIFY_API_KEY as an environment property of my Elastic Beanstalk instance, but for some reason my Shopify app isn't recognizing it. I set the environment property as described in AWS Elastic Beanstalk Developer Guide - Environment properties and other software settings.

 

Does anyone know how to resolve this issue?

Accepted Solution (1)

wristbands
Shopify Partner
20 3 8

This is an accepted solution.

I reached out to AWS Support, and they were able to help me figure out a solution.

 

Basically the problem is that the environment property set in the Elastic Beanstalk configuration is not available during the docker build process, which is where the app frontend was being built. To ensure the Shopify app has access to the SHOPIFY_API_KEY during the frontend app build process, you need to build the frontend app inside a separate script that you call from the Dockerfile. Specifically, here are the changes that need to be made:

 

Change the contents of your Dockerfile to:

FROM node:18-alpine
RUN echo "Docker Build Starting..."
WORKDIR /app
COPY . /app
RUN chmod +x /app/build-and-serve-app.sh
RUN cd /app/web/frontend && npm install
RUN cd /app/web && npm install
CMD ["sh", "/app/build-and-serve-app.sh"]
EXPOSE 8081
RUN echo "Docker Build Complete."

 

And then create a file called `build-and-serve-app.sh` that you place in the root folder of your Shopify app, and paste the following into the file:

#!/bin/bash
echo "App Build And Serve Script Starting..."
echo "Frontend building..."
pwd
cd /app/web/frontend
pwd
ls -lthra
npm run build
echo "Frontend Build Complete."
echo "Backend Preparing to Serve Requests..."
cd /app/web
pwd
ls -lthra
npm run serve
echo "Backend Now Serving Requests."
echo "App Build And Serve Script Complete."

 

If you make both the changes above and set SHOPIFY_API_KEY as an environment property, and then deploy to AWS Elastic Beanstalk, it should resolve the `Missing Shopify API Key` error.

View solution in original post

Replies 5 (5)

wristbands
Shopify Partner
20 3 8

This is an accepted solution.

I reached out to AWS Support, and they were able to help me figure out a solution.

 

Basically the problem is that the environment property set in the Elastic Beanstalk configuration is not available during the docker build process, which is where the app frontend was being built. To ensure the Shopify app has access to the SHOPIFY_API_KEY during the frontend app build process, you need to build the frontend app inside a separate script that you call from the Dockerfile. Specifically, here are the changes that need to be made:

 

Change the contents of your Dockerfile to:

FROM node:18-alpine
RUN echo "Docker Build Starting..."
WORKDIR /app
COPY . /app
RUN chmod +x /app/build-and-serve-app.sh
RUN cd /app/web/frontend && npm install
RUN cd /app/web && npm install
CMD ["sh", "/app/build-and-serve-app.sh"]
EXPOSE 8081
RUN echo "Docker Build Complete."

 

And then create a file called `build-and-serve-app.sh` that you place in the root folder of your Shopify app, and paste the following into the file:

#!/bin/bash
echo "App Build And Serve Script Starting..."
echo "Frontend building..."
pwd
cd /app/web/frontend
pwd
ls -lthra
npm run build
echo "Frontend Build Complete."
echo "Backend Preparing to Serve Requests..."
cd /app/web
pwd
ls -lthra
npm run serve
echo "Backend Now Serving Requests."
echo "App Build And Serve Script Complete."

 

If you make both the changes above and set SHOPIFY_API_KEY as an environment property, and then deploy to AWS Elastic Beanstalk, it should resolve the `Missing Shopify API Key` error.

TScottJ
Shopify Partner
2 0 8

I has the same problem except with Google Cloud Run. The quick & simple fix for me was to set the API key environment variable in the Dockerfile (ENV SHOPIFY_API_KEY=<key>). This isn't the most secure method, but it works (the secret key is still set only on the GCloud host).

funthread81
Shopify Partner
3 0 0

It's a common trick to solve the problem:

 

Let's clarify why adding a shell script (build-and-serve-app.sh) in the Docker build process is necessary, particularly in the context of making the SHOPIFY_API_KEY available during the build of your frontend.

In Docker, there are two primary phases during the creation and running of a container:

  1. Build Phase: This is when the Docker image is being built. The instructions in the Dockerfile are executed in this phase. Environment variables that are needed during this phase must be explicitly defined or passed in during the build. This is usually done using build arguments (ARG in Dockerfile) or by setting environment variables in the build context.

  2. Run Phase: This is when the Docker container is running. Environment variables can be easily passed into the container at runtime using various methods like Docker's -e or --env-file flags.

The key point here is that environment variables available during the run phase are not automatically available during the build phase. This distinction is crucial when it comes to your scenario:

  • Your frontend build process needs the SHOPIFY_API_KEY.
  • If you try to build your frontend directly in the Dockerfile (during the Docker build phase), you might not have access to the SHOPIFY_API_KEY unless it is explicitly passed as a build argument, which might not be ideal for security reasons.
  • By moving the frontend build process into a shell script (build-and-serve-app.sh) and calling this script in the Dockerfile as a command to be executed during the container's run phase (not the build phase), you ensure that the build process of the frontend has access to all the runtime environment variables, including SHOPIFY_API_KEY.
  • This approach allows you to set the SHOPIFY_API_KEY securely in the runtime environment of the container, rather than having to embed it into the Docker image or pass it insecurely during the build phase.

In summary, the shell script is used to ensure that the frontend build process has access to the necessary environment variables, including SHOPIFY_API_KEY, at runtime rather than at build time. This method is both more secure and aligns better with common practices for handling sensitive keys and configurations in Dockerized environments.

 
 
funthread81
Shopify Partner
3 0 0

For short:

1. Dockerfile is for building image only, the image is buit prior to start a instance on Beanstalk, so there is no env. available

2. The SH script is called when start a instance on beanstalk, where the env is available.

sejalben
Shopify Partner
4 0 0

I am trying to deploy my Shopify node app template(https://github.com/Shopify/shopify-app-template-node) to AWS Elastic Beanstalk.

I am following https://shopify.dev/docs/apps/deployment/web. But in this documentation, there is no proper documentation for How we can deploy the Shopify node app on Elastic Beanstalk.

We require proper documentation for Shopify node app deployment of AWS elastic beanstalk using the docker environment.

Can anyone please help me with this?