Блог

Почему моя папка «/build » отсутствует в моем контейнере docker, но присутствует, когда я запускаю локальную сборку yarn?
Может ли быть проблема с зависимостью пути в верхней части webpack.prod.config.ts? Где контейнер не может определить путь, но моя машина может это сделать? Должен ли я работать с другим хост-контейнером?

Заранее спасибо за помощь!

Ошибка

ОШИБКА [4/4] КОПИРОВАТЬ —из=сборка /приложение/сборка . 0.0 с [нажмите-n-файл 4/4] КОПИРОВАТЬ —из=сборка /приложение/сборка .: не удалось вычислить ключ кэша: «/приложение/сборка» не найдено: не найдено

Файлы

Докерфайл

 # Multi-stage Docker file # 1) Build the node project with the latest version of node # 2) NGNIX to serve the production front end packed via webpack  # Stage 1: Building the application FROM node:latest AS build  WORKDIR /app  # Copy the app to the working directory on the image COPY . .  # Install node modules and build application RUN yarn install amp;amp; yarn run build  # Stage 2: Serve content using NGINX Web Server FROM nginx:latest  ENV NODE_ENV production  WORKDIR /usr/share/nginx/html # Remove default nginx static assets RUN rm -rf ./* # Copy static assets from builder stage COPY --from=build /app/build .  # Containers run nginx with global directives and daemon off ENTRYPOINT ["nginx", "-g", "daemon off;"]  

webpack.prod.config.ts

 import path from 'path' import { Configuration } from 'webpack' import HtmlWebpackPlugin from 'html-webpack-plugin' import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin' import ESLintPlugin from 'eslint-webpack-plugin' import { CleanWebpackPlugin } from 'clean-webpack-plugin' import tailwindcss from 'tailwindcss' import autoprefixer from 'autoprefixer' import CssMinimizerPlugin from 'css-minimizer-webpack-plugin'  const config: Configuration = {  mode: 'production',  entry: './src/index.tsx',  output: {  path: path.resolve(__dirname, 'build'),  filename: '[name].[contenthash].js',  publicPath: '/',  },  module: {  rules: [  {  test: /.(ts|js)x?$/i,  exclude: /node_modules/,  use: {  loader: 'babel-loader',  options: {  presets: [  '@babel/preset-env',  '@babel/preset-react',  '@babel/preset-typescript',  ],  },  },  },  {  test: /.(sa|sc|c)ss$/i,  use: [  'style-loader',  'css-loader',  {  loader: 'sass-loader',  options: {  sourceMap: true,  sassOptions: {  // https://github.com/sass/node-sass#outputstyle  outputStyle: 'compressed',  },  },  },  {  loader: 'postcss-loader', // postcss loader needed for tailwindcss  options: {  postcssOptions: {  ident: 'postcss',  plugins: [tailwindcss, autoprefixer],  },  },  },  ],  },  ],  },  resolve: {  extensions: ['.tsx', '.ts', '.js'],  },  plugins: [  new HtmlWebpackPlugin({  template: 'public/index.html',  }),   new ForkTsCheckerWebpackPlugin({  async: false,  }),   new ESLintPlugin({  extensions: ['js', 'jsx', 'ts', 'tsx'],  }),   // The CleanWebpackPlugin plugin will clear out the build folder.  new CleanWebpackPlugin(),  ],  performance: {  hints: false,  maxEntrypointSize: 512000,  maxAssetSize: 512000,  },  optimization: {  minimize: true,  minimizer: [  // For webpack@5 you can use the `...` syntax to extend existing minimizers  '...',  new CssMinimizerPlugin(),  ],  }, };  export default config  

пакет.json

 "scripts": {  ...  "build": "webpack --config webpack/webpack.prod.config.ts",  ... }  

Вероятно, это не «лучший» ответ, но я только что добавил выходной каталог в сценарий NPM

 "scripts": {  ...  "build": "webpack --config webpack/webpack.prod.config.ts -o ./build",  ... }  

И это решило мою проблему!