【Docker】让前端也能用Docker部署，以ruoyi（若依）为例，极简部署流程

  "registry-mirrors": [
    "https://docker.imgdb.de",
    "https://registry.hub.docker.com",
    "http://hub-mirror.c.163.com",
    "https://docker.mirrors.ustc.edu.cn",
    "https://registry.docker-cn.com"
  ]

尝试nginx运行

这里先尝试一下 nginx服务器的docker化运行：

javascript 复制代码

docker run -d -p 80:80 --name webserver nginx

输入http://localhost/，如果看到下图，就说明成功了

暂停可通过如下命令：

javascript 复制代码

docker stop webserver 
docker rm webserver

这里需要注意，一定要在执行stop后，接着执行rm，否则下次再执行 docker run -d -p 80:80 --name webserver nginx会报错。

以ruoyi为例，容器化一个镜像，并尝试启动

按照开文所述，我们其实是把ruoyi的静态资源跟nodejs，打包成一个完整的镜像(Image)，然后在容器(Container)中运行，保证所以拉取镜像的个体，都能顺利运行

在项目的根目录建立三个文件，如图所示：

其中 dockerfile配置了docker的构建信息

dockerfile

javascript 复制代码

# 使用 Node.js 16 作为基础镜像
FROM node:16.19.1

# 将当前工作目录设置为/app
WORKDIR /app

# 将 package.json 和 package-lock.json 复制到 /app 目录下
COPY package*.json ./

# 运行 npm install 安装cnpm 再通过cnpm安装依赖 
RUN yarn install

# 将源代码复制到 /app 目录下
COPY . .

# 打包构建
RUN npm run build:prod

# 将构建后的代码复制到 nginx 镜像中
FROM nginx:latest
COPY --from=0 /app/dist /usr/share/nginx/html

# 复制自定义的Nginx配置到镜像中，覆盖默认配置
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

# 启动 nginx 服务
CMD ["nginx", "-g", "daemon off;"]

dockerignore

javascript 复制代码

.DS_Store
node_modules
/dist


# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
dist.zip

nginx/default.conf

javascript 复制代码

server {
    listen 80;   # 端口号是80
    server_name localhost;
    
    location / {
        root   /usr/share/nginx/html;  # nginx 默认会从这个路径下加载网页，这是 nginx 默认的网页根目录
        index  index.html index.htm;
    }

    error_page  404              /404.html;  # 错误404处理
    error_page  500 502 503 504  /50x.html;  # 错误5XX处理

    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

执行docker命令，打包工程

打包前，记得将ruoyi的生产打包路径修改为 https://vue.ruoyi.vip/prod-api，否则，打包完启动会报错，因为后端无法连接

javascript 复制代码

docker build -t ruoyi-admin:v1 .

docker build -t 后面的docker镜像名可以自己随意取，:v1是用于做标记的标签。

打包中，如果报错可以查看镜像源设置是否有误，大概率是类似failed to resolve source metadata for docker.io/library/node:16.19.1这种报错，其实就是国内镜像源失效，从docker hub拉取，但是受限网络导致失败。

打包完成

运行

javascript 复制代码

docker run -d -p 3030:80 --name ruoyi-admin-web ruoyi-admin:v1

这代表我们将本电脑的3030端口，映射到了容器的80端口，就可以进行访问了
http://localhost:3030/

也可以通过命令 docker ps,查看端口占用情况。

效果如下：

关闭当前端口容器，指令如下：

js 复制代码

docker stop ruoyi-admin-web
docker rm ruoyi-admin-web

完结撒花！

【Docker】让前端也能用Docker部署，以ruoyi（若依）为例，极简部署流程

镜像（Image）： Docker 镜像是一个只读的模板，可以理解为是一种存储形式，可以理解为数据或应用的副本。

容器（Container）： 容器是镜像的运行实例，可以被启动、停止、删除 , 是运行在虚拟机上的进程。

仓库（Repository）： 用来存储和分发 Docker 镜像的。

Ruoyi代码下载

Docker安装

Docker Desktop 国内镜像源设置

尝试nginx运行

以ruoyi为例，容器化一个镜像，并尝试启动

dockerfile

dockerignore

nginx/default.conf

执行docker命令，打包工程

运行

容器（Container）：容器是镜像的运行实例，可以被启动、停止、删除 , 是运行在虚拟机上的进程。

仓库（Repository）：用来存储和分发 Docker 镜像的。