阿里云Centos+Jenkins+Vue自动部署

一:按照官方文档下载对应软件和环境

下载

1. 先要注意是否有对应的java环境
   java -version

[root@ java-1.8.0]# java -version
openjdk version "1.8.0_232"
OpenJDK Runtime Environment (build 1.8.0_232-b09)
OpenJDK 64-Bit Server VM (build 25.232-b09, mixed mode)

没有java环境的需要先安装Java环境
sudo yum install java

2. 首先要先添加Jenkins源:

sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo
sudo rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.io.key

3. 添加完成之后直接使用yum命令安装Jenkins:
   yum install jenkins

二 启动Jenkins

1. 使用命令启动Jenkins:
   sudo service jenkins start （启动）
   sudo service jenkins stop （暂停）

[root@ ~]# service jenkins start
Starting jenkins (via systemctl):                          [  OK  ]

2. 默认为8080端口，如需修改端口可修改配置文件，然后将Jenkins暂停后启动
   vim /etc/sysconfig/jenkins
   image.png
3. 开防火墙端口
   如果没有对端口进行开发，服务器是拒绝外部访问的，
   systemctl status firewalld ：查看防火墙的状态

• running 状态即防火墙已经开启
• dead 状态即防火墙未开启
  systemctl start firewalld : 开启防火墙（建议开启）
  systemctl stop firewalld : 停止防火墙
  firewall-cmd --query-port=8000/tcp ：查看端口是否开放（8000代表端口）
• yes表示已开通
• no表示未开通
  firewall-cmd --add-port=8000/tcp --permanent : 开放端口（8000代表端口）
• success表示成功
  firewall-cmd --reload : 重载配置
  要使配置生效一定要重新载入配置

4. 在这里很多人会去网站上访问 你服务器ip:端口结果发现无法访问
   image.png
   其实是我们没有把端口加到阿里云的安全组里，是不是忘了，哈哈哈哈哈，
   image.png

5. 访问Jenkins管理平台，嗒哒！

   
   image.png

三 配置Jenkins

1.找密码（我的方法独一无二）

• 使用命令：ps -ef | grep jenkins 获取Jenkins运行的端口
  image.png
• 看到上图中黄色框框中的文件路径，cat 它，往下滚滚找到黄色框框中的那串密码（我打了少儿不宜的那个）
  cat /var/log/jenkins/jenkins.log
  image.png

• 然后复制粘贴到网页中，点击验证进入如下页面

  
  image.png

2. 安装插件（可以点击推荐的安装，或者自行选择安装，如果清楚自己要什么的可以自行选择安装，我就鼠标点错了点到推荐安装了┭┮﹏┭┮）
   image.png
   安装有点慢，间隙打个小广告欢迎访问我的垃圾博客

3. 账号创建

   
   账号

4. 安装NodeJs插件

   
   
   

   Avaliable 搜索 NodeJS，勾选 NodeJS，点击 Install without restart 安装

   
   image.png
5. 配置 NodeJS 插件

• Jenkins -> Manage Jenkins -> Global Tool Configuation

  
  image.png

• NodeJS 节点下，点击 NodeJS installations

  
  image.png

• 填写 Name，勾选 Install automatically，选择 Version，最后点击 Save

  
  image.png

6. 发布配置(最最最最 重要)

• 创建一个项目Jenkins -> New Item

  
  image.png

• General 配置，填写 DescriptionSource Code Management，选择 Git，填写 Repository URL，如果是私有仓库，还需要填写 Credentials( 点击 Add 添加)

  
  image.png
• 番外篇--私有仓库设置：
  1.1 生成SSH密钥，输入命令：
  ssh-keygen -t rsa -C “邮箱”
  公钥内容在 ~/.ssh/id_rsa.pub
  私有内容在 ~/.ssh/id_rsa
  1.2 将密钥加入到GitHub中
  image.png
  1.3 在Jenkins配置git ssh
  在Jenkins ->Credentials->System--> Add credentials
  新增登录方式
  image.png
  选择SSH登陆方式，将私钥复制到key中
  image.png
  1.4 Jenkins Job中配置git
  取得私有git的仓库配置果安装了git插件，在源码管理会出现Git选项，
  选中之后,主要配置 git服务器地址,这里要取git的地址.
  登录方式和分支(默认是 */master)
  image.png

1.5 Build Environment，勾选 Provide Node & npm bin/ folder to PATH

image.png
1.6 Build，点击 Add build step 下拉，选择 Execute shell
重要、重要、重要啦 shell命令

node -v #检测node版本（此条命令非必要）
npm -v #检测npm版本（此条命令非必要）
npm config set registry https://registry.npm.taobao.org #把npm源设置为淘宝源（这个你懂的）
npm config get registry #检测npm是否切换成功（此条命令非必要）
npm install #安装项目中的依赖
npm run build #打包
cd dist
rm -rf blog_vue.tar.gz #删除上次打包生成的压缩文件（一般建议备份，不要直接删除，这边测试就无所谓啦）
tar -zcvf blog_vue.tar.gz * #把生成的项目打包成压缩包，方便移动到项目部署目录
cd dist
#  备份历史版本
myPath="/home/vue_project_version/blog/"  #历史版本存放路径
tarName=$(date +%Y%m%d_%H%M%S)
# 这里的-d 参数判断$myPath是否存在
if [ ! -d $myPath ]; then
    mkdir $myPath
fi
cp blog_vue.tar.gz /home/vue_project_version/blog/    #版本拷贝
mv /home/vue_project_version/blog/blog_vue.tar.gz /home/vue_project_version/blog/blog_vue$tarName.tar.gz  #版本改名
cd /home/vue_project/blog/ #进入web项目根目录
mv /var/lib/jenkins/workspace/blog_vue/dist/blog_vue.tar.gz ./  #移动刚刚打包好的项目到web项目根目录
tar -zxvf blog_vue.tar.gz -C ./  #解压项目到dist目录
rm -rf blog_vue.tar.gz    #删除压缩包

注1：Jenkins默认目录centos: /var/lib/jenkins/workspace 在第一次构建的时候会创建这个文件夹，以后每次构建都会跳转到这个目录下你创建项目名字的目录下 例：项目名字为blog_vue，跳转的目录为/var/lib/jenkins/workspace/blog_vue/，暂且可认为其实目录
注2：知道有人想修改默认目录，如下：
我就不啰嗦了，有前贤
注2.5：有人想修改项目的工作目录，如下：

image.png

注3：建议shell命令 分开写，一小段一小段，注中注：分开的每段的开始目录为注2中所说的默认目录，切记切记 如下：

image.png

四. 构建项目（简单？ 哈哈哈哈 坑来了）

1. 回滚到项目路径下 点击Build Now，如图中2就会开始构建

   
   主面板

2. 查看构建情况（我弄几个错误的看看）

   
   image.png
   

   修改对应问题得shell命令，就跟服务器操作一样一样的

3. 正常的构建

   
   image.png

五.运行问题锦集：

1.文件权限问题：

mkdir: cannot create directory ‘/home/jenkins_workspace/blog_vue’: Permission denied

• 解决方法：

修改用户为root：

打开jenkins配置文件: vim /etc/sysconfig/jenkins
将原来的jenkins用户修改为 root用户: $JENKINS_USER="root"
修改Jenkins相关文件夹用户权限：

chown -R root:root /var/lib/jenkins
chown -R root:root /var/cache/jenkins
chown -R root:root /var/log/jenkins

重启Jenkins:systemctl restart jenkins
查看当前运行用户：ps -ef | grep jenkins

为当前用户添加权限

chown -R jenkins 文件路由

2.软件权限问题：

+ uwsgi --reload /etc/uwsgi/blog/uwsgi.pid
/tmp/jenkins6897959297090627100.sh: line 8: uwsgi: command not found

• 解决方法：

将服务器shell命令路径配置到Jenkins环境中

获取服务器的shell 命令路径：echo $PATH

[root@ myblog]# echo $PATH
/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/usr/local/python3/bin/:/root/bin

将路径复制到下图路径里，再运行

image.png