nginx+jenkins部署git前端项目

简介: 从 tomcat 到 github Page,再到 nginx。技术在变化,但搭建个人站点的执念没有中断。与你同行!

image.png


前言



从 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



配置 nginx.conf



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


  • 安装 vim
# yum install vim


  • 编辑 config
# vim nginx.conf



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


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

编辑完后,依次输入


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


successful 啦!


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


(一样要记得,esc后:wq保存退出)


启动 nginx



# nginx 


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

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



安装 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


很有可能遇到以下问题:


配置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 //查看密码


然后一条龙安装



部署项目



  • 这里是 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


阶段总结



  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



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


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


  • server1
  • server2


更多


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


参考:


目录
打赏
0
0
0
0
2
分享
相关文章
【App Service】VS Code直接部署App Service时候遇见 “fatal: not a git repository (or any of the parent directories): .git”
通过VS Code发布Python App Service的时候,遇见了发布失败错误: The deployment failed with error: fatal: not a git repository (or any of the parent directories): .git . Please take a few minutes to help us improve the deployment experience
111 24
理解前端开发中的 Git - Rebase
Git Rebase 是前端开发中常用的一种版本控制操作,用于将一个分支的更改整合到另一个分支。与合并(Merge)不同,Rebase 可以使提交历史更加线性整洁,有助于保持代码库的清晰和可维护性。通过 Rebase,开发者可以将特性分支的改动应用到主分支上,同时保留或重写提交记录。
Jenkins适合什么样的项目
【10月更文挑战第18天】Jenkins适合什么样的项目
56 3
如何清理 docker 磁盘空间+修改 Gitea 服务器的 Webhook 设置+前端一些好学好用的代码规范-git hook+husky + commitlint
如何清理 docker 磁盘空间+修改 Gitea 服务器的 Webhook 设置+前端一些好学好用的代码规范-git hook+husky + commitlint
61 5
nginx部署vue项目
本文介绍了将Vue项目部署到Nginx的步骤,包括构建Vue项目、上传dist文件夹到服务器、安装Nginx、配置Nginx代理静态文件以及重启Nginx,确保了Vue应用可以通过域名或IP地址访问。
241 1
Jenkins持续集成GitLab项目 GitLab提交分支后触发Jenkis任务 持续集成 CI/CD 超级详细 超多图(二)
Jenkins持续集成GitLab项目 GitLab提交分支后触发Jenkis任务 持续集成 CI/CD 超级详细 超多图(二)
126 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
1317 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
k8s基础使用--使用k8s部署nginx服务
本文介绍了Kubernetes中核心概念Deployment、Pod与Service的基本原理及应用。Pod作为最小调度单元,用于管理容器及其共享资源;Deployment则负责控制Pod副本数量,确保其符合预期状态;Service通过标签选择器实现Pod服务的负载均衡与暴露。此外,还提供了具体操作步骤,如通过`kubectl`命令创建Deployment和Service,以及如何验证其功能。实验环境包括一台master节点和两台worker节点,均已部署k8s-1.27。
313 1
docker应用部署---nginx部署的配置
这篇文章介绍了如何使用Docker部署Nginx服务器,包括搜索和拉取Nginx镜像、创建容器并设置端口映射和目录映射,以及如何创建一个测试页面并使用外部机器访问Nginx服务器。

热门文章

最新文章