Linux(centos7.6)使用Jenkins部署vue项目学习

双11刚买了一台云服务器,之前有搭建过Jenkins,走了好多弯路,这次写篇文章记录整个流程。

1.首先,得有自己的一台服务器

 

2.永久关闭防火墙

systemctl disable firewalld   永久关闭防火墙,,系统重新启动后,防火墙依然关闭
systemctl status firewalld	 查看防火墙状态

 

3.nginx的源码简单安装

(1)进入官网查找需要下载版本的链接地址,然后使用wget命令进行下载

wget http://nginx.org/download/nginx-1.16.1.tar.gz

(2)建议大家将下载的资源进行包管理

mkdir -p nginx/core
mv nginx-1.16.1.tar.gz nginx/core

(3)解压缩

tar -xzf nginx-1.16.1.tar.gz

到这一步应该能看到

(4)进入nginx-1.16.1文件夹中,发现configure,执行以下代码:(--with-http_ssl_module是为了给配置https做准备,--prefix=/usr/local/nginx指定安装到/usr/local/nginx目录下

./configure --prefix=/usr/local/nginx --with-http_ssl_module

(5)编译

make

(6)安装

make install

都执行完成后,可以看到nginx已经安装到了/usr/local/nginx下面

4.cd /usr/local/nginx/sbin/  到目录下,可以看到nginx,执行 ./nginx

 

5.访问ip地址可以看到,代表你的nginx安装成功了。

 

6.安装jdk1.8

这里借鉴了https://blog.csdn.net/qq_41649001/article/details/105442407 这位大佬的步骤(内有百d盘链接),将jdk包放入/opt/software下。

 

执行  tar -zxvf jdk-8u151-linux-x64.tar.gz

 

重命名并删除压缩包:

执行:mv jdk1.8.0_151/ jdk

 

执行 rm -rf jdk-8u151-linux-x64.tar.gz

 

修改环境变量:

执行 pwd ,先把jdk的安装目录记录下:/opt/software

执行:vim /etc/profile

按i进入insert模式:

将下方这段话添加在文末:

export JAVA_HOME=/opt/software/jdk (这里的JDK路径要填写自己的存放位置!!)
export CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar
export PATH=$JAVA_HOME/bin:$PATH

然后按esc键,在执行:wq,保存成功。

然后使用source /etc/profile 命令让刚刚修改的配置文件生效即可

执行 java -version 看到如下则安装成功

 

7.安装配置Jenkins

首先到这个网站下载Jenkins,访问清华大学开源软件镜像站 https://mirrors.tuna.tsinghua.edu.cn/jenkins/redhat-stable/,其他下载方式很慢,要不就是上了Jenkins不知道怎么点。很尴尬,在网上搜到了这么一个网站。

我们来下载一个最新版尝尝鲜:

在 /opt/software/  拖进刚才下载的rpm包。

 

安装执行:

rpm -ivh jenkins-2.263.1-1.1.noarch.rpm

 

然后打开 /etc/rc.d/init.d/ 下的jenkins文件

将下面这行代码配到文件里面:

/opt/software/jdk/bin/java

重新加载配置文件
    systemctl daemon-reload
 

启动
service jenkins start

重启
service jenkins restart

停止
service jenkins stop

启动完毕后访问ip:8080可以看见:(期间弄完访问不了是因为服务器没有开8080端口,要去腾讯云的防火墙设置一下,在下载一个tcping.exe可以ping 端口)

 

 

执行 vim /var/lib/jenkins/secrets/initialAdminPassword 可以看到密码复制进去点继续

然后进去看到了一个登录界面,让输入用户名和密码。我尼玛,连个注册按钮都没有,我醉了好久,最后通过以下三步完美解决

1、通过 find / -name jenkins 查找jenkins的安装路径为  /var/lib/jenkins

2、在jenkins目录下,找到config.xml文件,并进行编辑:$ sudo vim config.xml

     搜索到useSecurity 将useSecurity的属性由 true 改为 false、修改完成之后,点击Esc键,:wq退出保存。

3、重新启动Jenkins:$ sudo /etc/init.d/jenkins restart

4、再次访问可以看到:
 
 
执行:find / -name "hudson.model.UpdateCenter.xml" 打印以下路径
/var/lib/jenkins/hudson.model.UpdateCenter.xml
 
在执行
find / -name default.json
打印出:
/var/lib/jenkins/updates/default.json
 
执行下面两句替换一些依赖源
sed -i 's/ www.google.com/www.baidu.com/g ' default.json
sed -i 's/ updates.jenkins-ci.org \/download/ mirrors.tuna.tsinghua.edu.cn \/jenkins/g' default.json

 

重启jenkins,systemctl restart jenkins.service

上面这两步可以让我们下载jenkins插件下载的快一点 

重启完成后点击安装插件:

可以看到正在一步步安装,如果没有执行上面几步替换的操作,下载插件都是失败,本人尝试过。

 

安装完成之后会看到:

 

点保存并完成:

 

点开始使用,就可以看到jenkins的主界面了:

 

 

点击新建任务

 

 

输入项目名称点确定

点击源码管理,输入我们的git地址

下方报了个错

点击添加凭据,输入自己的gitte账号密码。

选择了凭据还是报错:

 

经查询是因为服务器没有安装git客户端,所以执行:

yum -y install git

然后查看git版本:git --version

刷新一下jenkins的页面,再重新输入git仓库地址,选择凭据,发现报错消失了。

 

制定分支默认选择master。

点保存

然后点进工作区,说错误,让先构建一次

 

点击之后,刷新一下,就发现代码已经被拉下来了

填写jenkins构建时执行的shell

设置中点击增加构建步骤,点击执行shell

 

粘贴入文本框中保存

npm install 
rm -rf ./dist/*
npm run build
rm -rf /www/web/site/*
cp -rf ./dist/* /www/web/site
npm install :下载工作区npm包<br >
rm -rf ./dist/* :删除dist目录下的所有文件,dist目录即为当前 jenkins工作区打包后的文件。<br >
npm run build :执行打包命令<br >
rm -rf /www/web/site/* :删除服务器上/www/web/site/ 目录下的所有文件/www/web/site/ 为服务器项目放置位置。<br >
cp -rf ./dist/* /www/web/site :把当前构建工作区dist目录里的文件 copy 到服务器/www/web/site 文件夹下。

 

然后给jenkins安装node插件

 

安装好了 点 全局工具配置:

 

 

 

但是我们发现nodejs的版本是一个普通文本框,不能选择。

 

经查询了很多方法:

这里下载一个hudson.plugins.nodejs.tools.NodeJSInstaller文件,里面记录着nodejs的版本信息

https://mirrors.tuna.tsinghua.edu.cn/jenkins/updates/updates/

 

 

但是我嫌麻烦,之前有个机器装好了Jenkins,当时是一步到位,换一台机器就有这样的问题,很尴尬。所以直接将配置文件从那个好的服务器上copy下来,

放到  /var/lib/jenkins/updates/ 这个路径下

 

刷新一下页面,就能看到版本,我们选一个相对稳定的版本10.12.0,然后点保存。

 

 

回到构建工程里面:点构建环境,勾选如下,点保存

 

但是npm构建的超级慢。所以换成cnpm,这里拿vue-admin-template的源码举个例子:修改shell脚本(具体情况shell脚本有所不同)

npm i cnpm -g
cnpm install 
rm -rf ./dist/*
cnpm run build:prod
rm -rf /www/web/site/*
cp -rf ./dist/* /www/web/site

 

 

期间碰到无权限问题,给目录赋权限:

chmod 777 /www/web/site

 

在访问以下链接地址: ip,默认80端口,终于特么好了。jenkins的功能需要研究的还很多,这里知识举个例子

 

 

 

记录2021/11/22日:

项目中改用yarn作为以来安装工具

配置git凭据需要  把id_rsa下的内容粘贴进去

 

 

npm install -g yarn -registry=https://registry.npm.taobao.org
yarn install --pure-lockfile
cd /var/lib/jenkins/workspace/yichun-extracurricular-sports-pc
rm -rf ./dist
yarn run build
rm -rf /web/extracurricular/*
cp -rf ./dist /web/extracurricular

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章