芋圆社区 > 编程 > Docker > 本地用Docker跑React

本地用Docker跑React

279
0
2024-02-26
2024-02-26
Hey、小怪兽

  • • 简单介绍一下如何在本地用 Docker 跑 React 项目（为什么要用Docker？在前后端分离的开发中，前端没有配置后端的环境，后端也没有安装前端的环境，这里用Docker就可以直接在容器里运行前/后端项目）
  • • 首先先创建一个React项目：
  • npx create-react-app docker-react
cd docker-react
  • • 在项目根目录下创建 Dockerfile 和 .dockerignore 文件：
  • • Dockerfile写（按需修改）：
  • - FROM node:alpine：指定基础镜像为 node:alpine，即以 Alpine Linux 为基础的 Node.js 环境
  • - RUN mkdir /app：在镜像中创建一个名为 /app 的目录
  • - WORKDIR /app：指定工作目录为 /app
  • - COPY package.json /app/：将本地的 package.json 文件复制到镜像中的 /app/ 目录下
  • - RUN yarn install：在镜像中执行 yarn install 命令安装项目依赖
  • - COPY . /app：将当前目录下的所有文件复制到镜像中的 /app/ 目录下
  • - CMD ["yarn", "start"]：在镜像启动时执行 yarn start 命令作为容器的默认命令
  • FROM node:alpine
RUN mkdir /app
WORKDIR /app
COPY package.json /app/
RUN yarn install
COPY . /app
CMD ["yarn", "start"]
  • • .dockerignore里写（.dockerignore 文件用于告诉 Docker 在构建镜像时哪些文件或目录应该被忽略，不包含在最终的镜像中）：
  • node_modules
yarn.lock
package-lock.json
  • • 如图：
  • • Docker登录：
  • docker login
  • • 要么就 Docker Desktop 点右上角，登录成功后创建并运行容器：
  • 命令：
docker run -d -it -p 3200:3200 <yourname/projectname>

我的：
docker run -d -it -p 3200:3200 taro/docker-demo
  • • 可以看到容器已经运行了：
  • • 但是访问 http://localhost:3200/ 出错：
  • • 原因是 React 启动的是3000端口，而容器监听的是3200端口，修改一下 React 端口号就行了：
  • • 安装cross-env：
  • yarn add cross-env --save
  • • 找到package：
  • "scripts": {
    // "start": "react-scripts start",
    // 修改
    "start": "cross-env PORT=3200 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},
  • • 删除之前的容器，再执行：
  • docker build -t taro/docker-demo .
docker run -d -it -p 3200:3200 taro/docker-demo
  • • 访问 http://localhost:3200/，成功访问：

Message Board