Vue本地部署包快速构建为Docker镜像

目录说明

镜像构建目录

本地需要安装Docker，笔者使用的wsl 安装 Ubuntu22.04，对应Docker 版本为28.4.0，具体细节可以查看笔者的文章Docker在Linux中离线部署，同时保证本地已经包含镜像nginx:1.24.0-alpine。

镜像构建时，目录如下，主要用于规范构建前端构建逻辑。

bash 复制代码

docker-build/
|--app/ # vben部署包
|--default.conf # 服务配置文件
|--.dockerignore# docker忽略文件
|--Dockerfile # 镜像构建配置文件

容器运行目录

本地也需要安装docker-compose，并不是docker自带，安装过程同样可以查看笔者的文章Docker在Linux中离线部署，Docker-Compose 主要用于简化按照镜像构建目标容器，并实现一键配置网络、数据卷、服务端口等。

bash 复制代码

docker-compose/
|--config/ # 配置目录
|----conf.d/ # 存储default.conf
|------default.conf # 服务映射文件
|----nginx.conf # 服务配置文件
|--.env # 环境变量
|--docker-compose.yml # compose配置

容器内外关系

为了方便对镜像、docker-compose配置以及容器不是很熟悉的读者能够更好的理解几者之间的关系，笔者梳理梳理出一个简单的关系图用于说明目录、文件以及网络的关系。

部署说明

前端部署包

这里使用开源项目vue-vben-admin 作为案例部署项目，本地打包pnpm build:play 案例项目，生成的dist 部署包在 playground/dist 中。

Nginx及配置

Nginx 配置主要分为两个，一个是nginx.conf作为Nginx 主要配置，conf.d/default.conf 作为服务配置。
nginx.conf 内容如下：

nginx 复制代码

#运行nginx的用户
#user  nginx;
#启动进程设置成和CPU数量相等
worker_processes  16;

#全局错误日志及PID文件的位置
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;

#工作模式及连接数上限
events {
    #单个进程允许的客户端最大连接数
    worker_connections 1024;
    #nginx在已经得到一个新连接的通知时，接收尽可能多的连接
    multi_accept on; 
}

http {
    #请求的数据大小
    client_max_body_size 200m;
        
    #设定mime类型
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    #设定日志格式
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for" "$upstream_addr"';
    
    #访问日志配置
    access_log  /var/log/nginx/access.log  main;

    #开启高效文件传输模式
    sendfile        on;

    #提高I/O性能
    tcp_nodelay on;

    #设置连接超时的事件
    keepalive_timeout  65;

    include /etc/nginx/conf.d/*.conf;
}

conf.d/default.conf 内容如下：

nginx 复制代码

upstream backend {
   server localhost:80;
}

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;
    
    access_log  /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;
   
    location /api {
	proxy_pass http://backend;
	client_max_body_size 500m;
    }
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    location ~ ^/(\.user.ini|\.htaccess|\.git|\.svn|\.project|LICENSE|README.md){
          return 403;
    }
}

构建镜像

Docker及配置

.dockerignore 作为构建镜像时，本地docker 客户端进行传输忽略的文件配置清单，内容如下：

git 复制代码

.git
Dockerfile
README.md
*.md
node_modules

构建镜像需要 Dockerfile 文件进行镜像构建配置，对应构建Dockerfile文件内容如下。

docker 复制代码

# 使用官方 nginx alpine 镜像
FROM nginx:1.24.0-alpine
# 删除默认配置
RUN rm -f /etc/nginx/conf.d/default.conf
# 复制自定义 nginx 配置
COPY default.conf /etc/nginx/conf.d/
# 合并静态资源复制（减少层数）
COPY app/ /usr/share/nginx/html/

有了上述前置准备工作和相关文件，就可以进行镜像构建过程。切换会话到docker-build目录，进行构建命令。

bash 复制代码

sudo docker build . -t [自定义镜像名称]:[版本号]

当前笔者构建命令如下：

bash 复制代码

sudo docker build . -t vue-vben-admin-front:0.0.1

输出结果如下，表示构建成功，可以在镜像中看到对应镜像。

bash 复制代码

Sending build context to Docker daemon  5.365MB
Step 1/4 : FROM nginx:1.24.0-alpine
 ---> 249f59e1dec7
Step 2/4 : RUN rm -f /etc/nginx/conf.d/default.conf
 ---> Using cache
 ---> ee8c3d55ef89
Step 3/4 : COPY default.conf /etc/nginx/conf.d/
 ---> bc91cee5ee95
Step 4/4 : COPY app/ /usr/share/nginx/html/
 ---> 6b894e1c4207
Successfully built 6b894e1c4207
Successfully tagged vue-vben-admin-front:0.0.1

查看镜像。

bash 复制代码

$ sudo docker images |grep vue-vben-admin-front
vue-vben-admin-front                            0.0.1           6b894e1c4207   47 seconds ago   46.2MB

构建容器

Docker-Compose及配置

.env 可以存储作为docker-compose.yml 使用的自定义环境变量，docker-compose.yml 使用时为${APP_ROOT}，当前表示容器数据卷所在宿主物理路径。

ini 复制代码

APP_ROOT=/home/ggcy/docker_data/vue-vben-admin/docker-compose

对应docker-compose.yml 内容如下：

yml 复制代码

version: '3.8'
services:
  front:
    image: vue-vben-admin-front:0.0.1
    container_name: vue-vben-admin-front
    #restart: unless-stopped
    privileged: true
    ports:
      - "8000:80"
    volumes:
      - ${APP_ROOT}/config/nginx.conf:/etc/nginx/nginx.conf
      - ${APP_ROOT}/config/conf.d/default.conf:/etc/nginx/conf.d/default.conf
      - ${APP_ROOT}/logs:/var/log/nginx
      - /etc/localtime:/etc/localtime
    command: ["nginx", "-g", "daemon off;"]

切换会话到docker-compose 目录执行如下命令，为方便查看并未设置-d 用于后台运行。

bash 复制代码

$sudo docker-compose up 
[+] Running 1/1
 ✔ Container vue-vben-admin-front  Created                           0.1s
Attaching to vue-vben-admin-front
vue-vben-admin-front  | /docker-entrypoint.sh: /docker-entrypoint.d/ is not empty, will attempt to perform configuration
vue-vben-admin-front  | /docker-entrypoint.sh: Looking for shell scripts in /docker-entrypoint.d/
vue-vben-admin-front  | /docker-entrypoint.sh: Launching /docker-entrypoint.d/10-listen-on-ipv6-by-default.sh
vue-vben-admin-front  | 10-listen-on-ipv6-by-default.sh: info: IPv6 listen already enabled
vue-vben-admin-front  | /docker-entrypoint.sh: Launching /docker-entrypoint.d/20-envsubst-on-templates.sh
vue-vben-admin-front  | /docker-entrypoint.sh: Launching /docker-entrypoint.d/30-tune-worker-processes.sh
vue-vben-admin-front  | /docker-entrypoint.sh: Configuration complete; ready for start up

单独开启一个会话，查看对应容器运行情况，可以查看到容器运行正常。

bash 复制代码

$sudo docker ps|grep vue-vben-admin-front
064f0fa4f954   vue-vben-admin-front:0.0.1   "/docker-entrypoint...."   3 minutes ago   Up 3 minutes       0.0.0.0:8000->80/tcp, [::]:8000->80/tcp

此时可以在服务运行会话中，ctrl+C 退出，然后再执行docker-compose up -d用于后台运行。

bash 复制代码

$sudo docker-compose  up -d
[+] Running 1/1
 ✔ Container vue-vben-admin-front  Started

运行效果

浏览器访问http://localhost:8000，出现如下效果表明容器运行成功。

验证后，点击登录可以正常访问到首页。