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

RQ-ghylls

已于 2024-04-12 11:48:51 修改

阅读量798

点赞数

分类专栏：四.部署配置、docker、Git 文章标签：前端 docker vue.js nginx ci/cd 持续部署

于 2023-11-17 12:20:43 首次发布

本文链接：https://blog.csdn.net/qq_37992410/article/details/134437980

版权

四.部署配置、docker、Git 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

介绍：

构建镜像：通过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刷新报404
    location / {
        try_files $uri $uri/ /index.html; #检测文件存在性重定向到首页目录，防止404
        index  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@server1
    
    echo "启动/更新服务"
    #部署镜像，
    # -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" ]]; then
    start
elif [[ $cmd = "down" ]]; then
    down
elif [[ $cmd = "ps" ]]; then
    ps
elif [[ $cmd = "login" ]]; then
    login
else
    usage
fi

3.2 compose文件

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

#指定compose文件版本
version: '3'
#定义所有的service
services:
  #定义第一个service，起名为front
  front:
    #镜像名称必须要与build.sh中起的名称一模一样
    image: 192.168.100.90:5000/myapp/front_dev:1.1
    deploy:
      replicas: 1
      update_config:
        parallelism: 1
        delay: 10s
      restart_policy:
        condition: any
        delay: 10s
        max_attempts: 3
        window: 120s
      resources:
        limits:
          memory: 512M
        reservations:
          memory: 128M
    ports:
        #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 服务名 删除服务

RQ-ghylls

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
7.docker部署前端vue项目，实现反向代理配置

通过docker构建以nginx为基础的镜像，将vue生成的dist包拷贝至nginx目录下，实现项目的部署与反向代理。dockerfile、compose、nginx的配置详解；
复制链接

扫一扫