如何使用 Dockerfile.dev 和 Yarn 构建 React 应用程序

Question

我正在尝试使用 docker 运行一个 React 应用程序。这是我的步骤：

我使用react-native-cli并添加了Dockerfile.dev文件创建了一个反应应用程序。我的 Dockerfile.dev 文件包含以下代码：

# Specify a base image
FROM node:alpine

WORKDIR '/app'

# Install some depenendencies
COPY package.json .
RUN yarn install
COPY . .

# Uses port which is used by the actual application
EXPOSE 3000

# Default command
CMD ["yarn", "run", "start"]

然后我执行这个命令并得到这个输出。但它没有显示任何端口来访问它。

docker build -f Dockerfile.dev .

OP：成功构建ad79cd63eba3

docker run ad79cd63eba3

操作：

yarn run v1.22.4
$ react-scripts start
? ?wds?: Project is running at http://172.17.0.2/
? ?wds?: webpack output is served from
? ?wds?: Content not from webpack is served from /app/public
? ?wds?: 404s will fallback to /
Starting the development server...

Done in 2.02s.

谁能告诉我如何启动开发服务器，它向我展示了Http://localhost:3000访问它的端口。

完整代码：https : //github.com/arif2009/frontend.git

Answer 1

Docker 和最新版本的 React 脚本存在问题。这是关于它的 Github 线程：https ://github.com/facebook/create-react-app/issues/8688

针对您的情况的（临时且最快的）解决方案是降级 package.json 文件中的 React-scripts 版本。从 ：

    "dependencies": {
     ...
    "react-scripts": "3.4.1"
    }

到 ：

   "dependencies": {
     ...
    "react-scripts": "3.4.0"
    }

我使用此配置测试了您的项目，现在运行良好。

从上面的 Github 线程来看，它似乎是另一个带有 docker-compose 和stdin_open: true选项的解决方案（基本上对应于-it命令的标志docker run。如果反应脚本版本对你很重要，你也可以尝试一下（并且你想保留最后一个）它的版本）