煮酒与君饮

这个屌丝很懒，什么也没留下！

热门标签

linux中vue+npm+nginx+gitee+jenkins持续集成全docker化部署（详细版）

作者：煮酒与君饮 | 2024-06-30 07:51:57

踩

linux中vue+npm+nginx+gitee+jenkins

持续集成全docker化部署（详细版）

摘要

下面我将会详细介绍我的部署过程，其中遇到的一些坑或者关键点会用红字加粗标识，希望大家开心学习快乐每一天。

本篇文章是基于有完整开发项目能力却缺乏部署知识的开发人员学习分享，偏向于运维，小白的话可以边查找资料学习完成环境开发等搭建后再进行学习。

示例：www.cjjtools.com

也可以加QQ交流群：1065452972

2、windows开发环境搭建

开发软件：Visual Studio Code

开发语言：vue.js

开发框架：ant design of vue

代码版本管理:git（gitee也是用的git）

以上都是一些必须且基础的环境，搭建方法就不再详细说明了

2.1、git或者gitee搭建（我用的是gitee所以我这里搭建gitee）

进入官网：Gitee - 企业级 DevOps 研发效能平台
注册或者登陆账号进入工作台，并按照以下步骤创建一个仓库

点击创建完成后进入仓库

执行以下代码，进行git项目初始化到远程gitee

一、初始化并创建本地git仓库

git init

二、将所有代码添加到本地仓库

git add .

三、添加提交时的注释

git commit - m "第一次提交"

四、将git进行远程连线

git remote add origin https://gitee.com/*********(您刚刚复制的那个gitee项目地址)

五、推代码更新远程仓库

git push -u origin master

至此就完成了将项目和gitee进行关联的操作

2.2、连接Linux服务器

这里我们使用Xsell6进行对服务器的连接，大家可以取官网上申请家庭或学校版的Xshell(目前好像很多网上的破解版都用不了了)

获取方法：

进入网站：https://www.netsarang.com/zh/free-for-home-school/

安装完成后进入xshell连接您的服务器

2.2、Linux服务器环境配置

将要配置的环境（此处的jdk和maven版本最好跟windows一样，避免不必要的错误）：

docker: docker的安装我之前写过一篇文章：Docker安装与配置_小城里的梦想的博客-CSDN博客

（不了解docker的也可以看一下docker的入门理解：Docker入门理解_docker小城_小城里的梦想的博客-CSDN博客）

npm：这里需要说明一下，我的npm（安装nodejs即可，nodejs自带npm）安装在了jenkins容器里面，原因是我挂载npm后再容器内依然使用不了npm命令，百度上说的一些方法我试过也不行，被迫之下只能如此。

nginx：安装nginx的docker镜像

2.2.1 nginx的docker镜像安装

docker pull nginx

随后查看是否拉取成功

随后运行nginx镜像

docker run -d --restart=always  --privileged=true  -p 80:80 --name nginx-80  -v /usr/webtools/jenkins/data/workspace/webtools/webtools-web:/usr/share/nginx/html   -v /usr/webtools/nginx/conf/nginx.conf:/etc/nginx/nginx.conf   -v /usr/webtools/nginx/logs:/var/log/nginx   nginx

注释（左边为你的服务器路径，右边为容器内路径）：

/usr/webtools/jenkins/data/workspace/webtools/webtools-web:/usr/share/nginx/html 这里挂载的是nginx的静态资源路径，也就是你前端的一些页面和js等存储的地方（对于vue来说就是你build后生成的dist文件夹，但是这里有一个需要特别注意的问题，原本这个目录应该挂载对应的就是你的dist文件夹，但是如果你挂载的是dist文件夹，每次build后这个文件夹相当于是删除了重新创建，那么nginx容器里只会识别到你删除的操作，等你重新创建后就识别不到了，因为他已经不是启动nginx的时候那个dis文件夹了。所以如果你是挂载dist文件夹，使用jenkins每一次构建都需要重启一遍nginx才能生效，所以我这里选择挂载到dist里的上一个目录，也就是项目根目录，这样根目录里面的内容变化，nginx容器里面html内容也会相应的变化了，无论是否删除）（还有一点是：/usr/webtools/jenkins/data这个路径是我的jenkins的挂载路径，下面运行Jenkins容器时需要注意对应挂载这个路径）

-v /usr/webtools/nginx/conf/nginx.conf:/etc/nginx/nginx.conf 这里挂载的是nignx的配置文件（这里也有一个药品注意的点，如果你服务器对应的目录上，没有nginx.conf这个文件，执行上面语句启动容器的时候将会报错，所有你需要再对应的文件夹下先创建一个nginx.conf文件后再执行，而这个nginx.conf你可以在windows里面先安装一个nginx把nginx.conf文件复制过来，或者你有自己经写了的直接拉过来用也可以）

-v /usr/webtools/nginx/logs:/var/log/nginx 这个就是简单易懂的日志了

我的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;
 
    server {
		listen       80;
		server_name  localhost;
 
		#charset koi8-r;
		#access_log  /var/log/nginx/host.access.log  main;
 
		location / {
			root   /usr/share/nginx/html/dist;
			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   /usr/share/nginx/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;
		#}
	}
 
}

注意点

jenkins的镜像安装

直接输入以下命令拉取jenkins

docker pull jenkinsci/blueocean

拉取成功后执行运行镜像

docker run -u root --rm -d -p 8080:8080 -p 50000:50000 -v /var/run/docker.sock:/var/run/docker.sock -v /usr/webtools/jenkins/data:/var/jenkins_home  jenkinsci/blueocean

注释（左边为你的服务器路径，右边为容器内路径）：

-v /var/run/docker.sock:/var/run/docker.sock 挂载docker的守护进程，容器内部也能调用docker命令，且与外部docker同步

-v /usr/webtools/jenkins/data:/var/jenkins_home 把jenkins的文件同步挂载到你的服务器

注意

这里需要说明一下，我的npm（安装nodejs即可，nodejs自带npm）安装在了jenkins容器里面，原因是我挂载npm后再容器内依然使用不了npm命令，百度上说的一些方法我试过也不行，被迫之下只能如此。

安装方法如下：

进入到jenkins容器当中

docker exec -it xxxx bash //这里的xxxx是你启动后返回的容器id

运行下面命令安装npm

apk add --no-cache nodejs

安装完成后输入命令exit退出

成功后访问Jenkins地址：127.0.0.1:8080

下一步点安装推荐的插件，等待大概几分钟到十几分钟（取决于你服务器的网速）

创建新管理员用户（下次就用这个用户登陆）

此时就能进入到工作台界面了

安装Jenkins应的gitee插件

等待安装完成

配置你的全局变量

完成后返回jenkins，点击新建任务

创建一个流水线任务

我的pipeline脚本如下：


node {
  // 每一个stage都是一个步骤
  stage('git checkout') {  // 这一串是用来从gitee上拉取代码的，怎么来的我下面会说
        checkout([$class: 'GitSCM', branches: [[name: '*/master']], doGenerateSubmoduleConfigurations: false, extensions: [], submoduleCfg: [], userRemoteConfigs: [[credentialsId: 'xxxxxxxxxx', url: 'https://gitee.com/xxxxxxxxxx']]])
 
        echo 'git checkout ok'  // 日志而已
  }
  
  def nodeHome = tool 'nodeHome'
  env.PATH = "${nodeHome}/bin:${env.PATH}"
  stage('npm install') {
      echo 'npm install start'
      sh 'npm install'
      echo 'npm build ok'  
  }
  
  stage('npm build') {
      echo 'npm build start'
      sh 'npm run build'
      echo 'npm build ok'  
  }
}

checkout([$class: 'GitSCM', branches: [[name: '*/master']], doGenerateSubmoduleConfigurations: false, extensions: [], submoduleCfg: [], userRemoteConfigs: [[credentialsId: 'xxxxxxxxxx', url: 'https://gitee.com/xxxxxxxxxx']]])
这一句话是使用下面方法生成的

def nodeHome = tool 'nodeHome' // 这里的名字是上面配置的全局配置别名
env.PATH = "${nodeHome}/bin:${env.PATH}" //配置环境变量
stage('npm install') {
echo 'npm install start' //日志
sh 'npm install' //输入npm命令安装依赖
echo 'npm build ok' //日志
}

stage('npm build') {
echo 'npm build start'
sh 'npm run build' //输入构建项目
echo 'npm build ok'
}

写好之后点击应用保存

现在就可以开始构建啦！

最后祝大家好好学习天天向上，再推一遍群号

QQ交流群：1065452972

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/煮酒与君饮/article/detail/771896