从零开始的vue项目打包部署到服务器运行

### RuoYi-Vue 项目在阿里云上的部署教程 #### 准备工作 为了顺利地将RuoYi-Vue项目部署至阿里云环境，需提前完成一系列准备工作。这包括但不限于选购合适的ECS实例、配置安全组规则以及准备必要的软件开发工具包(SDK)[^1]。 #### ECS 实例创建与基础设置 选择适合业务需求的ECS实例规格非常重要；对于大多数中小型应用而言，2核2GB内存搭配40GB硬盘的空间通常已经足够满足日常运行所需[^2]。购买完成后应立即登录阿里云控制台调整对应的安全策略，开放HTTP(80)及HTTPS(443)端口访问权限以便后续Web服务正常运作。 #### 安装依赖组件 进入已开通的Linux虚拟机内部执行命令行操作来安装Java JDK和其他必备库文件。考虑到CentOS系列发行版的特点，推荐采用yum源的方式快速获取最新稳定版本： ```bash sudo yum update -y && sudo yum install java-1.8.0-openjdk-devel git wget unzip nginx mariadb-server -y ``` 上述指令一次性完成了JDK下载安装、Git版本控制系统引入、Wget/Unzip辅助程序加载还有Nginx反向代理服务器架设以及MariaDB数据库引擎初始化等多项任务。 #### 下载并编译前端工程 通过克隆官方GitHub仓库地址获得最新的RuoYi-Vue前端源码副本之后，在本地环境中利用Node.js平台下的npm或yarn工具链实施打包构建动作。具体做法如下所示： ```bash cd /root/ git clone https://github.com/y_project/RuoYi-Vue.git ruoyi-vue-front cd ruoyi-vue-front npm config set registry http://registry.npmmirror.com npm i pnpm -g pnpm i pnpm run build:prod ``` 这里特别强调一点：鉴于国内网络状况特殊性考量，默认镜像站被切换为中国科学技术大学提供的加速站点以提高资源拉取效率。 #### 后端部分处理方式 针对后台管理系统的搭建，则主要围绕Spring Boot框架展开讨论。先是从远程仓库同步下整套解决方案再按照既定流程逐步推进直至最终成品出炉为止： ```bash cd .. wget https://github.com/y_project/RuoYi/releases/download/v4.2.0/ruoyi-vue.zip unzip ruoyi-vue.zip mv ruoyi-vue ruoyi-admin chown -R root.root ruoyi-admin chmod +x ruoyi-admin/*.sh sed -i 's/^server.port=.*/server.port=8089/' ruoyi-admin/application.yml sed -i '/spring.datasource.url=/c\spring.datasource.url=jdbc:mysql:\/\/localhost:3306\/ruoyi?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=false' ruoyi-admin/application.yml sed -i '/spring.datasource.username=/c\spring.datasource.username=root' ruoyi-admin/application.yml sed -i '/spring.datasource.password=/c\spring.datasource.password=' ruoyi-admin/application.yml ./ruoyi-admin/shell/start.sh ``` 以上脚本实现了压缩包解压重命名、修改启动参数设定MySQL连接字符串等一系列自动化作业逻辑。 #### Nginx 反向代理配置优化 为了让外部能够顺畅浏览网站页面内容，还需要精心设计一套高效的负载均衡机制——即借助于高性能轻量级web server(Nginx)，将其作为前置调度器负责接收客户端请求并将之转发给实际提供服务的应用层容器内监听着不同TCP/IP协议簇接口的服务进程去响应处理。编辑`nginx.conf`样例如下： ```nginx http { ... upstream backend { server localhost:8089; } server { listen 80; server_name your-domain-name; location / { proxy_pass http://backend/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; add_header Cache-Control no-cache; expires off; } location /static/ { alias /data/applications/nginx/html/static/; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } } ``` 值得注意的是，此处定义了一个名为`upstream`的上游节点池用于指向后端API网关所在位置，并且指定了静态资源映射路径确保HTML/CSS/JS等素材可以正确显示出来[^4]。 最后重启Nginx使更改生效即可实现完整的前后端分离架构模式下的在线办公管理系统[RuoYi](https://doc.ruoyi.vip/)成功上线运营！