前后端分离项目使用宝塔部署

### 如何在宝塔面板上部署前后端分离的项目 #### 部署前准备 为了成功完成项目的部署，需确保服务器已安装并运行宝塔面板。可以通过执行以下命令来快速安装宝塔面板[^2]。 ```bash yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh ``` #### 安装环境 进入宝塔面板后，在软件商店中安装所需的运行环境，例如 Nginx、MySQL 和 PHP（如果后端服务依赖于 Java，则无需安装 PHP）。这些组件的选择取决于具体的应用需求[^3]。 --- #### 前端 Vue 项目部署流程 ##### 1. **本地启动前端项目** 在开发环境中正常启动前端项目，并记录下其使用的端口号。这一步是为了验证前端功能是否正常工作。 ##### 2. **打包前端项目** 通过构建工具将前端代码打包成静态文件。通常情况下可以使用如下命令： ```bash npm run build ``` 完成后会在 `dist` 文件夹中生成生产环境可用的静态资源文件。 ##### 3. **上传前端项目** 登录到宝塔面板中的文件管理器，找到目标站点根目录并将之前打包好的 `dist` 文件夹内的所有内容复制进去。 ##### 4. **创建 PHP 站点** 尽管这里是 Vue.js 的前端应用，但由于历史原因或者习惯问题，仍然会以“PHP”作为网站类型创建新站点。填写域名等相关信息即可。 ##### 5. **开放必要的端口** 前往【安全】模块，添加防火墙规则允许外部访问该前端所监听的服务端口。 ##### 6. **测试前端页面** 打开浏览器输入绑定的域名地址确认首页加载无误即表示此部分已完成设置。 --- #### 后端 Boot 项目部署流程 ##### 1. **本地调试后端程序** 同样先保证后端能够在本机环境下稳定运作再考虑上线迁移事宜。 ##### 2. **调整数据库连接参数** 依据实际线上情况重新设定数据源链接字符串等内容以便匹配新的主机配置。 ##### 3. **编译压缩后端工程** 利用 Maven 或 Gradle 对 Spring Boot 应用进行打包操作得到最终可执行 jar 包文件: ```bash mvn clean package -DskipTests=true ``` ##### 4. **后台持续运行模式(no hup)** 把刚才获得的结果传输至远程 Linux 实例之后采用 nohup 方式保持进程存活状态: ```bash nohup java -jar your-application.jar > app.log 2>&1 & ``` 另外也可以借助宝塔内置的任务计划功能实现相同效果而不需要手动编写脚本. ##### 5. **监控日志输出状况** 随时关注控制台打印出来的消息判断是否存在异常现象发生从而及时作出反应处理. ##### 6. **检验接口响应质量** 最后再次尝试调用几个典型 API 接口看看返回结果是不是符合预期标准证明整个环节都搭建好了. --- #### NGINX 反向代理配置 为了让客户端能够顺利请求到对应的 RESTful Web Service ，还需要进一步编辑虚拟主机下的 nginx.conf 文件加入类似下面这样的片段定义映射关系[^4]: ```nginx location /api/ { proxy_pass http://localhost:8080/; } ``` 注意替换其中涉及的具体 host 地址以及 port 数字使之适应实际情况。 --- ```python print("前后端分离项目已经成功部署!") ```