我无法使用打字稿构建 docker 图像错误

Question

您好，我无法在 next.js 应用程序中使用 docker build . 构建 docker 映像

收到错误

error: failed to solve: process "/bin/sh -c yarn run build" did not complete successfully: exit code: 1
Error: buildx failed with: error: failed to solve: process "/bin/sh -c yarn run build" did not complete successfully: exit code: 1

全部日志

#1 [internal] load .dockerignore
#1 transferring context: 2B done
#1 DONE 0.0s
#2 [internal] load build definition from Dockerfile
#2 transferring dockerfile: 214B done
#2 DONE 0.0s
#3 [internal] load metadata for docker.io/library/node:16-alpine
#3 ...
#4 [auth] library/node:pull token for registry-1.docker.io
#4 DONE 0.0s
#3 [internal] load metadata for docker.io/library/node:16-alpine
#3 DONE 0.9s
#5 [internal] load build context
#5 DONE 0.0s
#6 [1/8] FROM docker.io/library/node:16-alpine@sha256:da32af0cf608622b1550678b2552b7d997def7d0ada00e0eca0166ed2ea42186
#6 resolve docker.io/library/node:16-alpine@sha256:da32af0cf608622b1550678b2552b7d997def7d0ada00e0eca0166ed2ea42186 done
#6 DONE 0.0s
#7 importing cache manifest from gha:14737076832837719571
#7 DONE 0.5s
#5 [internal] load build context
#5 transferring context: 21.45MB 1.1s done
#5 DONE 1.1s
#6 [1/8] FROM docker.io/library/node:16-alpine@sha256:da32af0cf608622b1550678b2552b7d997def7d0ada00e0eca0166ed2ea42186
#6 sha256:86937321b535acf01ac5d7f108ead204d1c6a71f9a1c4402e8317ece72d1f6c8 453B / 453B 0.2s done
#6 sha256:b831dd745300d07e75a46ae8805ad39a4164cf888686f4a45ed782a26fd0d50c 2.34MB / 2.34MB 0.2s done
#6 sha256:95ca4541bf43fa13f7c3ef511d8b0f1a156a738645582a3c7e27a7b3fdebf4e3 35.68MB / 35.68MB 0.7s done
#6 sha256:530afca65e2ea04227630ae746e0c85b2bd1a179379cbf2b6501b49c4cab2ccc 2.80MB / 2.80MB 0.4s done
#6 extracting sha256:530afca65e2ea04227630ae746e0c85b2bd1a179379cbf2b6501b49c4cab2ccc 0.3s done
#6 extracting sha256:95ca4541bf43fa13f7c3ef511d8b0f1a156a738645582a3c7e27a7b3fdebf4e3
#6 extracting sha256:95ca4541bf43fa13f7c3ef511d8b0f1a156a738645582a3c7e27a7b3fdebf4e3 1.7s done
#6 DONE 2.5s
#6 [1/8] FROM docker.io/library/node:16-alpine@sha256:da32af0cf608622b1550678b2552b7d997def7d0ada00e0eca0166ed2ea42186
#6 extracting sha256:b831dd745300d07e75a46ae8805ad39a4164cf888686f4a45ed782a26fd0d50c 0.1s done
#6 extracting sha256:86937321b535acf01ac5d7f108ead204d1c6a71f9a1c4402e8317ece72d1f6c8 done
#6 DONE 2.6s
#8 [2/8] RUN mkdir /app
#8 DONE 1.5s
#9 [3/8] WORKDIR /app
#9 DONE 0.0s
#10 [4/8] COPY ./ ./
#10 DONE 0.1s
#11 [5/8] RUN yarn add typescript
#11 0.320 yarn add v1.22.19
#11 0.449 warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
#11 0.488 [1/4] Resolving packages...
#11 1.252 [2/4] Fetching packages...
#11 18.54 [3/4] Linking dependencies...
#11 18.55 warning " > next-images@1.8.4" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
#11 18.55 warning "next-images > file-loader@6.2.0" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
#11 18.55 warning "next-images > url-loader@4.1.1" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
#11 25.70 [4/4] Building fresh packages...
#11 45.42 success Saved lockfile.
#11 45.53 success Saved 1 new dependency.
#11 45.53 info Direct dependencies
#11 45.54 └─ typescript@4.7.4
#11 45.54 info All dependencies
#11 45.54 └─ typescript@4.7.4
#11 45.55 Done in 45.23s.
#11 DONE 51.2s
#12 [6/8] RUN yarn add --dev @types/react
#12 1.135 yarn add v1.22.19
#12 1.260 warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
#12 1.301 [1/4] Resolving packages...
#12 1.967 [2/4] Fetching packages...
#12 2.651 [3/4] Linking dependencies...
#12 2.659 warning " > next-images@1.8.4" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
#12 2.660 warning "next-images > file-loader@6.2.0" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
#12 2.660 warning "next-images > url-loader@4.1.1" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
#12 5.046 [4/4] Building fresh packages...
#12 5.111 success Saved lockfile.
#12 5.119 warning "@types/react" is already in "dependencies". Please remove existing entry first before adding it to "devDependencies".
#12 5.230 success Saved 1 new dependency.
#12 5.232 info Direct dependencies
#12 5.234 └─ @types/react@18.0.15
#12 5.235 info All dependencies
#12 5.235 └─ @types/react@18.0.15
#12 5.243 Done in 4.12s.
#12 DONE 5.5s
#13 [7/8] RUN yarn install
#13 0.355 yarn install v1.22.19
#13 0.483 warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
#13 0.491 [1/4] Resolving packages...
#13 0.979 success Already up-to-date.
#13 1.002 Done in 0.66s.
#13 DONE 1.0s
#14 [8/8] RUN yarn run build
#14 0.350 yarn run v1.22.19
#14 0.414 $ next build
#14 1.207 info  - Loaded env from /app/.env.production
#14 1.718 info  - Using webpack 4. Reason: custom webpack configuration in next.config.js https://nextjs.org/docs/messages/webpack5
#14 2.096 Attention: Next.js now collects completely anonymous telemetry regarding usage.
#14 2.097 This information is used to shape Next.js' roadmap and prioritize features.
#14 2.097 You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
#14 2.097 https://nextjs.org/telemetry
#14 2.097 
#14 2.164 info  - Checking validity of types...
#14 2.175 It looks like you're trying to use TypeScript but do not have the required package(s) installed.
#14 2.175 
#14 2.175 Please install @types/react by running:
#14 2.175 
#14 2.175   yarn add --dev @types/react
#14 2.175 
#14 2.175 If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files in your pages directory).
#14 2.175 
#14 2.240 error Command failed with exit code 1.
#14 2.241 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
#14 ERROR: process "/bin/sh -c yarn run build" did not complete successfully: exit code: 1
------
 > [8/8] RUN yarn run build:
#14 2.175 It looks like you're trying to use TypeScript but do not have the required package(s) installed.
#14 2.175 
#14 2.175 Please install @types/react by running:
#14 2.175 
#14 2.175   yarn add --dev @types/react
#14 2.175 
#14 2.175 If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files in your pages directory).
#14 2.175 
#14 2.240 error Command failed with exit code 1.
#14 2.241 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
------
Dockerfile:13
--------------------
  11 |     RUN yarn install
  12 |     
  13 | >>> RUN yarn run build
  14 |     CMD yarn run start
  15 |     
--------------------
error: failed to solve: process "/bin/sh -c yarn run build" did not complete successfully: exit code: 1
Error: buildx failed with: error: failed to solve: process "/bin/sh -c yarn run build" did not complete successfully: exit code: 1

Docker 文件

FROM node:16-alpine

RUN mkdir /app
WORKDIR /app

COPY ./ ./

RUN yarn install
RUN yarn install --dev typescript

RUN yarn run build

CMD yarn run start

package.json

"dependencies": {
    "@popperjs/core": "^2.11.5",
    "axios": "^0.27.2",
    "bootstrap": "^5.0.1",
    "countup.js": "^2.1.0",
    "cypress": "^10.3.0",
    "eslint": "^8.14.0",
    "eslint-config-next": "^12.1.5",
    "formik": "^2.2.9",
    "next": "10.2.3",
    "next-images": "^1.8.4",
    "react": "17.0.2",
    "react-bootstrap": "^2.4.0",
    "react-countup": "^6.2.0",
    "react-device-detect": "^2.2.2",
    "react-dom": "17.0.2",
    "react-feather": "^2.0.10",
    "react-gtm-module": "^2.0.11",
    "react-highlight-words": "^0.18.0",
    "react-paginate": "^8.1.3",
    "react-use-audio-player": "^1.2.6",
    "sass": "^1.34.0",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@types/bootstrap": "^5.1.12",
    "@types/react": "^18.0.15",
    "@types/react-gtm-module": "^2.0.1",
    "@types/react-highlight-words": "^0.16.4"
  }
}

Answer 1

next.js 存储库有一个使用 Docker 的示例。它说“要向现有项目添加对 Docker 的支持，只需将 Dockerfile 复制到项目的根目录中，并将以下内容添加到 next.config.js 文件中：”

module.exports = {
  // ... rest of the configuration.
  output: 'standalone',
}

它希望您复制的 Dockerfile 链接为 here，将 Docker 添加到 next.js 的文档链接为 here。这会自动支持打字稿，因此您不必担心。

Answer 2

您的构建日志告诉我您使用的是由 npm 生成的 package-lock.json 文件，而不是由 yarn 生成的 yarn.lock 文件。这可能会导致您看到的模块解析 (@types/react) 问题。

---

另外，这条线与我有关：

#12 5.119 warning "@types/react" is already in "dependencies". Please remove existing entry first before adding it to "devDependencies".

您在问题中列出的 package.json 似乎与您的构建实际使用的文件不匹配。

不是指责，但此错误可能是由多种原因引起的。我怀疑您的dockerfile 中的这条线可能是罪魁祸首：

COPY ./ ./

在不知道您的目录结构的情况下，这可以将任何内容复制到您的图像中。也许它正在从您的主机复制一个冲突的package-lock.json？

---

另外，如果你在容器内构建，你应该使用 Docker 的multistage builds 来缩小最终的镜像大小。通过这种方式，您不必担心额外的 devDependencies（如 yarn 和 typescript）的大小。

编写您的 devDependencies！它可以更轻松地与其他开发者共享您的应用程序/包。

如果您使用的是npm，您的Dockerfile 应如下所示：

###############
# build stage #
###############

FROM node:16-alpine AS build

ARG NODE_ENV="development"

WORKDIR /app

COPY package.json package-lock.json tsconfig.json ./

# installs both production and dev dependencies
RUN npm ci

RUN npm run build

###############
# final stage #
###############

FROM node:16-alpine

ARG NODE_ENV="production"

COPY package.json package-lock.json ./

# installs only production dependencies
RUN npm ci

COPY --from=build ./build ./build

USER node

CMD npm run start

注意：此构建假定 typescript 已列在您的 devDependencies 中。

如果您使用的是yarn，您的 Dockerfile 应该如下所示：

###############
# build stage #
###############

FROM node:16-alpine AS build

ARG NODE_ENV="development"

WORKDIR /app

COPY package.json yarn.lock ./

# installs both production and dev dependencies
RUN yarn install

RUN yarn run build

###############
# final stage #
###############

FROM node:16-alpine

ARG NODE_ENV="production"

COPY package.json yarn.lock ./

# installs only production dependencies
RUN yarn install

# wherever your tsc build output is
COPY --from=build ./build ./build

USER node

CMD yarn run start