当前位置：首页 > news >正文

7.docker部署前端vue项目，实现反向代理配置

news 2025/7/5 12:13:53

介绍：

构建镜像：通过docker构建以nginx为基础的镜像，将vue项目生成的dist包拷贝至nginx目录下，.conf文件做反向代理配置；
部署服务：docker stack启动部署服务；

通过执行两个脚本既可以实现构建镜像、部署服务的过程。本文将对两个脚本及其他核心配置文件做详细解释。

1.前提条件

（1）由于是使用docker来构建镜像，所以本地需要有docker环境。
（2）如果要将镜像推送到私服镜像仓库，则需要修改docker的配置文件daemon.json，如下：
在insecure-registries中添加仓库地址

{
"experimental": false,
"debug": true,
"registry-mirrors": [
"https://japmlaqu.mirror. aliyuncs.com"
],
"insecure-reaistries" [
"192.168.100.90:5000",
"192.168.100.91:5000"
]
}

注意：修改之后需要重启docker才会生效。

2.构建、推送镜像

2.1 执行脚本： sh build.sh

脚本位置就在项目根目录下，脚本build.sh内容如下：

#注意：以下两行命令不需要每次都执行，如果本地已经安装了项目依赖包，则可以注释掉这两行命令
#设置registry为淘宝镜像
npm set registry https://registry.npm.taobao.org
#从registry下载安装项目所需依赖包
npm install#生成dist包
npm run build#构建镜像：
#             docker build：根据dockerfile文件内容构建镜像；
#			  -f：指定Dockerfile位置，省略则默认为此脚本同目录下名为"Dockerfile"的文件；
#       	  -t：指定构建镜像的名称及版本号；192.168.100.90:5000表示私服镜像仓库地址；
#              .：制定镜像构建过程中的上下文环境目录，不能省略；
#docker build -f ./my-DockerFile -t 192.168.100.90:5000/myapp/front_dev:1.1 .
docker build -t 192.168.100.90:5000/myapp/front_dev:1.1 .#登录镜像仓库：如果192.168.100.90:5000设有密码则需要登录，如果没有则注释掉此行命令;
#docker login 192.168.100.90:5000 --username=admin --password=admin@server1#推送镜像：将镜像推送到192.168.100.90:5000仓库；这样其他人就可以直接从镜像仓库拉取构建好了的镜像。
docker push 192.168.100.90:5000/myapp/front_dev:1.1

成功执行完脚本命令就完成构建、推送镜像的操作了。
脚本中指定的Dockerfile文件内容接下来会做详细解释。

2.2 其他配置文件详解

2.2.1 Dockerfile文件

#指定所创建镜像的基础镜像为nginx，如果本地不存在，则默认会去Docker Hub下载；
FROM docker.io/library/nginx:latest
#维护作者信息
LABEL MAINTAINER="lgr<214242111@qq.com>"#删除源文件及软链接
RUN unlink /var/log/nginx/access.log
RUN unlink /var/log/nginx/error.log# 覆盖default配置：将nginx目录下defaulut.conf文件替换为my-nginx.conf配置文件
COPY my-nginx.conf /etc/nginx/conf.d/default.conf
# 将nginx下的html目录替换为dist包
COPY dist/ /usr/share/nginx/html# 拷贝证书（ssl证书：http://blog.itpub.net/69996004/viewspace-2763244)
# 上线后互联网可访问的项目都要做ssl认证，如果没有则不需要做ssl认证相关的配置；
RUN mkdir -p /etc/nginx/cert
COPY certificate/ /etc/nginx/cert#暴露端口
EXPOSE 80

该文件指定构建一个以nginx为基础的镜像，并将dockerfile同目录下的my-nginx.conf文件和dist包复制到nginx指定位置下。

2.2.2 my-nginx.conf文件

#压缩设置
#开启gzip压缩
gzip on;
#http的协议版本
gzip_http_version 1.0;
#IE版本1-6不支持gzip压缩，关闭
gzip_disable 'MSIE[1-6].';
#需要压缩的文件格式 text/html默认会压缩，不用添加
gzip_types text/css text/javascript application/javascript image/jpeg image/png image/gif;
#设置压缩缓冲区大小，此处设置为4个8K内存作为压缩结果流缓存
gzip_buffers 4 8k;
#压缩文件最小大小
gzip_min_length 1k;
#压缩级别1-9
gzip_comp_level 4;
#给响应头加个vary，告知客户端能否缓存
gzip_vary on;
#反向代理时使用
gzip_proxied off;
#上传文件大小限制
client_max_body_size 20M;#解决代理中丢失下划线信息配置
underscores_in_headers on;#监听https(端口443)，并包括ssl证书和其他ssl配置
server {listen 443 ssl;server_name myapp.custom.com.cn;# ssl认证，dockerfile文件中命令已经将ssl证书文件拷贝到nginx/目录下ssl_certificate /etc/nginx/cert/9125385_myapp.custom.com.cn.pem;ssl_certificate_key /etc/nginx/cert/9125385_myapp.custom.com.cn.key;ssl_session_timeout 5m;ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3; ssl_prefer_server_ciphers on;access_log /var/log/nginx/access.log main;error_log /var/log/nginx/error.log error; root /usr/share/nginx/html;# 配置vue刷新报404location / {try_files $uri $uri/ /index.html; #检测文件存在性重定向到首页目录，防止404index  index.html;}location @router {rewrite ^.*$ /index.html break;}#项目后端接口location /api/ {proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header    X-Forwarded-For  $proxy_add_x_forwarded_for;proxy_set_header    HTTP_X_FORWARDED_FOR $remote_addr;proxy_set_header    X-Forwarded-Proto $scheme;#反向代理地址proxy_pass http://192.168.200.92:8080/;proxy_connect_timeout 60000;proxy_read_timeout 60000;proxy_send_timeout 60000;}#后端文件存储服务器ip代理location /minio/ {proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header    X-Forwarded-For  $proxy_add_x_forwarded_for;proxy_set_header    HTTP_X_FORWARDED_FOR $remote_addr;proxy_set_header    X-Forwarded-Proto $scheme;proxy_pass http://192.168.200.92:10001/;proxy_connect_timeout 60000;proxy_read_timeout 60000;proxy_send_timeout 60000;}	#后端从某数据中心1拉取数据的接口代理location /dcapi/ {proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header    X-Forwarded-For  $proxy_add_x_forwarded_for;proxy_set_header    HTTP_X_FORWARDED_FOR $remote_addr;proxy_set_header    X-Forwarded-Proto $scheme;#反向代理地址, 对应的是上面设置的upstream的名字。proxy_pass http://192.199.201.12:9010/;proxy_connect_timeout 60000;proxy_read_timeout 60000;proxy_send_timeout 60000;}#后端从某数据中心2拉取数据的接口代理location /infoapi/ {proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header    X-Forwarded-For  $proxy_add_x_forwarded_for;proxy_set_header    HTTP_X_FORWARDED_FOR $remote_addr;proxy_set_header    X-Forwarded-Proto $scheme;proxy_pass http://192.134.200.21:9999/;proxy_connect_timeout 60000;proxy_read_timeout 60000;proxy_send_timeout 60000;}
}# 监听http（端口80），并将所有的http请求重定向到https
# nginx实现http自动跳转https：https://cloud.tencent.com/developer/article/2253799
server {listen       80; #监听80端口server_name  myapp.custom.com.cn; #请求域名return      301 https://$host$request_uri; #重定向至https访问。
}

本文件配置了后端服务反向代理、http请求重定向到https。

3.部署镜像服务

3.1 执行脚本

bash deploy.sh start myAppService my-compose.yaml
在镜像所在服务器的（deploy.sh、my-compose.yaml文件）目录下执行此脚本命令即可。
说明：myAppService为自定义的服务名，my-compose.yaml是与deploy.sh脚本在同目录下的compose文件。deploy.sh脚本内容如下：

#!/bin/bash
cmd="$1"
service="$2"
config="$3"
basepath=$(cd `dirname $0`; pwd)login(){docker login 192.168.100.99:5000 --username=admin --password=admin@server1
}start(){#如果192.168.100.90:5000设有密码则需要登录，如果没有则注释掉此行命令;#docker login 192.168.100.90:5000 --username=admin --password=admin@server1echo "启动/更新服务"#部署镜像，# -c , --compose-file:指定stack file的路径位置#--with-registry-auth，向swarm代理发送registry认证详细信息docker stack deploy -c $basepath/$config $service --with-registry-auth
}down(){docker stack rm $service
}# 查询stack服务中的容器运行状态
ps(){docker stack ps $service
}usage(){echo "start version - 启动/更新服务"echo "down - 删除服务"echo "ps - 查看服务中容器的运行状态"echo "login - 登录镜像仓库"
}if [[ $cmd = "start" ]]; thenstart
elif [[ $cmd = "down" ]]; thendown
elif [[ $cmd = "ps" ]]; thenps
elif [[ $cmd = "login" ]]; thenlogin
elseusage
fi

3.2 compose文件

my-compose.yaml文件内容如下：

#指定compose文件版本
version: '3'
#定义所有的service
services:#定义第一个service，起名为frontfront:#镜像名称必须要与build.sh中起的名称一模一样image: 192.168.100.90:5000/myapp/front_dev:1.1deploy:replicas: 1update_config:parallelism: 1delay: 10srestart_policy:condition: anydelay: 10smax_attempts: 3window: 120sresources:limits:memory: 512Mreservations:memory: 128Mports:#80端口映射到8888- "8888:80"- "443:443"

本文件创建了一个名为“front”的service，也可以在下面继续添加其他服务。（一般情况下将前端服务和后端服务都配置到同一个compose文件中，这样就可以通过deploy.sh同时部署前后端。）

4.docker stack常用命令

启动服务后可通过docker命令查看服务状态：
docker stack ls 查看服务列表
docker stack ps 服务名 查看服务状态
docker stack ps 服务名 --no-trunc 查看服务状态，不要截断输出
docke stack rm 服务名 删除服务