1、准备清单
服务器相关:
ubuntu18.04\node16.20.1\npm\yarn\pnpm\mysql\nignx\pm2\lrzsz\unzip
阿里云效相关:
可部署测试的nest\nuxt2\vue3项目代码库、流水线的主机组(阿里云效助手)、阿里云效流水线
2、服务器环境配置
2.1 一台测试服务器
腾讯云(1核 2GB 1Mbps)
已预装Ubuntu Server 18.04 LTS 64位
2.2 安装node16.20.1
// 1. 更新
sudo apt-get update
// 2.安装nodejs指定版本,包含npm(替换数字即可)
curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt-get install -y nodejs
node -v
npm -v
// 3. 查看npm源
sudo npm config get registry
// 4. 设置npm包为淘宝镜像源
sudo npm config set registry https://registry.npm.taobao.org
sudo npm i -g npm@9.8.0
2.3 安装yarn
// 1、通过 `curl` 命令下载 Yarn 的公钥 `pubkey.gpg`,命令将公钥添加到系统的密钥链中
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
// 2、命令将输出的文本写入
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
// 3、命令用于刷新可用的软件包列表,以获取最新的软件包信息
sudo apt update && sudo apt install yarn
yarn --version
2.4 安装pnpm
sudo npm i -g pnpm
pnpm -v
2.5 安装mysql-server
// 安装命令
sudo apt-get install mysql-server // 会出现界面让你输入root的密码
sudo apt install mysql-cilent
sudo apt install libmysqlcilent-dev
// 测试是否安装成功,出现下图则成功
sudo netstat -tap | grep mysql
设置mysql远程连接
// 1、初次进入mysql(root无密码)
sudo mysql -u root
// 2、创建远程连接mysql 帐号、密码
create user '帐号'@'%' identified with mysql_native_password by '密码';
// 3、给新帐号设置数据库权限
grant all privileges on *.* to '帐号'@'%' with grant option;
// 4、刷新用户权限表
flush privileges;
// 5、设置远程可访问,如下图
cd /etc/mysql/mysql.conf.d
sudo vim mysqld.cnf
// 注释掉
# bind-address=127.0.0.1
// 自定义可用端口
port = 3306
// ESC键 → :wq(保存并退出) → 回车
// 重启mysql
service mysql restart
// 查看端口,远程连接端口是否已开启
sudo netstat -tln
// 查看mysql状态
systemctl status mysql.service
// 用数据库连接工具测试是否可以链接,成功后将要测试数据表导入,方便后续测试
2.6 安装nginx
// 1、安装
sudo apt-get install nginx
// 2、启动
sudo /etc/init.d/nginx start
// 3、开启启动
sudo systemctl enable nginx
// 4、查看状态
sudo systemctl status nginx
2.7 安装pm2、lrzsz、lrzsz
// 1、安装pm2
sudo npm install pm2 -g
// 2、安装rz/sz 安装用以上传本地文件到服务器
sudo apt-get install lrzsz
// 3、安装unzip 安装zip解压软件
sudo apt-get install unzip
3、阿里云效部署流水线
3.1 将项目上传云效代码仓库
上传nest\nuxt2\vue3项目代码到云效仓库
3.2 添加流水线的主机组
(1)登录云效——切换进入“流水线”面板
(2)“流水线”面板——点击“设置”
(3)设置——主机组管理——新建主机组——自有主机
(4)自有主机——复制导入新机器
(5)ssh 进入服务器——粘贴上述命令,并执行
(6)命令:sudo systemctl status aliyun.service 查询执行后状态
(7)命令:sudo /home/staragent/bin/staragentctl status 查询阿里云助手状态
完成以上步骤后,完成组机组添加;
3.3 添加阿里云效流水线,部署接口、前台、后台项目
3.3.1 创建Nest.js接口流水线
(1)在服务器上创建目录
mkdir api(2)git clone 到指定目录中
// 进入api文件夹 cd api // git克隆项目 git clone -b master https://codeup.aliyun.com/代码源.git . // 保存git拉取代码源账号密码 git config credential.helper store // 测试是否成功拉取 git pull // 上传正式环境文件及pm2启动文件:.env.production、ecosystem.config.js(3)我的流水线——新建流水线,如下图选择node.js模版
(4)补充完整基本信息:流水线名称、环境(日常、预发、正式)
(5)流程配置——流水线源:选择Codeup代码源、代码仓库、master分支、开启代码源触发;如下图操作
(6)主机部署:选择主机组、用户、部署脚本、部署策略
// 目标文件夹 cd /mnt/aliyun_wuliu_query/api // 重新拉取分支 git fetch --all && git reset --hard origin/master && git pull origin master // 重新安装依赖 pnpm install // 项目打包 pnpm build // pm2 重启项目 pm2 restart ecosystem.config.js
完成以上配置后,运行流水线,成功后如下图
进入服务器,进入root用户下,pm2 list,查看项目是否已启动,如下图
(7) 修改目录:/etc/nginx/sites-available 下代理文件
location ~* /aliyun_wuliu_query/api { rewrite /aliyun_wuliu_query/api/(.*) /$1 break; proxy_pass http://127.0.0.1:8888; // 改为本地服务器IP及项目启动引用的端口 proxy_redirect default; proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-Proto https; proxy_set_header X-Forwarded-For $remote_addr; proxy_set_header X-Forwarded-Host $remote_addr; proxy_connect_timeout 300; proxy_read_timeout 300; proxy_send_timeout 300; proxy_buffer_size 64k; proxy_buffers 4 32k; proxy_busy_buffers_size 64k; proxy_temp_file_write_size 64k; }添加如上配置后,重启nginx
// 重启nginx,然后如下图请求下接口是否可以正常使用 sudo nginx -s reload
接口项目流水线部署完成~
3.3.2 创建Vue3后台流水线
(1)在服务器上创建目录
mkdir admin(2)我的流水线——新建流水线,如下图选择node.js模版
(3)补充完整基本信息:流水线名称、环境(日常、预发、正式)
(4)流程配置——流水线源:选择Codeup代码源、代码仓库、master分支、开启代码源触发;如下图操作
(5)Node.js构建
【Node.js构建】选择node版本、运行命令
// 安装依赖 pnpm install // 项目打包 pnpm build【构建物上传】设置
(6)主机部署:选择主机组、下载路径、执行用户
// 移除原先目录下文件 rm -rf /mnt/aliyun_wuliu_query/admin/* // 解压到指定目录 tar zxvf /mnt/aliyun_wuliu_query/distAdmin.tgz -C /mnt/aliyun_wuliu_query/admin
(7) 修改目录:/etc/nginx/sites-available 下代理文件
location /aliyun_wuliu_query/admin { alias "/mnt/aliyun_wuliu_query/admin"; index index.html; try_files $uri $uri/ /aliyun_wuliu_query/admin/index.html; }添加如上配置后,重启nginx
// 重启nginx,然后如下图是否可以访问 sudo nginx -s reload
后台项目流水线部署完成~
3.3.3 创建Nuxt前台流水线
(1)在服务器上创建目录
mkdir nuxt_ssr_2(2)我的流水线——新建流水线,如下图选择node.js模版
(3)补充完整基本信息:流水线名称、环境(日常、预发、正式)
(4)流程配置——流水线源:选择Codeup代码源、代码仓库、master分支、开启代码源触发;如下图操作
(5)Node.js构建
【Node.js构建】选择node版本、运行命令
// 安装依赖 yarn install // 项目打包 yarn build // 生成静态文件 yarn generate【构建物上传】设置
(6)主机部署:选择主机组、下载路径、执行用户
// 移除原先目录下文件 rm -rf /mnt/aliyun_wuliu_query/nuxt_ssr_2/* // 解压到指定目录 tar zxvf /mnt/aliyun_wuliu_query/dist_ssr.tgz -C /mnt/aliyun_wuliu_query/nuxt_ssr_2
(7) 修改目录:/etc/nginx/sites-available 下代理文件
location /nuxt_ssr { alias "/mnt/aliyun_wuliu_query/nuxt_ssr_2"; index index.html; try_files $uri $uri/ /nuxt_ssr/index.html; }添加如上配置后,重启nginx
// 重启nginx,然后如下图是否可以访问 sudo nginx -s reload
Nuxt前台项目流水线部署完成~
结束语
通过实际服务器环境配置、创建项目流水线,了解了Nest.js、Vue3、Nuxt.js项目基础配置、部署流程。
其中在初次主机组部署Vue3项目时11次构建、部署流水线报错,根据报错不断调试。
(1)报错:构建失败;
(2)报错:构建时,组件属性失败;
(3)报错:部署时,因为阿里云助手机器未正常导致失败,阿里云解答;
(4)报错:部署时,部署命令有误导致失败;