reactjs - 如何使用Dockerfile.dev和Yarn构建React应用

Question

我正在尝试使用docker运行react应用程序。这是我的步骤:
我已经使用react-native-cli创建了一个React应用并添加了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

OP:

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标志相对应。如果react-scripts版本对您很重要，您也可以尝试这样做(并且您想保留最新版本)