阿里云效前端流水线自动化部署

一、权限准备如果你想实现这个功能那么你的云效必须要有权限这非常重要如何确定自己是否有相关权限呢流水线权限制品仓库权限就是云服务器的权限这个权限是要你可以读写文件的权限。二、云服务器准备 – 基本的环境部署如果是已经搞好了可以跳过需要云服务器具备nginxpm2 nodejs的环境。下载工具filezilla 下载地址putty或者xshellputty以下演示的是centos环境的如果是Ubuntu环境请自行ai安装以下环境命令nginxyum install nginx -ysystemctl start nginxsystemctl enable nginx如果安装失败yum install -y epel-release // 先下官方源yum install -y nginxsystemctl start nginxsystemctl enable nginx安装 Node.js 18前端必须curl -fsSL https://deb.nodesource.com/setup_18.x | bash -yum install -y nodejs验证node -vnpm -v安装 pm2守护进程关闭终端不挂npm install pm2 -g配置nginx查看nginx配置的位置nginx -t找到nginxconf文件正确配置nginx就行以下是参考。可以先自己手动打个包放上去看能不能访问到# For more information on configuration, see:# * Official English Documentation: http://nginx.org/en/docs/# * Official Russian Documentation: http://nginx.org/ru/docs/user nginx;worker_processes auto;error_log /var/log/nginx/error.log;pid /run/nginx.pid;# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.include /usr/share/nginx/modules/*.conf;events{worker_connections1024;}http{log_format main$remote_addr - $remote_user [$time_local] $request $status $body_bytes_sent $http_referer $http_user_agent $http_x_forwarded_for;access_log /var/log/nginx/access.log main;sendfile on;tcp_nopush on;tcp_nodelay on;keepalive_timeout65;types_hash_max_size4096;include /etc/nginx/mime.types;default_type application/octet-stream;# Load modular configuration files from the /etc/nginx/conf.d directory.# See http://nginx.org/en/docs/ngx_core_module.html#include# for more information.include /etc/nginx/conf.d/*.conf;server{listen80;server_name 服务器ip或者是域名;location /{proxy_pass http://127.0.0.1:3000;proxy_http_version1.1;proxy_set_header Upgrade$http_upgrade;proxy_set_header Connectionupgrade;proxy_set_header Host$host;proxy_cache_bypass$http_upgrade;proxy_set_header X-Real-IP$remote_addr;}}# Settings for a TLS enabled server.## server {# listen 443 ssl http2;# listen [::]:443 ssl http2;# server_name _;# root /usr/share/nginx/html;## ssl_certificate /etc/pki/nginx/server.crt;# ssl_certificate_key /etc/pki/nginx/private/server.key;# ssl_session_cache shared:SSL:1m;# ssl_session_timeout 10m;# ssl_ciphers PROFILESYSTEM;# ssl_prefer_server_ciphers on;## # Load configuration files for the default server block.# include /etc/nginx/default.d/*.conf;## error_page 404 /404.html;# location /40x.html {# }## error_page 500 502 503 504 /50x.html;# location /50x.html {# }# }}手动打包测验可以先手动打一个包扔进服务器然后进入项目目录执行 这里我用的是nuxt3大家仅供参考。反正就是把进程启动起来就行。pm2 start .output/server/index.mjs --name “nuxt3”然后在浏览器里输入你的ip能看见你打包的项目网页即算成功环境部署完毕。三、云效制品库配置四、创建流水线按顺序添加任务步骤比较麻烦的是主机部署最后一个任务新建主机组新建主机把红框一段直接复制到服务器运行就行。完事刷新以下就会看到你的主机勾选上你的主机放到这个主机组上面ok现在就完成这个流水线的创建啦五、服务器脚本执行 命令后复制以下内容cat /web/deploy.sh ‘EOF’#!/bin/bashset-e# 找到压缩包PKG$(find/web-maxdepth1-name*.tgz|head-n1)if[-z$PKG];thenechoERROR: 未找到部署包exit1fiecho解压部署包...tarzxf$PKG-C/webrm-f$PKGecho重启 Nuxt 服务...pm2 restart nuxt3-app||pm2 start /web/.output/server/index.mjs--namenuxt3-appecho✅ 部署成功六、验证流水线回到我们的云效把云效的流水线点击运行看能否运行成功成功即可。七 tag触发我的示例是在勾选tag时触发的流水线tag就是更新标签标签可以通过git自行手动打当然也有插件可以实现自动打的。现在我们演示使用插件自动打tag触发流水线的运行pnpmadd-Dstandard-version在package.json的script里面加入命令releases:standard-version git push --follow-tags origin master,releases:custom:standard-version -r 把代码合并上传到master分支后执行pnpmreleases这样就可以自动打上版本号以及tag了触发流水线运行。执行 releases:custom 可以自己手动填写版本号哦