- • 简单介绍一下如何在本地用 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/,成功访问: