Mr笔记

Appearance

S11-09 Vue-项目打包、自动化部署 ​

[TOC]

项目部署和DevOps ​

传统的开发模式 ​

在传统的开发模式中，开发的整个过程是按部就班就行：

image-20230209125140378

但是这种模式存在很大的弊端：

  • 工作的不协调：开发人员在开发阶段，测试和运维人员其实是处于等待的状态。等到测试阶段，开发人员等待测试反馈bug，也会处于等待状态。
  • 线上bug的隐患：项目准备交付时，突然出现了bug，所有人员需要加班、等待问题的处理；

DevOps开发模式 ​

DevOps是Development和Operations两个词的结合，将开发和运维结合起来的模式：

image-20230209125154529

image-20230209125202287

持续集成和持续交付 ​

伴随着DevOps一起出现的两个词就是持续集成和持续交付(部署)：

  • CI是Continuous Integration（持续集成）；
  • CD是两种翻译：Continuous Delivery（持续交付）或Continuous Deployment（持续部署）；

持续集成CI：

image-20230209125217106

持续交付和持续部署：

image-20230209125235171

image-20230209125245971

自动化部署流程 ​

image-20230209125303915

购买云服务器 ​

注册阿里云的账号 ​

云服务器我们可以有很多的选择：阿里云、腾讯云、华为云。

  • 目前在公司使用比较多的是阿里云；
  • 我自己之前也一直使用阿里云，也在使用腾讯云；
  • 之前华为云也有找我帮忙推广他们的活动；

但是在我们的课程中，我选择目前使用更加广泛的阿里云来讲解：

我们需要注册阿里云账号

购买云服务器 ​

购买云服务器其实是购买一个实例。

1.来到控制台：

image-20230209125346455

2.创建实例，选择类型和配置

![image-20201204152133800](/Users/coderwhy/Library/Application Support/typora-user-images/image-20201204152133800.png)

![image-20201203103047329](/Users/coderwhy/Library/Application Support/typora-user-images/image-20201203103047329.png)

3.配置网络安全组

image-20230209125406814

4.创建实例

image-20230209125420726

搭建服务器环境 ​

jenkins自动化部署 ​

安装Java环境 ​

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

  • 这里我安装了Java1.8的环境
shell
dnf search java-1.8
dnf install java-1.8.0-openjdk.x86_64

注意： 最新的Jenkins已经不能使用java-1.8了，需要安装最新版的java

image-20230511154029783

sh
dnf search java
dnf install java-17-openjdk

安装Jenkins ​

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

sh
dnf search jenkins
  • wget是Linux中下载文件的一个工具，-O表示输出到某个文件夹并且命名为什么文件；
  • rpm：全称为The RPM Package Manage，是Linux下一个软件包管理器；
shell
wget –O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat-stable/jenkins.repo

# 如果下载到了 /root下，则需要移动到 /ect中
mv jenkins.repo /etc/yum.repos.d/
# 进入/etc/yum.repos.d/目录
cd /etc/yum.repos.d/


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

编辑一下文件 vi /etc/yum.repos.d/jenkins.repo

vim编辑命令：

  • vi 文件路径 : 使用vim打开文件
  • i : 切换到 INSERT模式，编辑文件
  • :wq : 保存退出
  • 可以通过vim编辑
shell
[jenkins]

name=Jenkins-stable

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

gpgcheck=1

安装Jenkins

shell
dnf install jenkins # --nogpgcheck(可以不加)

启动Jenkins的服务：

shell
systemctl start jenkins
systemctl status jenkins
systemctl enable jenkins

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

image-20230209125442020

Jenkins用户 ​

解决jenkins对/root/ 目录没有访问权限的方法：

方法一：修改jenkins访问用户为root

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

修改文件的路径：/etc/sysconfig/jenkins

image-20230209125454833

之后需要重启一下Jenkins：

shell
systemctl restart jenkins

方法二：将jenkins添加到root组中

sh
# 将jenkins添加到root组中
sudo usermod -a -G root jenkins

# 重启jenkins
systemctl restart jenkins

方法三：给jenkins目录权限

sh
# 也可以给jenkins目录权限
sudo chown -R jenkins /xxx/xxx

# 重启jenkins
systemctl restart jenkins

测试有效的方法：

sh
sudo chmod -R 777 /工作目录

Jenkins配置 ​

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

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

获取输入管理员密码：

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

image-20230511161302291

image-20230511161329572

可以安装推荐的插件：

image-20230209125510040

Jenkins任务 ​

新建任务：

image-20230209125528180

image-20230209125538391

配置项目和保留策略：

image-20230209125603587

安装git

sh
dnf install git

源码管理：

注意： 如果是public的仓库，可以没有凭证(Credentials)；如果是private的仓库，需要添加凭证

image-20230209125614834

配置凭证

位置： Manage Jenkins / Manage Credentials / System / 全局凭证

image-20230511164746583

构建触发器：

image-20230209125627720

这里的触发器规则是这样的：

  • 定时字符串从左往右分别是：分 时 日 月 周
sh
# 每半小时构建一次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

构建环境：

注意：我们需要搭建Node的环境

  • 第一步：配置Node的环境；
  • 第二步：安装Node的插件；

image-20230209125648940

第一步：配置Node的环境

image-20230209125700705

第二步：安装Node的插件

  • 这里因为我已经安装过了，所以没有搜索到；

image-20230209125712570

构建执行的任务：

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

npm install 
npm run build

pwd

echo '构建成功'

ls

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

cp -rf ./dist/* /root/mall_cms/

image-20230209125729624

nginx安装和配置 ​

安装nginx ​

后续我们部署会使用nginx，所以需要先安装一下nginx：

shell
dnf install nginx

启动nginx：

shell
systemctl start nginx # 启动nginx
systemctl status nginx # 查看nginx状态
systemctl enable nginx # 开机启动nginx

配置nginx ​

我们这里主要配置nginx的用户和默认访问目录：

sh
/etc/nginx/nginx.conf

配置用户：

image-20230209125743621

通过Linux命令创建文件夹和文件：

shell
mkdir /root/mall_cms
cd /root/mall_cms
touch index.html

vi index.html

配置访问目录：

image-20230209125753864

nginx手动部署项目 ​

1、在远程服务器的/root中

sh
mkdir mr-airbnb # 创建文件夹

2、在本地打包项目

sh
npm run build

3、将打包的目录/build/文件夹中的内容复制(上传)到远程服务器的/root/mr-airbnb/目录中

4、配置nginx

见：3.2.2 配置nginx

5、重启nginx

sh
systemctl restart nginx

安装MySQL ​

在 CentOS 上使用 dnf 命令安装 MySQL，可以按照以下步骤进行：

  1. 使用 SSH 工具连接到远程服务器。

  2. 以 root 用户身份登录。

  3. 执行以下命令更新系统：

    Copy Codesudo dnf update

  4. 执行以下命令安装 MySQL：

    Copy Codesudo dnf install @mysql

  5. 安装过程中会提示输入MySQL root用户密码，输入密码后继续安装。

  6. 安装完成后，执行以下命令开启 MySQL 服务并设置开机自启动：

    Copy Codesudo systemctl enable --now mysqld

  7. 验证 MySQL 是否已成功安装和运行，可以执行以下命令：

    Copy Codesudo systemctl status mysqld

如果 MySQL 正确安装并运行，将会显示服务状态为 active (running)。

至此，在 CentOS 远程服务器上通过 dnf 命令安装 MySQL 的流程已经完成。

错误日志 ​

jenkins构建权限拒绝 ​

*问题：*jenkins构建时报 Permission denied 错误

image-20230211165027345

原因： 没有权限进行读、写、创建文件、删除文件等操作

解决： 在终端中输入命令 sudo chmod -R 777 /工作目录 ，再重新构建

vite部署二级路由前缀 ​

问题： vite部署时，前缀 /trip2 问题

配置：

  • 1、在 vite.config.js 文件中

    image-20230211171302982

  • 2、在 router 中

    image-20230211171334831

  • 3、在 linux 服务器中，设置 nginx.config 文件

    image-20230211171900764

jenkins构建内存溢出 ​

失败报错： FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory

失败分析： 服务器内存溢出导致打包失败

尝试一： 增加node内存

sh
# 1. 安装increase-memory-limit
npm install -g increase-memory-limit
# 2. 运行
increase-memory-limit
# 3. 在jenkins中重新构建

结果：无效，还把服务干崩溃了

尝试二： 清除服务器buff/cache

1、通过free查看服务器内存使用情况

sh
[root@ls-XmlqK5Oe ~]# free -h
              total        used        free      shared  buff/cache   available
Mem:          1.9Gi       934Mi        76Mi       2.0Mi       965Mi       893Mi
Swap:            0B          0B          0B

2、清除buff/cache

sh
[root@ls-XmlqK5Oe ~]# echo 1 > /proc/sys/vm/drop_caches
[root@ls-XmlqK5Oe ~]# echo 2 > /proc/sys/vm/drop_caches
[root@ls-XmlqK5Oe ~]# echo 3 > /proc/sys/vm/drop_caches

3、清除后效果

sh
[root@ls-XmlqK5Oe ~]# free -h
              total        used        free      shared  buff/cache   available
Mem:          1.9Gi       905Mi       806Mi       2.0Mi       264Mi       926Mi
Swap:            0B          0B          0B

4、在jenkins中重新构建

5、结果： 依然不行