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

Retired Boards Appdev Extensions
1

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?

2

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.

3

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=). This isn’t the most secure method, but it works (the secret key is still set only on the GCloud host).

4

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.

5

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.

6

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?

7

Hello

I am getting different errors for this. When I run my container on AWS ECS , I get the following error:

timestamp,message
1717474651832,App Build And Serve Script Starting...
1717474651832,Frontend building...
1717474651832,/app
1717474651832,/app/web/frontend
1717474651833,total 56K    
1717474651833,'"-rw-r--r--    1 root     root        1.4K May 21 16:00 vite.config.js"
1717474651833,'"-rw-r--r--    1 root     root         272 May 21 16:00 translation.yml"
1717474651833,'"-rw-r--r--    1 root     root          77 May 21 16:00 shopify.web.toml"
1717474651833,'"-rw-r--r--    1 root     root        1.2K May 21 16:00 package.json"
1717474651833,'"-rw-r--r--    1 root     root         309 May 21 16:00 index.jsx"
1717474651833,'"-rw-r--r--    1 root     root        1.0K May 21 16:00 index.html"
1717474651833,'"-rw-r--r--    1 root     root         224 May 21 16:00 dev_embed.js"
1717474651833,'"-rw-r--r--    1 root     root        2.1K May 21 16:00 Routes.jsx"
1717474651833,'"-rw-r--r--    1 root     root         810 May 21 16:00 README.md"
1717474651833,'"-rw-r--r--    1 root     root        1.6K May 21 16:00 App.jsx"
1717474651833,'"-rw-r--r--    1 root     root         368 May 21 16:00 .gitignore"
1717474651833,'"-rw-r--r--    1 root     root          69 May 21 16:00 .git-blame-ignore-revs"
1717474651833,drwxr-xr-x    2 root     root          26 May 21 16:00 utils
1717474651833,drwxr-xr-x    2 root     root          76 May 21 16:00 hooks
1717474651833,drwxr-xr-x    2 root     root         112 May 21 16:00 assets
1717474651833,drwxr-xr-x    2 root     root          51 May 21 16:00 locales
1717474651833,'"-rw-r--r--    1 root     root        2.7K Jun  4 04:09 index.css"
1717474651833,drwxr-xr-x    2 root     root         162 Jun  4 04:10 pages
1717474651833,drwxr-xr-x    6 root     root         138 Jun  4 04:10 components
1717474651833,drwxr-xr-x    4 root     root         178 Jun  4 04:10 ..
1717474651833,drwxr-xr-x    8 root     root        4.0K Jun  4 04:10 .
1717474652444,> shopify-frontend-template-react@1.0.0 build
1717474652444,> vite build
1717474652458,sh: vite: not found
1717474652469,npm error Lifecycle script `build` failed with error:
1717474652470,npm error code 127
1717474652470,npm error path /app/web/frontend
1717474652470,npm error workspace shopify-frontend-template-react@1.0.0
1717474652470,npm error location /app/web/frontend
1717474652470,npm error command failed
1717474652470,npm error command sh -c vite build
1717474652483,Frontend Build Complete.
1717474652483,Backend Preparing to Serve Requests...
1717474652483,/app/web
1717474652484,total 36K    
1717474652484,'"-rw-r--r--    1 root     root          52 May 21 16:00 shopify.web.toml"
1717474652484,'"-rw-r--r--    1 root     root        2.0K May 21 16:00 product-creator.js"
1717474652484,'"-rw-r--r--    1 root     root        2.4K May 21 16:00 privacy.js"
1717474652484,'"-rw-r--r--    1 root     root         789 May 24 02:01 package.json"
1717474652484,'"-rw-r--r--    1 root     root        1.5K Jun  4 04:09 shopify.js"
1717474652484,'"-rw-r--r--    1 root     root        4.5K Jun  4 04:09 index.js"
1717474652484,'"-rw-r--r--    1 root     root        2.5K Jun  4 04:09 database.sql"
1717474652484,drwxr-xr-x    2 root     root         189 Jun  4 04:10 routes
1717474652484,drwxr-xr-x    8 root     root        4.0K Jun  4 04:10 frontend
1717474652484,drwxr-xr-x    1 root     root          36 Jun  4 04:10 ..
1717474652484,drwxr-xr-x    4 root     root         178 Jun  4 04:10 .
1717474653115,> shopify-app-template-node@1.0.0 serve
1717474653115,> cross-env NODE_ENV=production node index.js
1717474653119,sh: cross-env: not found
1717474653124,npm error Lifecycle script `serve` failed with error:
1717474653126,npm error code 127
1717474653126,npm error path /app/web
1717474653126,npm error workspace shopify-app-template-node@1.0.0
1717474653126,npm error location /app/web
1717474653126,npm error command failed
1717474653126,npm error command sh -c cross-env NODE_ENV=production node index.js
1717474653137,Backend Now Serving Requests.
1717474653137,App Build And Serve Script Complete.

Any leads to what I am missing?

8

It works. thank you very much!