如何使用Dockerfile.dev和Yarn构建React应用 [英] How to build react app using Dockerfile.dev and Yarn

问题描述

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

I am trying to run a react app using docker. Here are my steps:

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

I have created a react app using react-native-cli and added Dockerfile.dev file. My Dockerfile.dev file contains this code:

# 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"]

然后我执行此命令并获得此输出。

Then I execute this command and get this output. But it doesn't show any port to access it.

docker build -f Dockerfile.dev .

OP：成功构建ad79cd63eba3

OP: Successfully built 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 进行访问。

Can anybody tell me how I start the development server and it shows me the port like Http://localhost:3000 to access it.

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

推荐答案

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

There is an issue with Docker and the last version of react scripts. Here is a Github thread about it : https://github.com/facebook/create-react-app/issues/8688

针对您的案例的（临时和最快）解决方案是降级react- package.json文件中的脚本。
来源：

The (temporary and fastest) solution for your case is to downgrade the version of react-scripts in your package.json file. From :

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

To：

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

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

I tested your project with this configuration and it works well now.

从上述Github线程看来，这似乎是使用docker-compose和 stdin_open：true 选项的另一种解决方案（基本上对应于 docker run 命令的> -it 标志。如果react-scripts版本对您很重要，您也可以尝试这样做（并且您希望保留最后版本）

From the above Github Thread it seems to be another solution with docker-compose and stdin_open: true option (which basically correspond to the -it flag of the docker run command. You can try that too if the react-scripts version matter for you (and you want to keep the last version of it)

这篇关于如何使用Dockerfile.dev和Yarn构建React应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！