Docker化Shopify默认启动应用时遇TypeError问题求助

问题描述 #

通过Shopify CLI执行npm init @shopify/app@latest创建的默认应用，本地运行正常，但构建Docker镜像并运行时出现以下TypeError：

file:///app/index.js:29
  SCOPES: process.env.SCOPES.split(","),
                             ^
TypeError: Cannot read properties of undefined (reading 'split')
    at file:///app/index.js:29:30
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:530:24)
    at async loadESM (node:internal/process/esm_loader:91:5)
    at async handleMainPromise (node:internal/process/esm_loader:91:5)
Node.js v18.12.1

已执行npm run shopify app env pull生成.env文件，甚至复制为process.env，尝试将env文件放在/web目录下仍无效。自动生成的Dockerfile内容如下：

FROM node:18-alpine
ARG SHOPIFY_API_KEY
ENV SHOPIFY_API_KEY=$SHOPIFY_API_KEY
EXPOSE 8081
WORKDIR /app
COPY web .
RUN npm install
RUN cd frontend && npm install && npm run build
CMD ["npm", "run", "serve"]

.env文件内容：

SHOPIFY_API_KEY=00000000000000000000000000000000
SHOPIFY_API_SECRET=00000000000000000000000000000000
SCOPES=write_products
HOST=https://a1b1-123-456-789-00.eu.ngrok.io

解决方法 #

1. 让Docker加载.env文件 #

Docker容器是隔离环境，不会自动读取本地.env文件，可通过两种方式注入变量：

• 方式一：修改Dockerfile复制.env文件
  确保.env文件和Dockerfile在同一目录，修改Dockerfile添加复制.env的步骤：

  FROM node:18-alpine
  ARG SHOPIFY_API_KEY
  ENV SHOPIFY_API_KEY=$SHOPIFY_API_KEY
  EXPOSE 8081
  WORKDIR /app
  # 先复制.env文件到容器工作目录
  COPY .env .
  COPY web .
  RUN npm install
  RUN cd frontend && npm install && npm run build
  CMD ["npm", "run", "serve"]
  

• 方式二：运行容器时挂载.env文件
  不修改Dockerfile，通过命令行参数加载本地.env：

  docker run --env-file .env -p 8081:8081 <你的镜像名称>
  

2. 确认应用加载.env文件 #

检查项目的index.js顶部是否有加载dotenv的代码，确保应用启动时读取环境变量：

import dotenv from 'dotenv';
dotenv.config();

Shopify默认应用通常已安装dotenv，但如果缺失，执行npm install dotenv安装后添加上述代码。

3. 修复路径问题 #

自动生成的Dockerfile用COPY web .复制代码，如果.env文件在项目根目录（而非web子目录），必须先复制.env再复制web内容，否则容器内的/app目录不会有.env文件。

4. 本地运行正常的原因 #

Shopify CLI在本地运行时，会自动读取项目根目录的.env文件或通过内部机制注入环境变量，因此本地无需额外配置，但Docker容器没有这个自动机制，必须手动传递环境变量。

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