jenkins+docker+nginx服务并访问vue项目

大致说明

现在有两个服务器A,B
A:部署jenkins
B:部署nginx+vue

利用jenkins自动下载vue项目，打包发送到远程的B服务器，在B服务器中docker中部署nginx，利用nginx作为web服务器

前提准备

前提工具B中安装docker、A中安装jenkins
jenkins安装部署在docker中可以看另一篇文章

开始动手

jenkins部署

配置全局变量

配置git param

配置git

这里你需要将宿主机中的key配置到代码托管平台（github、gitee）
然后宿主机中测试下，能不能下载代码

构建后执行npm 构建

这里可能需要root权限

远程ssh命令（如果不需要发送文件则忽略）

首先配置A和B 服务器免密码登录
如果jenkins部署在docker中

# 进入jenkins容器
docker exec -it ${容器id} /bin/bash
#生成ssh-key，注意将.ssh/文件夹放在dokcer 中jenkins_home/.ssh
ssh-keygen -C "doker_jenkins"

# 将ssh key 配置到B服务器
ssh-copy-id -i /var/jenkins_home/.ssh/id_rsa.pub root@B.IP

# 测试下能不能免密码登录
ssh root@B.IP

如果jenkins直接在宿主机中

ssh-keygen -C "jenkins"

# 将ssh key 配置到B服务器
ssh-copy-id -i /root/.ssh/id_rsa.pub root@B.IP

# 测试下能不能免密码登录
ssh root@B.IP

jenkins 配置远程服务器

系统管理 -> 全局配置

找到 Publish over SSH

然后测试下，出现success则ok
，
在B服务器中创建项目的目录
新建脚本build.sh

vim build.sh

#将远程的dist文件夹
rsync -auv --delete --progress \
root@118.25.194.36:/home/jenkins/workspace/erp_view/dist /opt/webview/erp_view

继续jenkins配置

B 服务器中构建nginx

有两种方式：
一个nginx容器，多个vue项目
一个nginx容器，一个vue项目

一个nginx容器，一个vue项目

思路：用dockerfile在镜像生成时就直接打包
上面jenkins最后发送远程文件传输是将dist文件夹发送到B中的/opt/webview/erp_view
那么目录就是这样

opt
|- webview
	|- erp_view
		|- build.sh
		|- dist
			|- index.html
			|- static
			

现在在erp_view 下新增Dockerfile文件

# 设置基础镜像
FROM nginx:1.15
# 定义作者
MAINTAINER hgf
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY /dist/  /usr/share/nginx/html/

build.sh新增如下内容

docker build -t erp_nginx .
imageId=`docker images | grep erp_nginx | awk '{print $3}'`
docker run -d --name erp_nginx -p 8035:80  ${imageId}

如果最后nginx没有映射过去，进到nginx容器查看/usr/share/nginx/html/目录下是否有index.html

一个nginx容器，多个vue项目

#首先拉一个镜像
docker pull nginx 
#简单运行起来(主要是为了拿到配置文件)
docker run --name nginx -d ${镜像id}
# 将docker中nginx的conf.d/ 文件夹, nginx.conf 配置文件复制到宿主机
docker cp ${容器id}:/etc/nginx/conf.d /home/nginx
docker cp ${容器id}:/etc/nginx/nginx.conf /home/nginx
#将原来的容器删除
#正式启动nginx容器
docker run -d --name nginx \
 -p 8084:80 \
 -v /home/nginx/nginx.conf:/etc/nginx/nginx.conf \
 -v /home/nginx/logs:/var/log/nginx \
 -v /home/nginx/conf.d:/etc/nginx/conf.d \
 -v /opt/webview:/usr/share/nginx/html \
${镜像id}

此时修改/home/nginx/nginx.conf新增location

server {
      listen 80 default_server;
      server_name localhost;

      location  /{
        root /usr/share/nginx/html/erp_view/dist;
        index index.html;
      }
      location  /erp2 {
        root /usr/share/nginx/html/erp_view/dist;
        index index.html;
      }
  }

如果有多个vue项目只要新增location即可,修改之后记得重启

最后

jenkins构建之后，访问

这里在下有一个没搞出来
一个nginx对应多个vue方案时
访问ip:port/erp 时页面404，不知道为啥，希望高人指点