返回

云服务器部署宝塔+nginx实现Springboot、Vue项目同台双宿双飞

后端

在云服务器上携手共进：宝塔、nginx、Vue 和 Springboot

在云服务器的广袤天地中，同时部署多个项目是一项常见的需求。然而，资源冲突和端口占用等问题往往令人头疼。别担心，今天我们带来一个绝妙组合——宝塔面板 + nginx，它将帮你在云服务器上轻松搭建一个和谐共处的环境，让 Springboot 和 Vue 项目无缝共舞。

1. 宝塔面板：一键部署，便捷起航

宝塔面板是一款备受青睐的服务器管理工具，以其傻瓜式操作和强大功能著称。

1.1 安装宝塔面板

首先，在云服务器上安装宝塔面板，一键安装脚本助你轻松搞定：

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh

1.2 配置宝塔面板

安装完成后，通过浏览器访问宝塔面板登录页面，默认用户名和密码都是“admin”。设置安全密码后，前往“软件商店”安装 nginx。

2. nginx：网站守护神，保驾护航

nginx，作为一款高性能 HTTP 服务器和反向代理服务器，是守护网站安全稳定的不二之选。

2.1 安装 nginx

宝塔面板已预装 nginx，在“网站”页面中点击“设置”即可。勾选“开启反向代理”开启反向代理功能。

2.2 配置 nginx

编辑 nginx 配置文件“/www/server/nginx/conf/nginx.conf”，修改以下部分：

location / {
    root   /www/wwwroot/default;
    index  index.html index.php;
}

将其修改为：

location / {
    proxy_pass http://127.0.0.1:8080;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

3. Vue 项目：前端领头羊，风采无限

Vue.js，作为渐进式 JavaScript 框架，凭借简洁语法和强大功能，深受前端开发者的喜爱。

3.1 编译 Vue 项目

安装 Node.js 并使用 npm 安装 Vue.js 和依赖包：

yum install -y nodejs
npm install vue
vue create my-vue-project
npm run build

4. Springboot 项目：后端王者，坚如磐石

Springboot，基于 Spring 框架的快速开发框架，以简便配置和强大功能著称。

4.1 编译 Springboot 项目

安装 Java 并使用 maven 编译 Springboot 项目：

yum install -y java-11-openjdk
mvn package

5. 启动项目，共享舞台，携手共进

5.1 启动 nginx

在宝塔面板“网站”页面中启动 nginx。

5.2 启动 Vue 项目

启动 Vue 项目，使用以下命令：

npm run serve

5.3 启动 Springboot 项目

启动 Springboot 项目，使用以下命令：

java -jar springboot-project.jar

结论

通过宝塔 + nginx 环境的搭建，我们成功实现了 Springboot 和 Vue 项目在同一云服务器上的共存运行。它们相互协作，发挥各自优势，打造出功能强大、稳定可靠的应用生态。

常见问题解答

  1. 如何在 nginx 中添加多个反向代理配置？

在 nginx 配置文件中，添加一个新的 location 块即可。例如，要反向代理到端口 8081 的另一个服务：

location /another-service {
    proxy_pass http://127.0.0.1:8081;
}
  1. 如何解决跨域问题？

在 nginx 配置文件中添加以下头部：

add_header Access-Control-Allow-Origin *;
  1. 如何自定义宝塔面板的登录页面？

编辑文件“/www/server/panel/data/config.json”，修改其中的“login_background”值。

  1. 如何修改 nginx 的侦听端口？

编辑 nginx 配置文件“/www/server/nginx/conf/nginx.conf”，修改其中的“listen”指令。

  1. 如何监控项目运行状态？

使用宝塔面板的“日志”功能，实时查看 nginx 和项目日志。