零基础实现前端项目自动化部署

路途96
132 阅读8分钟

前言

本人接触前端也算有一定的时间，但这大部分时间的技术还是停留在前端这一块，部署的知识相接触比较少。最近想着把自己的项目部署到自己的服务器上去，无奈没有经验，便学习相关知识，经过一番折腾，总算部署成功。但每次一旦功能有所改变，就要手动去部署，实在有些麻烦，就又有跑去接触了一些自动化的知识，这着实省去了我很大一部分麻烦。

下面从零开始， 借助于Jenkins实现前端项目的自动化部署， 希望能够对看到的小伙伴们有所帮助。

主要的技术栈：

  • Jenkins
  • node

购买服务器

想要将自己的项目部署到部署到服务器上去，首先就要有自己的一台服务器。下面我就以阿里云为例，介绍一下购买的流程。

购买流程

第一步： 进入阿里云首页，点击产品中的云服务器ECS

image-20230312152939275

第二步： 进入后，点击立即购买，开始选择自己需要的服务器

  1. 选择服务器的地域，一般选择自己所在的区域，响应速度会更快

  2. 选择服务的配置信息，基于本人的经验，由于自动化部署依赖于Jenkins，所有服务器配置需要高一点，尤其是带宽这一块，否则后面下载第三方包的时候，由于速度很慢，导致服务器卡死。

    对于仅仅只是又来学习的人来，买一台高配置的服务器来说不太划算，可以算则按量付费，学习完部署只是之后，释放掉机器即可。

  3. 服务器镜像。一般选择Centos，当然Ubuntu也可以。我这里选择的是Centos Stream，因为Centos8后续会不再维护，推荐使用Centos Stream。

    购买流程

第三步：配置网络和安全组

选择的带宽相对高一些，可以使用按量付费，最终要的就是选择安全组了，安全组类似于防火墙，控制服务器一些端口的访问权限。

注意： 由于Jenkins默认的访问端口是8080，但是默认的安全组中并没有开启8080，需要自己去后台手动开启。

image-20230312160139177

以上就是购买服务器的基本流程了，至于其他的选项，就看个人需求了。

第四步： 增加安全组的访问端口

进入控制台，找到服务器实例，点击服务器实例，进入服务器实例的详情页面，点击安全组菜单，开始对安全组进行配置，开放8080端口。

image-20230312161652749

搭建服务器环境

1. 安装Java

Jenkis依赖于Java环境，首先搭建Java环境。

Centos镜像里有一个很好用的dnf工具，可以快速帮助我们下载一些第三方库，这个工具的作用类似于npm。

  1. 搜索java， 看看Java在不在dnf可以下载的仓库中, 输入一下命令：
dnf search java

image-20230312162137681

  1. 可以看到java的多个版本，这里选择java-17-openjdk

    dnf install java-17-openjdk

2. 安装Jenkins

  1. 首先，Jenkins并没有在dnf的仓库中，所以需要连接Jenkins仓库，输入以下命令
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/jenkins.io.key
# 或者
rpm --import http://pkg.jenkins-ci.org/redhat/jenkins-ci.org.key
  1. 下一步，编辑/etc/yum.repos.d/jenkins.repo
vim /etc/yum.repos.jenkins.repo

按住i，进入编辑状态，将以下内容复制进去

[jenkins]
name=Jenkins-stable
baseurl=http://pkg.jenkins.io/redhat
gpgcheck=1

按住esc键，退出编辑状态，并输入 :wq , 退出保存。

  1. 接着，输入命令 dnf search jenkins 就可以看到关于jenkins的信息了。

image-20230312163830124

安装Jenkins，输入命令

dnf install jenkins

3. nginx

自动化部署之前需要手动部署一下，这就离不开nginx了。

  1. 安装nginx
dnf install nginx
  1. 启动nginx
systemctl start nginx

这时候，在浏览器中输入你的服务器ip地址(浏览器默认访问端口是80端口，nginx默认监听的端口也是80， 可以省略输入) ， 就会显示一个关于介绍nginx的页面，这个页面文件是nginx默认访问目录中的文件。

  1. 创建打包后的文件的存放目录
# 示例： 在/root路径下， 创建test（名称由你自己决定）目录
mkdir test
  1. 上传文件

在本地通过npm run build命令后，打包好的文件会存放到dist或者build的目录下，将此目录下的所有文件上传到test目录。

将本地文件上传到服务器上，推荐使用vscode插件 remote-ssh

  1. 改变nginx权限
# 编辑nginx配置文件
vim /etc/nginx/nginx.conf

image-20230312184352758

  1. 修改nginx默认访问目录

image-20230312190503108

完成上述配置后，再在浏览器输入服务器ip地址，就会发现现在显示的就是你打包好的项目的首页了。

Jenkins配置

手动部署完成，下面就要开始利用Jenkins开始自动话部署了。

第一次进入Jenkins

启动Jenkins

等待jenkins安装完成后，输入以下命令

systemctl start jenkins

启动成功后，在浏览器输入： IP地址：8080， 就会看到以下界面：

如访问失败，检查下自己服务的端口8080是否开放。

image-20230309110805767

根据指示，拿到管理员密码。

cat /var/lib/jenkins/secrets/initialAdminPassword
  1. 推荐安装推荐的插件

image-20230309111036421

  1. 创建管理员用户

    第一次登录用的管理员账号密码太麻烦，创建一个管理员用户，用于下次登录。

image-20230309115608591

  1. 实例配置

image-20230312170141446

构建准备工作

第一次进入Jenkins页面，可能显示为英文，重启一下即可显示为中文。

systemctl restart jenkins

安装node插件

前端的项目打包离不开node环境，所以需要首先需要安装node插件。

image-20230312172650709

image-20230309234225820

配置node

image-20230312173131875

进入到全局工具配置界面后，滚动到最后，找到nodejs， 开始配置

  1. 填入别名，这在后面选择构建环境的时候会有用
  2. 安装node的版本，其他默认即可

注意： 可能刚开始会无法出现选择nodejs的版本，一般重启一下jenkins即可。

image-20230309234547691

提高Jenkins的权限

jenkins的用户级别默认为jenkins，这会导致jenkins访问文件的权限不够，导致构建失败。

下面提供三种方法：

  1. 修改jenkins的配置文件，路径为： /etc/sysconfig/jenkins
vim /etc/sysconfig/jenkins

image-20230312174402780

  1. 将jenkins添加到root组
sudo usermod -a -G root jenkins
  1. 给jenkins赋予相应的目录权限
chown -R jenkins  /xxx/xxx

可能因为不同服务器的原因，有些方法不可行，但对于我而言，第二种是可行的。

安装git

构建任务会需要从远程代码仓库中去下面项目代码，所以git是不可或缺的工具

dnf install git

构建任务配置

新建构建任务

输入任务名称，选择构建一个自由项目（刚开始这里显示为英文）

image-20230312170812622

任务配置

构建任务配置

  1. 构建触发器

    选择定时构建之后，可以填入如下内容

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

    具体规则如下，从左到右，分别是 分 时 日 月 周

    #每半小时构建一次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
    1. 增加构建步骤

    image-20230312194434864

    选择执行shell，输入以下相关命令，这些命令在构建时会自动执行

    # 查看一下当前的所处的目录
pwd
# 查看node版本
node -v
​
# 下载项目所依赖的包
npm install
# 开始打包
npm run build
​
# 再次查看当前目录
pwd
​
# 输出‘构建成功’
echo '构建成功'
​
# 查看当前目录的文件信息
ls
​
# 删除/root/test文件夹里所有的内容， test目录是上述项目存放的目录，nginx访问会指向test目录下的index.html, 这是根据上述
# nginx的配置决定的。
rm -rf /root/test/*
​
# 将打包后dist目录下的文件全部复制到/root/test目录下
cp -rf ./dist/* /root/test/

点击保存之后，一个构建任务就配置好了。

回到首页后，选择刚刚创建的构建任务，并点击立即构建，任务就会按照我们的配置立刻开始构建啦。

如果出现文件访问权限不够的问题， 需要改变jenkins的权限，见上述介绍。

总结

  1. 搭建服务器环境的过程中，需要注意将nginx的权限提升，否则后续访问的时候，会出现403，无法访问我们的页面。
  2. 在Jenkins配置中，需要提供node环境， 将jenkins的权限提高
  3. 构建任务中，可能会存在一些其本人没有遇到过的问题，注意查看构建时控制台输出的信息。
avatar
文章
阅读
粉丝