使用 craco 的 React App 不会在 docker-compose 中启动答案

【问题标题】：React App with craco doesn't start in docker-compose使用 craco 的 React App 不会在 docker-compose 中启动
【发布时间】：2022-01-20 22:04:25
【问题描述】：

我得到了一个需要使用 Docker Compose 进行容器化的 React 项目。我有一个Dockerfile：

FROM node:latest

# Create app directory
WORKDIR /usr/src/app

ENV PATH /app/node_modules/.bin:$PATH

COPY package.json ./

ADD . /usr/src/app

RUN npm install

EXPOSE 3000
CMD [ "npm", "start" ]

还有docker-compose.yml：

version: "3"

services:
  front:
    container_name: dev_front
    environment:
      - PATH= /app/node_modules/.bin:${PATH}
    build:
      context: .
    ports:
      - 3000:3000
    restart: always

我看到这个问题与我的问题有关：
Create React App fails to build inside docker

我尝试在答案中添加PATH 环境，但我仍然得到：

dev_front | craco: *** 找不到 ESLint 加载器 (eslint-loader)。 ***
dev_front |正在对您的 tsconfig.json 文件进行以下更改：
dev_front | - 不得设置 compilerOptions.paths（不支持别名导入）
dev_front | dev_front | ℹ｢wds｣：项目在http://172.19.0.2/运行
dev_front | ℹ ｢wds｣：webpack 输出来自
dev_front | ℹ ｢wds｣：不是来自 webpack 的内容是从 /usr/src/app/public
dev_front | ℹ ｢wds｣：404s 将回退到 /

然后我发现了这个问题：
How do I run a webpack build from a docker container?
答案告诉我们，docker 和 webpack 与什么是内部容器地址有冲突。我像在答案中一样更改了我的 config.js 文件。

craco.config.js:

const CracoAlias = require("craco-alias");

module.exports = {
    webpack: {
        alias: {
            'vscode': require.resolve('@codingame/monaco-languageclient/lib/vscode-compatibility')
        },
        devServer: {
            host: '0.0.0.0',
            port: 3000
        }
    },
    plugins: [{
        plugin: CracoAlias,
        options: {
            source: "tsconfig",
            baseUrl: "./src",
            tsConfigPath: "./tsconfig.extend.json"
        }
    }]
};

还是不行。

【问题讨论】：

标签： node.js reactjs docker webpack docker-compose

【解决方案1】：

它必须与 webpack 版本有关

解决方案是在 Dockerfile 中添加该行：

ENV NODE_OPTIONS --openssl-legacy-provider

【讨论】：