vue(dist) + docker + nginx + shell 一键部署方案

在正式开始之前首先大家要了解什么是docker和nginx，这里不做官方说明

 

简单概述一下docker ， 仅个人通俗理解“docker可以理解为一个app商场，镜像为软件下载包，容器为安装下载包的程序，咱们的部署就相当于一个程序安装的过程”

本次分享的内容是如何通过sh脚本驱动一键部署，话不多说，下面正式进入主题

1、拉取ngxin镜像

程序基于nginx镜像

docker pull nginx // 拉取nginx镜像
docker images  // 查看所有镜像

docker images | grep nginx 查看包含nginx的镜像

默认latest 最新版本，也可以nginx:指定tag版本

2、 项目基础目录

 3、dockerfile配置

打包后的前端文件dist 放置到nginx的目录

用自己的conf替换nginx的默认conf

# 使用nginx镜像
FROM nginx
# 作者
MAINTAINER zhangwq
# 添加自己的 nginx.conf到nginx目录
ADD ./nginx.conf /etc/nginx/conf.d/default.conf
# 把刚才生成dist文件夹下的文件copy到nginx下面去 入口文件
COPY ./dist/  /usr/share/nginx/html/

# CMD ['npm','run','start']

 4、nginx配置

# 反向代理是位于一个或多个 Web 服务器前面的服务器,拦截来自客户端的请求
server {
  listen      80;
  server_name localhost;
  # location = /uri    = 表示精确匹配，只有完全匹配上才能生效
  # location ^~ /uri    ^~ 开头对URL路径进行前缀匹配，并且在正则之前。
  # location ~ pattern    开头表示区分大小写的正则匹配
  # location ~* pattern    开头表示不区分大小写的正则匹配
  # location /uri    不带任何修饰符，也表示前缀匹配，但是在正则匹配之后
  # location /    通用匹配，任何未匹配到其它location的请求都会匹配到，相当于switch中的default
  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
  }
  location /api {
    proxy_pass https://api.apiopen.top;
    proxy_redirect     off;
    # 始请求host，比如请求的时候HOST的值是http://test.com，那么反代后还是http://test.com
    proxy_set_header   Host                 $host;
    # 是指客户端的真实IP
    proxy_set_header   X-Real-IP            $remote_addr;
    proxy_set_header   X-Forwarded-For      $proxy_add_x_forwarded_for;
    # X-Forwarded-Proto 就是为了正确地识别实际用户发出的协议是 http 还是 https。
    proxy_set_header   X-Forwarded-Proto    $scheme;
    # Enables WS support
    # Connection头部和Upgrade头部有不同的语义和使用场景：
    # Connection: Upgrade 表示Upgrade是一个hop-by-hop的字段。这个头部是给proxy看的
    # Upgrade: websocket 表示浏览器想要升级到WebSocket协议。这个头部是给最终处理请求的程序看的。
    # 如果只有Upgrade: websocket，说明proxy不支持WebSocket升级，按照标准应该视为普通HTTP请求。    
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    # add_header 'Access-Control-Allow-Header' 'Content-Type,*';
  }    

  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
    root html;
  }
}

5、shell一键部署脚本

代码内有详细注释。执行命令“/bin/sh build.sh 端口号”，通过脚本命令集合驱动docker和nginx构建

#!/bin/bash
# 基础版本demo分享
prot=$1
if [ -z $prot ];then 
  echo 退出 请输入端口号! 
  exit 
fi
# docker --help 查看所有命令   
# 如果有启动---获取当前镜像的容器id 并删除
container_id=$(docker ps -a | grep vue-demo | sed -n "1p"| awk '{print $1}');
if [ -n "$container_id" ];then 
  echo "\033[31m have containerId $container_id removeing..... \033[0m"
  # 删除容器 && 删除镜像
  docker rm -f $container_id &&  docker rmi vue-demo:1.0
  echo "\033[32m remove success \033[0m"
fi

echo start build && npm run build && echo build success
# 打包镜像
echo start docker build && docker build -t vue-demo:1.0 . && echo "\033[32m docker build success \033[0m"
echo start serve
# 启动 -d 后台启动容器 -p映射本地端口 
editionLog=$(docker run -d --name vue-demo-run -p $prot:80 vue-demo:1.0)
# rm -rf ./test.log
dataString=`date +%Y%m%d%H%M%S`
# 输出日志文件
nohup docker logs -f ${editionLog} > ./$dataString.log & 
echo "\033[32m start success opening.... \033[0m"



# 自动打开入口页面
open http://127.0.0.1:$prot

# 下面内容为扩展
# tar包的目的主要是为了跨端，相当于程序包传给朋友，朋友安装
# docker save -o ./vue-demo.tar vue-demo:1.0
# docker load < vue-demo.tar  会load出程序镜像。


# 常规来说是上传到镜像仓库统一管理，服务器拉去镜像进行部署
# read -p '是否上传镜像到仓库?[y/n]' isContinue
# if [ ${isContinue} = 'y' ]; then
  #echo upload images
  # docker tag :标记本地镜像,将其归入某一仓库
  # docker tag vue-demo:1.0 reg.hdec.com/dam/vue-demo:1.0
  # 上传镜像到仓库
  #docker push eg.hdec.com/test/vue-demo:1.0
  #echo "\033[46;37m 上传成功，本次分享结束 \033[0m"
  # else
  # exit
#fi
# sudo docker exec -it 775c7c9ee1e1 bash   进入容器可更改
# docker cp 7f983e614960:/usr/share/nginx/html/index.html pwd 拷贝文件到本地
# docker save -o ./vue-demo.tar vue-demo:1.0  跨平台部署 save   
# docker load < tar  load本地镜像

最终成果

 /bin/sh build.sh 8088

本次分享就到这了，有描述不清楚的地方大家可以在底下留言

ps：分享不易，如果对大家有帮助，可以点赞收藏支持鼓励一下。谢谢观看