江苏龙网

  1. 主页 > 生活百科 > >

Jenkins+Docker一键打包部署Vue项目步骤详解

vue


Jenkins+Docker一键打包部署Vue项目步骤详解

文章插图
一、服务器环境配置 前面说明了服务器Nginx的安装和配置，这里稍微有些不同，但是因为此文是用Nginx镜像和前端镜像页面同时部署的方式来打包发布的 ， 所以这里不再需要建立
/data/contAIner/nginx/html目录，因为要发布的静态页面已经在Nginx镜像中的/nginx/html目录了 。这里也减少了手动部署安装Nginx的步骤，而是在Jenkins任务中调用shell命令自动执行安装 。
1、新建Dockerfile文件，用于定义Nginx镜像，及将打包成功的静态文件复制到镜像中 ， 此文件放在前端项目的根目录下 ， Jenkins打包时会从此处查找Dockerfile文件 。FROM nginx:latest# 维护者信息MAINTAINER gitegg# 将生成的静态页面文件复制到nginx的/usr/share/nginx/html/目录COPY dist/ /usr/share/nginx/html/# 容器启动时运行的命令CMD ["nginx", "-g", "daemon off;"]2、部署及备份目录准备
  • 新建 /opt/tmp 目录 ， 用于Jenkins打包后，通过 Publish Over SSH插件将包传输到服务器的临时目录（如果前面创建过 ， 这里无需再创建） 。
  • 新建 /opt/bak 目录，用于存储所有部署过的包备份，方便后续版本回滚 。此目录可能会占用很大空间 ， 所以需要选择一个磁盘空间大的挂载目录（如果前面创建过，这里无需再创建） 。
  • 新建 /opt/script 目录，用于Jenkins将包传输完成之后，执行安装、备份操作的相关命令脚本（如果前面创建过，这里无需再创建） 。
  • 新建 /data/container/nginx/www ， 映射Nginx容器内的/var/www目录 。
  • 新建 /data/container/nginx/logs ， 映射Nginx容器内的/var/log/nginx目录，存放nginx运行日志 。
  • 新建 /data/container/nginx/etc，映射Nginx容器内的/etc/nginx目录
  • 新建 /data/container/nginx/etc/nginx.conf，映射Nginx容器内的/etc/nginx/nginx.conf配置文件
mkdir -p /opt/tmp /opt/bak /opt/script /data/container/nginx/www /data/container/nginx/logs/data/container/nginx/etcchmod -R 777 /opt/tmp /opt/bak /opt/script /data/container/nginx/www /data/container/nginx/logs/data/container/nginx/etc3、根据系统部署要求编写Nginx配置文件nginx.conf，以下是简单的配置方法，正常情况下https请求还需要配置ssl证书 ， 还有ipv6配置等 ， 后面详细讲解Nginx配置 。一定要将修改后的nginx.conf文件放到/data/container/nginx/etc/目录下 ， 否则nginx启动时会报错找不到配置文件 。server {listen 80;server_name域名;gzip on;gzip_buffers 32 4K;gzip_comp_level 6;gzip_min_length 100;gzip_types Application/JAVAscript text/css text/xml text/plain application/x-JavaScript image/jpeg image/gif image/png;gzip_disable "MSIE [1-6].";gzip_vary on;#charset koi8-r;access_log/var/log/nginx/portal.access.logmain;location / {root /nginx/html/gitegg_portal;try_files $uri $uri/ /index.html;indexindex.html index.htm;}location /gitegg-api/ {proxy_set_header Host $http_host;proxy_set_header X-Real-Ip $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_pass http://172.17.0.1:8080/;}}4、部署脚本编写说明
  • 定义入参，可以通过Jenkins任务将参数传入脚本中，我们定义了下面7个参数：
    container_name=portal-server ： 容器名称image_name=portal-server ： 镜像名称version=latest ： 镜像版本portal_port=80： 宿主主机端口映射server_port=80： 容器内服务端口portal_ssl_port=443： 宿主主机端口映射serve_sslr_port=443： 容器内服务端口
  • 对参数进行检查，是否未传入参数，这里根据自己的实际情况判断，比如必须传入哪些参数，就设置参数的个数不能小于几 。
echo "param validate"if [ $# -lt 1 ]; thenecho "you must use like this : ./publish_docker_portal.sh <container_name> <image_name> <version> [portal port] [server port] [portal ssl port] [server ssl port]"exitfi
  • 入参赋值，如果有参数传入，则取服务参数，如果没有参数传入则取默认值
 if [ "$1" != "" ]; thencontainer_name="$1"fiecho "container_name=" $container_nameif [ "$2" != "" ]; thenimage_name="$2"fiif [ "$3" != "" ]; thenversion="$3"fiecho "version=" $versionif [ "$4" != "" ]; thenportal_port="$4"fiecho "portal_port=" $portal_portif [ "$5" != "" ]; thenserver_port="$5"fiecho "server_port=" $server_portif [ "$6" != "" ]; thenportal_ssl_port="$6"fiecho "portal_ssl_port=" $portal_ssl_portif [ "$7" != "" ]; thenserve_sslr_port="$7"fiecho "serve_sslr_port=" $serve_sslr_port


推荐阅读


上一篇：为什么越来越多的人选择PostgreSQL，放弃了MySQL

下一篇：在 Linux 文件系统中使用 attr 添加扩展属性