nginx+jenkins部署git前端项目

前言

从 tomcat 到 github Page,再到 nginx。技术在变化，但搭建个人站点的执念没有中断。

与你同行！

购买 ECS 服务器

首先前往某云买ECS服务器，先买一个月的。

安装 SSH 工具

下载安装 x-shell6

用 xshell 连接服务器，连接之前重启一下服务器（忘记密码请重置）

ps:如果用的是 aliyun，可以直接在线管理终端。

安装 web 容器：nginx

• 安装 nginx

# yum install nginx

# yum remove nginx //卸载

• 查看版本

# nginx -v

• 查看配置

# nginx -t
# cd /etc/nginx
# ls

anginx.png

配置 nginx.conf

安装 vim 编辑器，编辑 nginx 配置并创建测试项目

• 安装 vim

# yum install vim

• 编辑 config

# vim nginx.conf

nginx2.png

 # i //编辑器底部出现 insert 后 你可以编辑配置文件了；

• 编辑 location （这是默认静态资源文件存放的地址）

nginx3.png

编辑完后，依次输入

esc //退出编辑模式
:wq //保存退出
nginx -t 查看配置文件是否报错

nginx4.png

successful 啦！

• 创建项目

cd /root
mkdir www
cd www
vim index.html //创建 index.html 文件

nginx5.png

（一样要记得，esc后:wq保存退出）

启动 nginx

# nginx 

nginx403.png

403? 不要慌=>配一配某云安全组- 安全组规则（默认80端口，粗暴开启 ICMP）

• 也许你需要 解决Nginx出现403 forbidden

通过解决这个问题，你可以更加熟悉掌握vim编写nginx.conf及保存退出、linux查看端口占用，杀死进程，安全组入口等操作知识，多看几遍就熟悉了

myblog1.png

安装 jenkins

yum install java

yum install git

wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat/jenkins.repo

rpm --import https://jenkins-ci.org/redhat/jenkins-ci.org.key

yum install jenkins

报错 key 找不到？试试下面的命令（如果机子很慢，找找其他镜像）

wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins.io/redhat/jenkins.repo
rpm --import http://pkg.jenkins.io/redhat/jenkins.io.key
yum install jenkins

image.png

很有可能遇到以下问题：

配置java路径

查看java路径

• Jenkins 修改权限

vim /etc/sysconfig/jenkins // $JENKINS_USER 改为 “root”:

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

service jenkins restart  //启动 jenkins

然后在8080端口就可以进入jenkins了

vim /var/lib/jenkins/secrets/initialAdminPassword //查看密码

然后一条龙安装

j1.jpg

部署项目

• 这里是 vue 项目

简述：

1. 新建 jenkins 项目并进行设置，比较重要的点是安装 node 环境，git地址配置，shell 命令输入（即你需要jenkins帮你执行的操作序列）
2. 导出目录后，在linux服务器找到你的nginx.conf，然后更改根目录的指向和端口设置，再设置云服务器的出入规则（确保能访问）不懂就看
3. 最后修改git，然后构建，就能看到效果啦！

• 参考：我的执行 shell

1

node -v
npm install -g yarn --registry=https://registry.npm.taobao.org
yarn  -v
yarn install

yarn lint
yarn build

2

rm -rf test.tar.gz
tar czvf test.tar.gz *
mv -f test.tar.gz /root/www
cd /root/www
tar -xzvf test.tar.gz
rm -rf test.tar.gz

j2.png

阶段总结

1. nginx 是 web 服务容器，类比以前用过的 tomcat。
2. jenkins 是自动化构建工具，最简单的就是帮你执行npm install，npm run build 这些操作。
3. 对 linux 的操作要逐渐熟悉，比如vim/rm/:wq，以及mysql/nginx/jenkins的重启操作等，还有查看目录，查看端口，停止端口 ......
4. 面对问题，更要有解决的思路。然后自行找方法去解决，大部分的问题都能通过搜索引擎解决，再耐心一点，细心一点吧。
5. 在 git 上提交代码（例如在 github 提交代码），然后访问 jenkins ，点击构建，就可以了。

nginx 多server支持

先看 nginx.conf 配置,复制一个 server

nginx1.png

看到了吗，写两个server，修改对应的location。

对应的目录下要有已经打包好的vue项（可以手动打包传git，也可以配置对应的jenkins项目shell命令进行打包），我这里一个是vuecli3项目，另外一个是vuepress项目。了解vuepress

• server1

site1.png

• server2

site2.png

更多

期待交流及关于建站的分享。