jenkins+docker+nginx

jenkins上构建的shell脚本

关于脚本第一行的 #!/usr/bin/python 的解释，相信很多不熟悉 Linux 系统的同学需要普及这个知识，脚本语言的第一行，只对 Linux/Unix 用户适用，用来指定本脚本用什么解释器来执行。
有这句的，加上执行权限后，可以直接用 ./ 执行，不然会出错，因为找不到 python 解释器。
#!/usr/bin/python 是告诉操作系统执行这个脚本的时候，调用 /usr/bin 下的 python 解释器。
#!/usr/bin/env python 这种用法是为了防止操作系统用户没有将 python 装在默认的 /usr/bin 路径里。当系统看到这一行的时候，首先会到 env 设置里查找 python 的安装路径，再调用对应路径下的解释器程序完成操作。
#!/usr/bin/python 相当于写死了 python 路径。
#!/usr/bin/env python 会去环境设置寻找 python 目录，可以增强代码的可移植性，推荐这种写法。

#!/bin/bash
npm install 
VERSION=$(date "+%Y%m%d-%H%M%S")  
GIT_SHA_SHORT=`git rev-parse --short=8 ${GIT_COMMIT}`

//docker登录的账号名和密码
docker login -u 66666666 -p 888888888 tencentyun.com

//设置两个参数
sh ./deploy/build_docker.sh ${env} jenkins-${env}-${VERSION}-${GIT_SHA_SHORT}

项目中.build_docker.sh文件：

#第一行的内容指定了shell脚本解释器的路径，而且这个指定路径只能放在文件的第一行。第一行写错或者不写时，系统会有一个默认的解释器进行解释。
#!/bin/bash  

# 仓库及镜像定义
DOCKER_NAME="web" # 需修改
DOCKER_FILE="deploy/Dockerfile"
REPO_DOMAIN="tencentyun.com/product"

# 参数验证    $1指的是上边的第一个参数${env}
if [ ! -n "$1" ];then   //如果$1不存在，就。。
  echo '环境变量未指定: ./command.sh env';//echo打印
  exit;
fi

#环境变量
APP_ENV=$1

# 镜像版本  $2指的是第二个参数jenkins-${env}-${VERSION}-${GIT_SHA_SHORT}
VERSION=$2
if [ ! -n "$2" ];then
  VERSION=`date '+%Y%m%d%H%M%S'`
fi

# 打包(需修改)  使用yarn打包  正常流程
yarn
yarn build:$APP_ENV
tar -zcf dist.tar.gz dist  
# cd dist
# tar -zcvf mock_web.tgz ./
# 删除原有本地最新版本镜像
docker rmi "$DOCKER_NAME:latest"
docker images | grep "$REPO_DOMAIN/$DOCKER_NAME" | awk '{print $3}'| xargs docker rmi

# 生成docker镜像
docker build -t "$DOCKER_NAME:latest" -f $DOCKER_FILE .

# 打docker镜像tag
docker tag "$DOCKER_NAME:latest" "$REPO_DOMAIN/$DOCKER_NAME:$VERSION"

# push到腾讯云
docker push "$REPO_DOMAIN/$DOCKER_NAME:$VERSION"

# 删除原有本地docker none镜像
# docker images | grep "none" | awk '{print $3}' | xargs docker rm

Nginx

Nginx 是一个高性能的HTTP和反向代理服务器，同时也是一个 IMAP/POP3/SMTP 代理服务器。

静态资源服务器
动态匹配
反向代理
Gzip 压缩
负载均衡

项目中的nginx.conf ----Nginx全局的配置文件：（参考：前端想要了解的Nginx）

user nginx;
worker_processes auto; #设置工作进程的数量
error_log /wdsgbi-web-logs/error.log;
pid /run/nginx.pid;

#处理连接
events {
    #设置连接数
    worker_connections 1024;
}

http {
    #日志格式，定义别名为main
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
                      
    #制定日志输入目录
    # access_log  /mock-web-logs/access.log  main;

    sendfile            on;#调用sendfile系统传输文件，静态文件直接输出 提高性能
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;#客户端与服务端连接超时时间，超时自动断开
    types_hash_max_size 2048;
    client_max_body_size 10m;

    include             /etc/nginx/mime.types;#文件拓展名查找集合
    default_type        application/octet-stream;#当查找不到对应类型的时候默认值

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;

    #虚拟主机--搭建静态站点
    #server配置虚拟主机的相关参数，可以有多个
    server { 
        listen       80 default_server; # 端口
        listen       [::]:80 default_server;
        server_name  _;  # 匹配请求中的host值，找到对应的虚拟主机的配置
        root         /usr/share/nginx/html/dist/; # 查找资源的路径
        location ~* \.(css|js)$ {  #开启gzip静态压缩
            gzip_static on;# 如果已经通过webpack 或者 rollup 打包出来了gz 文件， nginx 配置 gzip_static on；开启代理静态gzip文件，就不需要服务器再进行动态压缩，节省服务器资源
        }
        # nginx 动态压缩，对每个请求先压缩再输出。
        # nginx 静态压缩，使用现成的扩展名为 .gz 的预压缩文件
        
        #location配置请求路由，处理相关页面情况
        #路由--监听请求路径
        location ^~ /wdsgbi/ {   #以wdsgbi开头的path使用代理
            proxy_pass http://wdsgbi-api:10000/;#代理服务器
        }
        
        # 反向代理解决跨域  $http_host、$remote_addr、$scheme 为Nginx内置变量。
        #location /api {   
          # 请求host传给后端
          # proxy_set_header Host $http_host;   #proxy_set_header允许重新定义或添加字段传递给代理服务器的请求头 
          # 请求ip 传给后端
          # proxy_set_header X-Real-IP $remote_addr;
          # 请求协议传给后端
          # proxy_set_header X-Scheme $scheme;
          # 路径重写 #rewrite 根据rewrite后的请求URI，将路径重写，如：接口路径为 /user, 我们可以请求 /api/user。（为什么需要重写uri？因为在使用Nginx做反向代理的时候，需要匹配到跨域的接口再做转发，为了方便匹配，会人为的在原接口中添加一段路径（或标示， 如例子中的api），因此需要在匹配之后、转发之前把添加的那段去掉，因此需要rewrite。）
          # rewrite  /api/(.*)  /$1  break;
          # 代理服务器
          # proxy_pass http://localhost:9000; //应用服务器HTTP地址
        }
       
        location / {
           //按顺序检查文件是否存在，返回第一个找到的文件或文件夹(结尾加斜线表示为文件夹)，如果所有的文件或文件夹都找不到，会进行一个内部重定向到最后一个参数
            try_files $uri $uri/ /index.html;  //可以用来适配H5 history API，如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面
        }
        
        error_page 404 /404.html;
        location = /40x.html {
        }
        
        #  = 表示精确匹配。只有请求的url路径与后面的字符串完全相等时，才会命中（优先级最高）。
        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
            root /source/error_page;
        }
    }
}