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

IT技术 reactjs docker
2021-05-07 21:44:04

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

我使用react-native-cli并添加了Dockerfile.dev文件创建了一个react应用程序。我的 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

3个回答

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 Thread 看来，它似乎是另一个带有 docker-compose 和stdin_open: true选项的解决方案（基本上对应于命令的-it标志docker run。如果 react-scripts 版本对你很重要，你也可以尝试一下（并且你想保留最后一个它的版本）

这是用于码头工人纱线react

# pull the base image
FROM node:lts-alpine

# set the working direction
WORKDIR /app

# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH

# install app dependencies
COPY package.json ./

COPY yarn.lock ./

# rebuild node-sass
RUN yarn add node-sass

RUN yarn

# add app
COPY . ./

# start app
CMD ["yarn", "start"]

# 指定一个基础镜像
FROM node:14.5.0 作为构建依赖

# 在运行 yarn install 作为工件之前创建工作目录并复制应用程序
# 凭据可以在 .npmrc 中
工作目录 /usr/src/app
复制 。./

# 运行纱线安装
运行纱线安装

# 构建项目
CMD [“纱线”，“运行”，“构建”]

# 为纱线包管理器安装服务命令
RUN yarn 全局添加服务

# 导航到构建文件夹
工作目录 /usr/src/app/build

# 启动应用程序
CMD 服务 -p 80 -s 。
其它你可能感兴趣的问题
上一篇在同一组件中react渲染多个模态 下一篇是的，非必填字段的验证