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;
#}
}
}
- 请注意 /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 "完成."
完工~~~记得开放端口