记一次【docker】【jenkins】【vue】自动化部署

2021-01-16 16:59:43 阅读：288 来源： 互联网

标签：web mining vue nginx compose jenkins docker

一并把前端VUE项目的构建部署一块儿记下

jenkins配置，主机配置啥的就不说了，由于是vue我们需要用到一个插件，老版本jenkins似乎没法儿下nodejs的插件，只能手动安装，新版jenkins可以直接搜索到nodejs插件。

NodeJs插件安装：
在这里插入图片描述
之后是全局配置：

有的nodeJS插件jenkins安装完之后没有版本号可以选择需要导入个文件：
文件下载：
链接：https://pan.baidu.com/s/1RiDPMDchsaEBe2iBEAnYbA
提取码：zqsj

导入到jenkins外挂目录，/jenkins_home/updates里重启jenkins

建立项目
选择NodeJS版本
在这里插入图片描述

比较麻烦的地方是构建
在这里插入图片描述

#!/bin/bash -v
rm -rf ./dist   #移除原有包
#npm config set registry https://registry.npmjs.org   #设置NPM源
#npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass  #特殊包源处理
nrm ls
yarn upgrade
yarn install
yarn build:prod

这里NPM也可以直接打包，一般主要错误也就是这块儿，大多是包没下好，源的问题，然后可以吧node_modules移除重新下一遍，有问题解决问题。

特别要注意的个人采坑地方
有的jenkins容器是基于Ubantu或者CenterOs然后版本什么的里面会存在权限，以及中文处理的问题。
当时因为我图片文件里含有中文，报错又报不准。卡了很久，最后重新构建了个镜像

Jenkins images Dockerfile:

FROM jenkins/jenkins:2.263.1-lts-centos7
MAINTAINER  kongzhiqia@qq.com
USER root
RUN ln -sf /usr/share/zoneinfo/Asia/Shanghai  /etc/localtime
ENV TZ Asia/Shanghai
RUN yum install kde-l10n-Chinese -y \
    && yum install glibc-common -y \
    && localedef -c -f UTF-8 -i zh_CN zh_CN.utf8
ENV LC_ALL zh_CN.UTF-8
USER jenkins

启动脚本
StartUp.sh

docker run -itd \
-p 8000:8080 \
--restart=always \
-v /data/jenkins_home:/var/jenkins_home \
-v /var/run/docker.sock:/var/run/docker.sock  \
-v $(which docker):/usr/bin/docker \
--name jenkins \
--privileged=true \
docker2.usscity.com/jenkins/jenkins:2.263.1-lts-centos7-with-zh

这里也有个问题的就是docker.sock的有可能会出现宿主跟主机权限不同步的问题，有可能没有权限，授权既可

到这里我是我踩过的坑

——————————————————————————————

接着是构建镜像反向代理nginx的配置
Dockerfile：

FROM nginx:1.13.3

RUN ln -sf /usr/share/zoneinfo/Asia/Shanghai  /etc/localtime
ENV TZ Asia/Shanghai
COPY dist/ /usr/share/nginx/html/
RUN rm /etc/nginx/nginx.conf
COPY nginx.conf /etc/nginx/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;
	
	add_header Access-Control-Allow-Origin *;
	add_header Access-Control-Allow-Headers X-Requested-With;
	add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
	
    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;
}

build-images.sh:

#!/bin/bash
rm -rf ./dist
cp -r ../dist ./dist
echo "\n\n====================打包完成，删除SVN缓存文件===========================\n"
find ./dist -type d -name ".svn" | xargs rm -rf 

echo "\n\n====================MAVEN打包完成，开始构建docker镜像===========================\n"
docker build -t docker2.usscity.com/mining/mining-server-web-k:v2 .

echo "\n\n====================镜像已经归档，在80服务器启动容器===========================\n"
docker login --username *** --password **** docker2.usscity.com
docker push docker2.usscity.com/mining/mining-server-web-k:v2

最后是启动以及更新拉下最新镜像docker-compose：
在这里插入图片描述
docker-compose-local-mining.yml：

version: '2'
services: 
    mining-local-web:
        container_name: mining-server-web-k
        restart: always
        image: docker2.usscity.com/mining/mining-server-web-k:v2
        ports:
            - '18315:80'
        volumes:
			#一般为了方便后续配置，通常讲vue配置文件外挂
            - ./config/mining-local-web/config.js:/usr/share/nginx/html/static/config/config.js 
            #nginx配置
            -  /data/mining-local-web/logs:/var/log/nginx
networks:
  default:
    external:
      name: usscity

mining-server-update.sh：

#!/bin/bash -v
echo "\n\n====================获取最新镜像===========================\n"
docker login --username ****--password **** docker2.usscity.com
docker-compose  -f docker-compose-local-mining.yml  pull mining-server-web-k
echo "\n\n====================停止===========================\n"
docker-compose -f docker-compose-local-mining.yml  stop mining-server-web-k
echo "\n\n====================删除===========================\n"
docker-compose -f docker-compose-local-mining.yml  rm -f mining-server-web-k
echo "\n\n====================重新创建===========================\n"
docker-compose -f docker-compose-local-mining.yml  create mining-server-web-k
echo "\n\n====================启动===========================\n"
docker-compose -f docker-compose-local-mining.yml  start mining-server-web-k

之后构建有问题一一解决

再见！

标签：web,mining,vue,nginx,compose,jenkins,docker
来源： https://blog.csdn.net/qq_43162050/article/details/112707752

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

记一次【docker】【jenkins】【vue】自动化部署

一并把前端VUE项目的构建部署一块儿记下