[记录]腾讯云ubuntu18.04配置可阿里云效流水线部署nest+nuxt2+vue3的环境

748 阅读4分钟

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位

image.png

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

image.png

设置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(保存并退出) → 回车

image.png

// 重启mysql
service mysql restart
// 查看端口,远程连接端口是否已开启
sudo netstat -tln
// 查看mysql状态
systemctl status mysql.service
// 用数据库连接工具测试是否可以链接,成功后将要测试数据表导入,方便后续测试

image.png

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

1690601122175.jpg

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项目代码到云效仓库

image.png

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)报错:部署时,部署命令有误导致失败;