使用Docker+Jenkins+Pipeline将Vue项目部署到Nginx服务器

Dear 丶 2022-03-06 04:16 617阅读 0赞

## 安装Docke ##

不知道怎么安装Docker可以看我之前的博文：[使用Jenkins+Pipeline+Docker将Spring Boot应用部署到Tomcat][Jenkins_Pipeline_Docker_Spring Boot_Tomcat]

## 安装Jenkins ##

这里安装Jenkins跟之前安装jenkins有一些区别。因为我们的Jenkins现在是安装在docker容器里面的。而我们的nginx服务器也是安装在docker容器里面的。所以我们需要把jenkins里面的目录挂载到我们的宿主主机上，然后把我们的nginx服务器的目录也挂在在同一个宿主主机的目录上。这样jenkins就可以把build好的项目通过共享的目录放到nginx服务器上面。这样就实现了两个docker容器之间的文件共享  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70]  
当然可能我这样作比较复杂，但这是我自己的实践方式，当然这个过程中也遇到很多坑，主要是记录一下，避免以后踩坑。。

至于怎么挂载docker中的目录到宿主机器目录可以参考下面：  
[https://blog.csdn.net/weixin\_37773766/article/details/80702926][https_blog.csdn.net_weixin_37773766_article_details_80702926]  
[https://blog.csdn.net/zhuchunyan\_aijia/article/details/80094644][https_blog.csdn.net_zhuchunyan_aijia_article_details_80094644]  
[https://www.cnblogs.com/greatadmin/p/5005454.html][https_www.cnblogs.com_greatadmin_p_5005454.html]

我这里用的是这个例子：

> docker run --name=test -it -v /opt/test:/usr/databases docker-test /bin/bash  
> test是容器的名字，需唯一；-v表示创建一个数据卷并挂载到容器里，示例表示把宿主机的/opt/test目录挂载到容器的/usr/databases目录下；docker-test是镜像的名字

我的jenkins镜像名字叫做jenkins/jenkins，所以我的命令如下：

docker run --name=myjenkins -u 0 -it -v /nginx/resources:/nginx/resources jenkins/jenkins /bin/bash

![在这里插入图片描述][20190317203742229.png]  
然后我们也可以看到我们的容器中多了一个目录叫做nginx。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 1]

## 安装Nginx ##

安装Nginx的方式更上面也是一样的，也是需要挂载目录。

因为nginx存放资源的路径是在usr/share/nginx/html里面的，因为懒得修改配置，所以我们直接把usr/share/nginx/html的路径挂载到宿主主机的/nginx/resources上面。这样就可以把jenkins容器和nginx容器互相共享文件了。。

命令如下：

docker run --name=mynginx -u 0 -it -v /nginx/resources:/usr/share/nginx/html nginx /bin/bash

![在这里插入图片描述][20190317204552267.png]  
之后之后我们nginx也安装完毕了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 2]  
现在我们开始配置jenkins

## 配置Jenkins ##

我们首先要开启一下volumes  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 3]  
然后要做的是先配置一下端口号。。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 4]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 5]  
nginx也是一样，设置一下端口  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 6]

现在就可以开启我们jenkins的页面，开始安装jenkins。。。  
步骤之前的都一样，这里就跳过了。。

## 配置Node环境 ##

首先先下载node js插件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 7]

然后我们配置一下全局的工具。。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 8]

之后就开始创建Pipeline项目

## 创建Pipeline项目 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 9]

设置轮询  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 10]

然后开始写pipeline的脚本

node {
        def node_home
       stage('Preparation') {
           node_home = tool 'node'
           git branch: 'REL1.0', credentialsId: 'xxxxxx', url: 'https://github.com/xxxx/gallery-web.git'
       }
       stage('Install') {
          sh '${node_home}/bin/npm install'
       }
       stage('Build') {
          sh  '${node_home}/bin/npm run build'
       }
       stage('Deploy'){
           sh 'cp -rf /var/jenkins_home/workspace/gallery-web/dist/*  /nginx/resources/'
       }
      
    }

然后开始build项目。。。

然后可以看见他在下载node并解压了。。

但是之后npm install 的时候会提示你/usr/bin/env: node: No such file or directory，这个时候你就要把你的node关联到/usr/bin/node还有/usr/local/bin/node最好都关联上，npm的也可以关联上。。

关联上之后你会发现npm install的时候还是会有问题，会报ETXTBSY: text file is busy这种问题。。。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 11]  
[https://github.com/laravel/homestead/issues/922][https_github.com_laravel_homestead_issues_922]  
最后找了很多资料，有的说要换成npm5.6的版本，但是我最后发现了原因是不能在与windows共享的文件夹下时候npm install，因为我们的\\var\\jenkins\_home\\tools\\jenkins.plugins.nodejs.tools.NodeJSInstallation这整个\\var\\jenkins\_home是开启了volumesde ,与windows挂载了，所以有问题，所以我们可以直接从网上下载一个node包，然后copy到别处进行解压。。。  
所以说kitematic这个工具真的太坑了。。真的推荐不要随便用这个，不然出的问题会很多。。

我这里网上下载了一个node包node-v11.11.0-linux-x64.tar.gz，可以去我的资源页下载。。

之后我们把它放到共享目录下。。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 12]

然后我们拷贝到其他的地方。。拷贝到我们自己创建的目录下

![在这里插入图片描述][20190317221923517.png]

然后开始解压。。

tar -vxf node-v11.11.0-linux-x64.tar

然后我们关联一下node的命令还有npm的命令。。

使用  
ln -s 关联到/usr/bin还有/usr/local/bin

![在这里插入图片描述][20190317222241525.png]

![在这里插入图片描述][20190317222312646.png]

npm的也是如此。。

![在这里插入图片描述][20190317222357805.png]

之后我们的pipeline的脚本就可以改一下了。。

node {
       stage('Preparation') {
           git branch: 'REL1.0', credentialsId: 'xxxx', url: 'https://github.com/xxxxxgallery-web.git'
       }
       stage('Install') {
          sh 'npm install'
       }
       stage('Build') {
          sh  'npm run build'
       }
       stage('Deploy'){
           sh 'cp -rf /var/jenkins_home/workspace/gallery-web/dist/*  /nginx/resources/'
       }
      
    }

然后我们终于可以开始构建成功了。。  
总之在这一过程中遇到了很多问题、、、还是安安心心在windows下搞吧。。

[Jenkins_Pipeline_Docker_Spring Boot_Tomcat]: https://blog.csdn.net/cckevincyh/article/details/88584238
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70]: /images/20220306/e69265283f4440b7804386bbca07ed09.png
[https_blog.csdn.net_weixin_37773766_article_details_80702926]: https://blog.csdn.net/weixin_37773766/article/details/80702926
[https_blog.csdn.net_zhuchunyan_aijia_article_details_80094644]: https://blog.csdn.net/zhuchunyan_aijia/article/details/80094644
[https_www.cnblogs.com_greatadmin_p_5005454.html]: https://www.cnblogs.com/greatadmin/p/5005454.html
[20190317203742229.png]: /images/20220306/8849c4f2c0864d3384dff9bdd2cfeb95.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 1]: /images/20220306/0acd3f9c08d54c70bd1c7c337c81d27e.png
[20190317204552267.png]: /images/20220306/501f079186e24a7c80bf3e97a6b76224.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 2]: /images/20220306/75272dd77045435a83556068ab032b11.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 3]: /images/20220306/9f9a6e9b72574daa9492e3414fa36eeb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 4]: /images/20220306/30bf9e94a0274c658f35ca73db527cee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 5]: /images/20220306/671a3bc2de064efeb5a6eed180442281.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 6]: /images/20220306/dc44ce6981a241d6ba9226690b310e13.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 7]: /images/20220306/7bd6dca1fb7a403b9f8e5aed76ad4b3d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 8]: /images/20220306/816aee9ba17d4dc18172f6e92f196a09.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 9]: /images/20220306/08e67a3a73b54d878696a3477390bc77.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 10]: /images/20220306/97163635cfa2448eae2b5b7cca4b5466.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 11]: /images/20220306/13f191cc51f6437baaa3b85de255759d.png
[https_github.com_laravel_homestead_issues_922]: https://github.com/laravel/homestead/issues/922
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 12]: /images/20220306/878a9244c29d42d5b6ceb7162c658c5c.png
[20190317221923517.png]: /images/20220306/1b2ff06cfda04aefbf3034907ccfb8d1.png
[20190317222241525.png]: /images/20220306/cf4f9adc74f045079275162f3f9c0300.png
[20190317222312646.png]: /images/20220306/9c0cfff89eb645f687d83b8e9e13351b.png
[20190317222357805.png]: /images/20220306/cce6891c2e8644799eff988ce4c13c6d.png