使用 Docker 运行 React

Docker 是独立运行 Web 服务的工具之一，我们不需要在我们的计算机/笔记本电脑上安装依赖项或本地服务器。

React 是用于构建前端网站的最流行的 JavaScript 框架之一。

这是我使用 Docker 运行 React（使用 Next.js 框架）的方式

工具

具有至少 8 GB RAM 的设备（非常推荐）
吉特
码头工人
Docker 桌面（可选）
良好的互联网连接

项目设置

准备将要在docker上运行的项目，这里是我使用的项目示例 https://github.com/axquired24/next-userlist

克隆项目 ke 本地笔记本电脑

 git 克隆[ [email protected]](/cdn-cgi/l/email-protection#f1969885b1969885998493df929e9c) :axquired24/next-userlist.git

这里不需要 npm install ，因为我们将在 docker 中完成所有进程

根据上面的项目创建一个docker镜像，首先准备一个新的文件，名称为 Dockerfile di 文件夹根项目 tadi

然后填写：

 # 使用现有 docker 社区的镜像，这里使用 alpine-linux 已经安装的 node 版本 16.17  
 FROM node:16.17-alpine 作为节点 # 运行命令更新包列表  
 运行 apk 更新 && \  
 apk 添加--no-cache curl  
  
 # 稍后描述docker容器中的项目目录  
 工作目录 /app # 将所有项目文件复制到/app目录下  
 复制 。 . # 运行命令安装和构建 next.js  
 运行 npm 安装  
 运行 npm 运行构建  
  
 # 定义docker容器中使用的端口  
 曝光 3000 # 在终端运行 npm run start  
 CMD [“npm”，“开始”]

还要准备一个文件名 .dockerignore , 在对 docker 执行项目操作时忽略文件/文件夹

 # 这里我忽略了node_modules和log文件夹，因为后面不需要复制  
 节点模块  
 npm-debug.log

以上准备完成后，在项目中打开终端，运行命令创建docker镜像

 # docker build -t 用户名/namaproject 文件夹项目  
 docker build -t axquired24/next-userlist 。

然后等到下载、安装、构建过程完成（第一次比较费时间... 确保互联网连接良好，因为下载量很大 ）。

正常运行后，说明镜像创建成功。我们可以将此映像运行到一个或多个具有不同端口的容器中。

这是运行图像的功能 axquired24/下一个用户列表 进入 2 个具有不同端口的容器（端口 3003 和端口 3004）

 # docker run [选项] -p main-access-port:project-name-docker-port  
 docker run -it -p 3003:3000 axquired24/next-userlist  
 docker run -it -p 3004:3000 axquired24/next-userlist