docker+jenkins+vue+nginx+gitee的自运维部署

docker+jenkins+vue+nginx+gitee的自运维部署

部署思路：

一 ：首先正常手动部署的情况下其实很简单

1.在已经完成的项目根目录下

npm install
npm run build

2.顺利的话会生成一个构建后的目录 dist
3.然后将这个文件夹放在 nginx的默认生成的html文件中
4.随后就是在默认生成的conf文件总中更改配置文件nginx.conf内容，如下：

nginx.conf

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
     
    worker_connections  1024;
}


http {
     
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    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  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
    server {
        listen       8888;
        server_name  localhost;
                location /{
                        root /usr/share/nginx/html/dist;
                        index  index.html index.htm;

                }


        #charset koi8-r;

        #access_log  logs/host.access.log  main;

                #下面为负载均衡例子，默认为轮询访问
                #location  / {
        #    root   html;
                #       proxy_pass http://myservers;
        #   index  index.html index.htm;
        #}
        

        #下面两个为反向代理例子
        #location ~ /admin/ {
        #    root   html;
                #       proxy_pass http://localhost:8888;
        #    index  index.html index.htm;
        #}
                #location ~ / {
        #    root   html;
                #       proxy_pass http://127.0.0.1:8082;
        #    index  index.html index.htm;
        #}

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }
}

5. 请注意 /usr/share/nginx/html/dist这个地址是docker 的nginx容器中的地址，因此在进行docker run xxxx 的时候需要进行目录挂载，也就是需要将dist进行实时映射。

二：开始加上jenkins部署

前提：

• docker已经下载完毕，jenkins、nginx已经在docker中拉取并且部署完毕。

• 很多jenkins步骤的搭建在后端那里搞完了 如
  记录下简易搭建docker+jenkins+springboot+gitee的自运维部署。

• nginx的安装和部署在这 centos7.6服务器 docker配置环境

主要思路：.jenkins拉取代码后，需要对vue项目代码进行上面一步骤的1操作，将dist 文件夹放到 能够映射到 docker 外面的 地址中 ，然后nginx 也将docker 外面存放dist文件夹的地址也 挂载到自己那里去。最终的效果是：docker中的jenkins 在挂载好的文件夹中，随意增加一个文件后，docker 中的nginx的文件夹也会出现同一个文件夹。

具体操作注意：
1.挂载目录
在后端部署的时候我的jenkins挂载目录是这样的

 /mydata/jenkins:/var/jenkins_home

/var/jenkins_home是jenkins容器中存在的，自动拉取git代码到jenkins时，它会拉到默认的 /var/jenkins_home/workspace 文件夹中，虽然挂的是一整个目录，但拉取下来后一般会复制操作 到 /var/jenkins_home/app/xxx(项目名）（这个app和xxx项目文件夹是自己创建的，没有就创建一个）

/mydata/jenkins 是docker 外面存放的地址，jenkins中的vue项目存在目录是 /var/jenkins_home/app/xxx(项目名） 那么nginx需要挂载的目录就是 /mydata/jenkins/app/xxx(项目名)/html

比如下图（上面说nginx部署那里截的）圈起来的地方就要改成上面的 /mydata/jenkins/app/xxx(项目名)/html

2.开始jenkins设置项目

新建一个自由项目，配置的内容（拉取代码那里）大概跟后端的差不多，我只讲不同的地方

1.jenkins需要下载一个nodejs插件，在系统管理-插件那里下载插件，然后在系统管理-全局工具配置那里 增加nodejs自动安装即可
2.构建环境这里需要勾选这个

3.执行shell命令

这里弄两个shell是为了让它构建完再复制，不知道是否可行。
第一个
这里执行的时候已经拉取成功并定位到 /var/jenkins_home/workspace/xxx(项目) 目录下了

echo $PATH
node -v
npm -v
rm -rf node_modules
rm -rf dist
rm package-lock.json
npm cache clear --force
npm config set registry https://registry.npm.taobao.org
npm install --max-old-space-size=150
npm run build --max-old-space-size=150

–max-old-space-size=150 后面这两个是因为我是2g内存 ，构建起码要700M内存，我的后端服务搭完剩500M内存，没办法只能通过限制，但是这样搞并没什么用，最后只能先把后端停了再起前端的，本着就是拿来学习用的~，可以去掉。

第二个

dist_NAME=dist
# 源dist路径 
#jenkins 拉取代码后工作目录 
dist_PATH=/var/jenkins_home/workspace/space-admin-webvue
#app需要自己提前创建。
dist_WORK_PATH=/var/jenkins_home/app/space-admin-webvue

#复制dist到执行目录
echo "复制dist到执行目录：cp $dist_PATH/$dist_NAME $dist_WORK_PATH" 
cp -r $dist_PATH/$dist_NAME $dist_WORK_PATH
echo "复制dist完成"
cd $dist_WORK_PATH
#修改文件权限
chmod 755 $dist_NAME
echo "完成."

完工~~~记得开放端口