前端手动部署与自动化部署

一、连接服务器

1.先购买服务器

薅羊毛链接:https://www.aliyun.com/minisite/goods?userCode=ksfmxzb3

阿里云99元包年,续费同价

2.安装vscode插件

3.在vscode里连接服务器

4.连接成功 

二、nginx 

1.安装nginx

2.启动nginx

systemctl start nginx   
systemctl status nginx   
systemctl enable nginx


启动
检查状态
开机就启动nginx

 三、手动部署 

1.开始手动部署

2.配置nginx

 3.成功部署

四、自动化部署

1 - jenkins自动化部署

 1. 安装Java环境

Jenkins本身是依赖Java的,所以我们需要先安装Java环境。

要安装大于11版本的

dnf search java

dnf install java-17-openjdk

2. 安装Jenkins

因为Jenkins本身是没有在dnf的软件仓库包中的,所以我们需要连接Jenkins仓库:

  • wget是Linux中下载文件的一个工具,-O表示输出到某个文件夹并且命名为什么文件;
  • rpm:全称为The RPM Package Manage,是Linux下一个软件包管理器;

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

# 导入GPG密钥以确保您的软件合法
rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.io.key
# 或者
rpm --import https://pkg.jenkins.io/redhat/jenkins.io.key
# 或者
rpm --import http://pkg.jenkins-ci.org/redhat/jenkins-ci.org.key

然后需要编辑一下 下载下来的文件/etc/yum.repos.d/jenkins.repo

可以通过vim编辑

定位打开这个文件

vi /etc/yum.repos.d/jenkins.repo

然后键盘敲一下 i 键,变成下面这样,进入编辑状态

 然后cv下面的代码进去

[jenkins]

name=Jenkins-stable

baseurl=http://pkg.jenkins.io/redhat

gpgcheck=1

 然后按键盘esc键,然后按下shift+:,然后输入wq,按下回车,即可

然后就可以安装jenkins了

dnf install jenkins

启动Jenkins的服务

systemctl start jenkins
systemctl status jenkins
systemctl enable jenkins

 Jenkins默认使用8080端口提供服务,所以需要加入到安全组中:

 3.Jenkins配置

打开浏览器,输入:http://8.134.60.235:8080/

  • 注意:你输入自己的IP地址

获取输入管理员密码:

  • 在下面的地址中 cat /var/lib/jenkins/secrets/initialAdminPassword

可以安装推荐的插件:

 注册账号,即可登录jenkins

 4. Jenkins任务

 服务器要安装git

 

 

  • 定时字符串从左往右分别是:分 时 日 月 周
#每半小时构建一次OR每半小时检查一次远程代码分支,有更新则构建
H/30 * * * *

#每两小时构建一次OR每两小时检查一次远程代码分支,有更新则构建
H H/2 * * *

#每天凌晨两点定时构建
H 2 * * *

#每月15号执行构建
H H 15 * *

#工作日,上午9点整执行
H 9 * * 1-5

#每周1,3,5,从8:30开始,截止19:30,每4小时30分构建一次
H/30 8-20/4 * * 1,3,5

作者:cocoCola91667
链接:https://juejin.cn/post/7225891176532295741
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

 

 jenkins需要安装node

 安装完重启jenkins

保存后再回到项目的配置里面

构建执行的任务:

  • 查看Node的版本等是否有问题;
  • 执行 npm install 安装项目的依赖;
  • 移除原来mall_cms文件的所有内容;
  • 将打包的dist文件夹内容移动到mall_cms文件夹;
pwd
node -v
npm -v

npm install 
npm run build

pwd

echo '构建成功'

ls

# 删除/root/felix-aribnb文件夹里所有的内容
rm -rf /root/felix-aribnb/* 

# 再将打包后的文件build,放进去  build还是dist,自己看清楚
cp -rf ./build/* /root/felix-aribnb/

 jenkins磁盘不足问题,导致一直构建不成功,最终采用将tmp文件扩大(查了好久)

sudo umount /tmp 如果有问题,要kill掉一些进程

df -h /tmp
sudo umount /tmp
sudo mount -t tmpfs -o size=2G tmpfs /tmp
tmpfs   /tmp   tmpfs   size=2G,mode=1777   0   0

 5. Jenkins用户

我们后面会访问centos中的某些文件夹,默认Jenkins使用的用户是 jenkins,可能会没有访问权限,所以我们需要修改一下它的用户:

第一种方案:修改文件的路径:/etc/sysconfig/jenkins(我没找到)

第二种方案:也可以将jenkins添加到root组中

sudo usermod -a -G root jenkins

第三种方案:也可以给jenkins目录权限   /xxx/xxx 你的项目文件夹

chown -R jenkins /xxx/xxx

 之后需要重启一下Jenkins:systemctl restart jenkins

6.成功部署

 最后终于成功了,真的好多问题!!!!

后续了解下docker!

  • 7
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端自动化部署可以帮助我们将代码快速部署到服务器上,提高开发和部署的效率。下面介绍一下前端自动化部署的步骤以及如何将代码自动化部署到github。 1. 安装自动化部署工具 前端自动化部署需要借助一些工具,例如gulp、grunt、webpack等。根据自己的需求选择适合自己的自动化部署工具,然后进行安装。 2. 配置自动化部署脚本 在安装好自动化部署工具后,需要配置自动化部署的脚本。根据不同的工具,配置文件的格式不同,但一般都需要配置一些基本项,如输入输出路径、需要执行的任务等。可以参考官方文档或其他资料进行配置。 3. 集成自动化部署自动化部署集成到开发环境中,一般需要配置一些开发工具的插件或者编写一些脚本。例如,可以编写一个gulp插件,在开发完成后自动执行自动化部署脚本。这样可以方便地将代码部署到服务器上。 4. 自动化部署到github 将代码自动化部署到github可以使代码管理更加便捷,具体步骤如下: step1:将代码上传到github仓库 将代码上传到github仓库中,可以通过命令行或者git客户端进行操作。 step2:配置自动化部署脚本 根据需要配置自动化部署脚本,例如使用gulp自动化打包。 step3:编写自动化部署脚本 编写自动化部署脚本,将代码自动化部署到github中。 step4:设置github webhook 在github上设置webhook,使代码提交时能够自动运行自动化部署脚本。 总结: 通过前端自动化部署,可以使代码管理和部署更加便捷高效,减少手动操作,提高开发效率。如果需要将代码自动化部署到github,则需要了解github的webhook机制,并编写相应的自动化部署脚本。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值