宝塔前后端分离项目部署

### 如何在宝塔面板上部署前后端分离的项目 #### 部署前准备 为了成功完成项目的部署，需确保服务器已安装并运行宝塔面板。可以通过执行以下命令来快速安装宝塔面板[^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("前后端分离项目已经成功部署!") ```

宝塔面板是一款免费的服务器管理面板，可以帮助用户快速部署各种Web应用程序。在部署前后端分离项目时，需要分别部署前端和后端。 1. 部署后端 首先，需要在宝塔面板上安装需要的环境，比如PHP、MySQL等。然后，将后端代码上传到服务器上，可以使用FTP工具或者宝塔面板的文件管理器。 接着，需要创建一个数据库，并将后端代码中的数据库配置修改为正确的信息。最后，启动后端服务，可以使用宝塔面板的进程管理器或者命令行方式启动。 2. 部署前端 前端部署较为简单，只需要将前端代码上传到服务器上即可。可以使用FTP工具或者宝塔面板的文件管理器上传。 需要注意的是，前端代码通常是静态资源，可以使用Nginx等Web服务器进行部署。在宝塔面板上，可以通过添加网站来配置Nginx服务器，将前端代码部署到网站目录下即可。 3. 配置反向代理 为了让前端能够访问后端接口，需要在Nginx服务器中配置反向代理。具体操作为，在网站配置文件中添加如下代码： ``` location /api { proxy_pass http://localhost:8080; } ``` 其中，/api是前端访问后端接口的路径，http://localhost:8080是后端服务的地址。通过配置反向代理，前端就可以访问后端接口了。 4. 配置域名和SSL证书 为了让网站更加安全和方便访问，可以配置域名和SSL证书。在宝塔面板上，可以通过添加网站来配置域名和SSL证书。具体操作可以参考宝塔面板的文档。 以上就是在宝塔面板上部署前后端分离项目的步骤。需要注意的是，不同的项目可能会有一些差异，具体操作可以根据项目需求进行调整。