内网使用Docker+ WebStrom 开发Antdpro

一. 外网部分步骤

所需环境：

• DockerDesktop
• WebStrom
• Node.js
• Andtpro 基础知识

1.编写Dockerfile

新建一个antdpro 项目 在根目录下新建Dockerfile

FROM node:18.0.0-alpine
LABEL authors="xxx"

# 设置工作目录
WORKDIR /docker_react

# 将 package.json 和 package-lock.json 复制到容器中
COPY package*.json ./

#安装项目依赖
RUN npm install

# 暴露 React 开发服务器的默认端口
EXPOSE 8000

2. 运行docker build 命令

不要忘记写 . 运行当前路径下的 Dockerfile

docker build  --network host -t react_docker_image .

3. 查看是否创建成功

可以使用 命令 或 docker desktop 查看

docker  images 

4. 打包镜像

MacOS

# mac下的打包命令 打包完成的镜像导入后有name:tag 
 docker save react_docker_image > ~/Downloads/react_docker_image.tar                                    

Windows

# windows下的打包命令 包完成的镜像导入后没有name:tag 
docker save {imageId} -o  C:\react_docker_image.tar

打包成功后生成一个 react_docker_image.tar 文件

二. 内网部分

所需环境：

• DockerDesktop
• WebStrom

1. 将 react_docker_image.tar 拷贝到内网计算机上 （我本地使用是windwos11 系统）

2. 导入镜像

docker load  -i E:\react_docker_image.tar

此时 导入的镜像没有名字

#查找到 镜像的ID 复制出来
docker images

给镜像重新命名

docker tag  {imageID} {name}:{tag}

3. 运行镜像

这里我们使用Webstrorm 自带的功能运行docker image


三个主要操作

3.1 给container 起一个名字

react_docker_container

3.2 绑定端口

本地端口映射到容器内的8000端口

3.3 映射目录

选择本地antdpro项目的文件夹 和 容器的 dockerfile 中写到的 工作路径

WORKDIR /docker_react

4. 运行容器

点击run即可运行

启动后的容器可以在docker desktop 或 webstrom 中的 services 中查看

5. 运行项目开始开发

点击termainal 进入docker 容器 运行 启动命令

npm start

如果遇到 有关cross-env 相关的问题

在Dockerfile 中添加

FROM node:18.0.0-alpine
LABEL authors="qimingyang"

# 设置工作目录
WORKDIR /docker_react

# 将 package.json 和 package-lock.json 复制到容器中
COPY package*.json ./

#新添加-----------------------安装cross-env
RUN npm install cross-env -g
#新添加-----------------------

#安装项目依赖
RUN npm install

# 暴露 React 开发服务器的默认端口
EXPOSE 8000

在浏览器打开: localhost:8000 即可，因为已经挂载了本地的目录所以使用webstrom 编辑即可同步更新。