华为云云服务器评测宝塔+nginx 同时部署Springboot、Vue项目

阳光穿透心脏的1/2处 2023-10-15 15:44 27阅读 0赞

## 系列文章目录 ##

[华为云云服务器评测 第一章 \[linux实战\] 华为云耀云服务器L实例 Java、node环境配置][_ _linux_ _L_ Java_node]  
[华为云云服务器评测 第二章 \[linux实战\] Unbutnu添加SSH Key、启动Springboot项目][_ _linux_ Unbutnu_SSH Key_Springboot]  
[华为云云服务器评测 第三章 \[linux实战\] 使用Vue3、Element-plus菜单组件构建轮播图][_ _linux_ _Vue3_Element-plus]  
[华为云云服务器评测 第四章 \[linux实战\] 宝塔+nginx 同时部署Springboot、Vue项目][_ _linux_ _nginx _Springboot_Vue]

--------------------

### 文章目录  系列文章目录  @\[TOC\](文章目录)  前言  内容概述  1、找到宝塔服务入口、找到宝塔登录名、密码、绑定宝塔账  1.1、登录华为云服务，找到产品页  1.2、华为云耀云服务L实例页面  1.3、搜索【宝塔初始化】，点开【初始化宝塔面板 - 云耀云服务器L实例】  1.4、跟着文章操作，进入宝塔面板  1.4.1、配置服务器密码  1.4.2、配置宝塔的安全组，入规则添加8888端口  1.4.2.1、找到宝塔要配置的端口  1.4.2.2、更改安全组  1.4.3、登录服务器终端，获取宝塔登录名、密码  1.4.4、在浏览器里访问宝塔  1.4.4、在浏览器里访问宝塔  2、在宝塔里配置终端环境  在宝塔的终端里添加主机信息，填入【服务器IP】、【密码】即可，第二次会免密自动进入； !\[在这里插入图片描述\](https://img-blog.csdnimg.cn/184e28714c2b470a83695653ebb4e4e1.png)  3、使用宝塔的【软件商店】，找到nginx，并找到nginx的html目录  4、使用宝塔的【终端】，打包编译Vue项目  4.1、查看【第三章】,使用npm run build打包编译Vue项目  4.2、打包后的dist文件夹里的内容拷贝到【/www/server/nginx/html】  4.3、此时就可以看到Vue的博物馆管理系统首页了  5、此时要部署Springboot项目了，我们采用代理转发端口的方式，修改nginx配置，在80端口监听下增加路径映射，映射到8080端口  5.1、nginx配置到首页管理  5.2、从首页里点开【nginx服务】  5.3、 在【nginx管理】里，切换到【配置修改】  5.4、 在【nginx管理】里，切换到【服务】  5.5、此时已完成nginx转发配置  6、修改Springboot的yml文件，配置端口8080并启动服务  6.1、找到yml配置文件  6.2、双击【application.yml】文件，编译端口  6.3、重新编译项目  6.3.1、快捷打开项目根目录  6.3.2、编译项目  6.3.3、查看是否已启动Java项目  6.4、以后台模式启动项目  6.5、此时就可以看到csdn批量质量分查询系统了  总结 ###

![请添加图片描述][6af8ec3d5f5b4eaaa7ddff2cada95141.gif]  
![在这里插入图片描述][a4e2159152ca40079fb5fec7fb0148e7.png]

## 前言 ##

我们在第一章里，在云服务里配置了Java后端环境（JDK、Maven）、Vue前端环境（Node、Npm），并配置了git代码管理工具；  
在第二章里，往github里添加了SSH Key，在云服务器里拉取Springboot项目代码并启动；  
在第三章里，在云服务器里拉取Vue项目代码并启动;  
在本章节里，我们讲述下华为云服务的宝塔运维工具、nginx服务代理功能的使用，主要解决同时部署Springboot、Vue项目问题。

--------------------

## 内容概述 ##

1、找到宝塔服务入口、找到宝塔登录名、密码、绑定宝塔账号、安装nginx；  
2、在宝塔里配置终端环境；  
3、使用宝塔的【软件商店】，找到nginx，并找到nginx的html目录，华为云服务为：/www/server/nginx/；  
4、使用宝塔的【终端】，打包编译Vue项目，打包后的dist文件夹里的内容拷贝到【/www/server/nginx/html】，此时就可以看到Vue的博物馆管理系统首页了；  
5、此时要部署Springboot项目了，我们采用代理转发端口的方式，修改nginx配置，在80端口监听下增加路径映射，映射到8080端口；  
6、修改Springboot的yml文件，配置端口8080并启动服务，此时就可以看到csdn质量分查询系统首页了。

--------------------

## 1、找到宝塔服务入口、找到宝塔登录名、密码、绑定宝塔账 ##

### 1.1、登录华为云服务，找到产品页 ###

![在这里插入图片描述][aad49bf72b024d10b333d01a331afbd4.png]

1、在【首页】的【产品】页找到【华为云耀云服务L实例】，鼠标单击进入【华为云耀云服务L实例】概览页面；  
![在这里插入图片描述][a355e79eb758489b9fdd7918c62e9f14.png]

2、如果【首页】的【产品】页里，没有【华为云耀云服务L实例】选项，我们使用鼠标单击【查看所有产品】，进入【华为云产品】页面；然后在【华为云产品】页面的【精选推荐】处可以找到【华为云耀云服务L实例】，鼠标单击进入【华为云耀云服务L实例】概览页面；

![在这里插入图片描述][aa1cc1139f6740929d4c10538726681c.png]  
![在这里插入图片描述][a355e79eb758489b9fdd7918c62e9f14.png]  
3、前2步的分支都会进入【华为云耀云服务L实例】概览页面，我们继续鼠标单击【控制台】，进入【华为云耀云服务L实例控制台】，可以看到我们购买的华为云耀云服务L实例。  
![在这里插入图片描述][2b9b8d33867c4deeb37b353ddd3dab29.png]

### 1.2、华为云耀云服务L实例页面 ###

在【华为云耀云服务L实例】页面，可以看到有【宝塔 Linux 面板 8.0.0.1】标记，代表此服务器自带宝塔运维工具  
![在这里插入图片描述][a79b3259971941f7acbc2062051bdca2.png]

### 1.3、搜索【宝塔初始化】，点开【初始化宝塔面板 - 云耀云服务器L实例】 ###

搜索【宝塔初始化】，跳转到页面：https://www.huaweicloud.com/s/JeWuneWhlOWIneWni-WMliU  
点开【初始化宝塔面板 - 云耀云服务器L实例】  
![在这里插入图片描述][55785daad8fa4339bcab9fbd4dc85e56.png]

### 1.4、跟着文章操作，进入宝塔面板 ###

在【1.2】处，鼠标单击【BT-cn-south-1-89ik】区域，进入【BT-cn-south-1-89ik】这台云耀云服务L实例管理界面；

#### 1.4.1、配置服务器密码 ####

![在这里插入图片描述][c181fa8bb68947d79e9a409ed0bb8f71.png]

#### 1.4.2、配置宝塔的安全组，入规则添加8888端口 ####

##### 1.4.2.1、找到宝塔要配置的端口 #####

找到【镜像信息】-【宝塔Linux面板8.0.0.1】下的【管理】，可以看到地址后面的端口：http://139.159.230.49:8888/login?err=1，这里就找到了我们需要的端口：8888

公网IP：139.159.230.49  
宝塔端口：8888  
![在这里插入图片描述][a98288ea7ebd4156a870b5327d2c9add.png]

##### 1.4.2.2、更改安全组 #####

1、单击云耀云服务器L实例卡片，进入资源页面。  
2、在左侧列表中单击“云耀云服务器L实例”，单击云服务器名称，进入云服务器详情页面。  
3、选择“安全组”页签，单击“添加规则”，添加如下规则配置。  
4、本例只添加基本规则，您可根据需要添加更多规则。  
![在这里插入图片描述][dbb6989c40c5438aba782bb562ebec26.png]  
![在这里插入图片描述][acdbdcafb6df4c81ba4344a1118ddba9.png]  
![在这里插入图片描述][4994c5c30a5a4d51830c5352dbe4c93a.png]

#### 1.4.3、登录服务器终端，获取宝塔登录名、密码 ####

登录云服务器，运行sudo cat /credentials/password.txt命令行获取宝塔管理界面用户名及密码。可查看到管理员用户名为administrator。  
![在这里插入图片描述][d9ff98f0a7dce4fd456affd5239eb339.png_pic_center]  
也可以登录云服务器，运行cd /www/server/panel && btpython tools.py panel passwd administrator命令直接设置管理员密码。其中，“passwd”为管理员administrator的密码。例如cd /www/server/panel && btpython tools.py panel abc123456 administrator，指管理员administrator的密码为abc123456。

#### 1.4.4、在浏览器里访问宝塔 ####

地址：http://139.159.230.49:8888/login?err=1（见【1.4.2】）

#### 1.4.4、在浏览器里访问宝塔 ####

输入步骤1获取的用户名密码，单击“登录”。  
![在这里插入图片描述][eed06100eadecb8ad92338c8d45cb8dd.png_pic_center]

登录后如果出现如下提示，请单击“未有账号，免费注册”在宝塔官网注册。  
在宝塔官网注册后，在这里输入注册的手机号和密码登录宝塔面板。  
![在这里插入图片描述][9dcba68c19e919639a792c22d8792ca6.png_pic_center]

安装基础组合软件。  
请选择LNMP里的Nginx(由于内存只有2G，只需安装nginx即可)，其他选项全部设置为【不选中】，选择【极速安装】，选择LNMP这边的【一键安装】，等待安装直至结束。  
![在这里插入图片描述][b304a66f30052e7623e17c98b0487f50.png_pic_center]

## 2、在宝塔里配置终端环境 ##

### 在宝塔的终端里添加主机信息，填入【服务器IP】、【密码】即可，第二次会免密自动进入；   ![在这里插入图片描述][184e28714c2b470a83695653ebb4e4e1.png] ###

## 3、使用宝塔的【软件商店】，找到nginx，并找到nginx的html目录 ##

使用宝塔的【软件商店】，找到nginx，并找到nginx的html目录，华为云服务器的nginx目录为：/www/server/nginx/  
conf: 里面存放的是配置文件  
html：里面存放的是静态资源文件  
![在这里插入图片描述][f6ea2f4c16cc4afe9ff7151ab139a313.png]  
![在这里插入图片描述][418e06d9a4ff4f08a1763a97e532db31.png]

--------------------

## 4、使用宝塔的【终端】，打包编译Vue项目 ##

使用宝塔的【终端】，打包编译Vue项目，打包后的dist文件夹里的内容拷贝到【/www/server/nginx/html】

### 4.1、查看【第三章】,使用npm run build打包编译Vue项目 ###

![在这里插入图片描述][b1794059e0974c4c9815f9d53fae03d1.png]

### 4.2、打包后的dist文件夹里的内容拷贝到【/www/server/nginx/html】 ###

使用cp或者mv命令，移动dist下的文件/文件夹到【/www/server/nginx/html】目录下  
![在这里插入图片描述][a5fcfa5fde814b8286bfcd9b5e90ee1a.png]

### 4.3、此时就可以看到Vue的博物馆管理系统首页了 ###

访问地址：http://139.159.230.49/  
**图片没有做优化，是保存在云服务器里，通过云服务器流量提供服务，所以加载比较慢**  
![在这里插入图片描述][46ad0891c22a4616b67eb0cfba561c05.png]

--------------------

## 5、此时要部署Springboot项目了，我们采用代理转发端口的方式，修改nginx配置，在80端口监听下增加路径映射，映射到8080端口 ##

### 5.1、nginx配置到首页管理 ###

在【软件商店】里，配置nginx为【首页显示】  
![在这里插入图片描述][6e54f0f9749b4b3f8cb5a4d563dfae01.png]

### 5.2、从首页里点开【nginx服务】 ###

![在这里插入图片描述][bdacdd3903b74ea5bac1672f861168e1.png]

### 5.3、 在【nginx管理】里，切换到【配置修改】 ###

修改地68行的【server】，修改80端口的监听配置，然后点击【保存】

server
        {
        
            listen 80;
            server_name http;
            index index.html index.htm index.php;
            root  /www/server/nginx/html;
    
            #error_page   404   /404.html;
           
    
            location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
            {
        
                expires      30d;
            }
    
            location ~ .*\.(js|css)?$
            {
        
                expires      12h;
            }
    
            location ~ /\.
            {
        
                deny all;
            }
            
            location /csdn
            {
        
                proxy_pass http://localhost:8080;
            }
           
            access_log  /www/wwwlogs/access.log;
        }

![在这里插入图片描述][529211b5cf2841b4a8dfc9e282e68569.png]

### 5.4、 在【nginx管理】里，切换到【服务】 ###

首先【重载配置】，然后【重启】服务  
![在这里插入图片描述][8a7b60cd7aa24ad59d099397bc51146c.png]  
![在这里插入图片描述][11021619ebcd45318250a665167c470e.png]

### 5.5、此时已完成nginx转发配置 ###

可见【5.3】代码区，本机80端口下的路径/csdn，代理本机的8080端口

server
    {
        
        ......
    	location /csdn
    	{
        
    	    proxy_pass http://localhost:8080;
    	}
    }

--------------------

## 6、修改Springboot的yml文件，配置端口8080并启动服务 ##

### 6.1、找到yml配置文件 ###

在文件里，输入项目存放yml配置文件的地方：/home/java/code/csdnQc/src/main/resources  
![在这里插入图片描述][b927d09861f74513b2ff61a8f116eeda.png]

### 6.2、双击【application.yml】文件，编译端口 ###

![在这里插入图片描述][25af65d511804a13ac4378bcf6f9bdf9.png]

### 6.3、重新编译项目 ###

#### 6.3.1、快捷打开项目根目录 ####

![在这里插入图片描述][4ce94311765d472580b446f3c2a10490.png]

#### 6.3.2、编译项目 ####

输入命令：mvn clean package  
![在这里插入图片描述][59c29605ee6f4f558798ae14c0a454d1.png]

#### 6.3.3、查看是否已启动Java项目 ####

> ps -ef | grep java  
> 如果有的话，使用kill -9命令kill掉Java进程

### 6.4、以后台模式启动项目 ###

> nohup java -jar spiderX-0.0.1-SNAPSHOT.jar >log.file 2>&1 &

![在这里插入图片描述][25478636193545fa81a1ab3368c266a4.png]

### 6.5、此时就可以看到csdn批量质量分查询系统了 ###

在浏览器输入地址，即可访问到csdn批量质量分查询系统了  
地址：http://139.159.230.49/csdn/static/index.html  
![在这里插入图片描述][a4e2159152ca40079fb5fec7fb0148e7.png]

--------------------

## 总结 ##

以上就是今天要讲的内容，本文介绍了在Ubuntu系统里，利用宝塔安装nginx、修改nginx配置、配置nginx本地代理、使用终端、编译Vue项目、 运行Vue项目、编译Springboot项目、运行Springboot项目等内容。使得Vue项目、Springboot项目，在云服务器只开放80端口的情况下，可以同时部署运行，其他更多的服务，也可采用同意的方式配置。

[_ _linux_ _L_ Java_node]: https://blog.csdn.net/s445320/article/details/132595417
[_ _linux_ Unbutnu_SSH Key_Springboot]: https://blog.csdn.net/s445320/article/details/132609542
[_ _linux_ _Vue3_Element-plus]: https://blog.csdn.net/s445320/article/details/132657721
[_ _linux_ _nginx _Springboot_Vue]: https://blog.csdn.net/s445320/article/details/132657661
[6af8ec3d5f5b4eaaa7ddff2cada95141.gif]: https://img-blog.csdnimg.cn/6af8ec3d5f5b4eaaa7ddff2cada95141.gif
[a4e2159152ca40079fb5fec7fb0148e7.png]: https://img-blog.csdnimg.cn/a4e2159152ca40079fb5fec7fb0148e7.png
[aad49bf72b024d10b333d01a331afbd4.png]: https://img-blog.csdnimg.cn/aad49bf72b024d10b333d01a331afbd4.png
[a355e79eb758489b9fdd7918c62e9f14.png]: https://img-blog.csdnimg.cn/a355e79eb758489b9fdd7918c62e9f14.png
[aa1cc1139f6740929d4c10538726681c.png]: https://img-blog.csdnimg.cn/aa1cc1139f6740929d4c10538726681c.png
[2b9b8d33867c4deeb37b353ddd3dab29.png]: https://img-blog.csdnimg.cn/2b9b8d33867c4deeb37b353ddd3dab29.png
[a79b3259971941f7acbc2062051bdca2.png]: https://img-blog.csdnimg.cn/a79b3259971941f7acbc2062051bdca2.png
[55785daad8fa4339bcab9fbd4dc85e56.png]: https://img-blog.csdnimg.cn/55785daad8fa4339bcab9fbd4dc85e56.png
[c181fa8bb68947d79e9a409ed0bb8f71.png]: https://img-blog.csdnimg.cn/c181fa8bb68947d79e9a409ed0bb8f71.png
[a98288ea7ebd4156a870b5327d2c9add.png]: https://img-blog.csdnimg.cn/a98288ea7ebd4156a870b5327d2c9add.png
[dbb6989c40c5438aba782bb562ebec26.png]: https://img-blog.csdnimg.cn/dbb6989c40c5438aba782bb562ebec26.png
[acdbdcafb6df4c81ba4344a1118ddba9.png]: https://img-blog.csdnimg.cn/acdbdcafb6df4c81ba4344a1118ddba9.png
[4994c5c30a5a4d51830c5352dbe4c93a.png]: https://img-blog.csdnimg.cn/4994c5c30a5a4d51830c5352dbe4c93a.png
[d9ff98f0a7dce4fd456affd5239eb339.png_pic_center]: https://img-blog.csdnimg.cn/img_convert/d9ff98f0a7dce4fd456affd5239eb339.png#pic_center
[eed06100eadecb8ad92338c8d45cb8dd.png_pic_center]: https://img-blog.csdnimg.cn/img_convert/eed06100eadecb8ad92338c8d45cb8dd.png#pic_center
[9dcba68c19e919639a792c22d8792ca6.png_pic_center]: https://img-blog.csdnimg.cn/img_convert/9dcba68c19e919639a792c22d8792ca6.png#pic_center
[b304a66f30052e7623e17c98b0487f50.png_pic_center]: https://img-blog.csdnimg.cn/img_convert/b304a66f30052e7623e17c98b0487f50.png#pic_center
[184e28714c2b470a83695653ebb4e4e1.png]: https://img-blog.csdnimg.cn/184e28714c2b470a83695653ebb4e4e1.png
[f6ea2f4c16cc4afe9ff7151ab139a313.png]: https://img-blog.csdnimg.cn/f6ea2f4c16cc4afe9ff7151ab139a313.png
[418e06d9a4ff4f08a1763a97e532db31.png]: https://img-blog.csdnimg.cn/418e06d9a4ff4f08a1763a97e532db31.png
[b1794059e0974c4c9815f9d53fae03d1.png]: https://img-blog.csdnimg.cn/b1794059e0974c4c9815f9d53fae03d1.png
[a5fcfa5fde814b8286bfcd9b5e90ee1a.png]: https://img-blog.csdnimg.cn/a5fcfa5fde814b8286bfcd9b5e90ee1a.png
[46ad0891c22a4616b67eb0cfba561c05.png]: https://img-blog.csdnimg.cn/46ad0891c22a4616b67eb0cfba561c05.png
[6e54f0f9749b4b3f8cb5a4d563dfae01.png]: https://img-blog.csdnimg.cn/6e54f0f9749b4b3f8cb5a4d563dfae01.png
[bdacdd3903b74ea5bac1672f861168e1.png]: https://img-blog.csdnimg.cn/bdacdd3903b74ea5bac1672f861168e1.png
[529211b5cf2841b4a8dfc9e282e68569.png]: https://img-blog.csdnimg.cn/529211b5cf2841b4a8dfc9e282e68569.png
[8a7b60cd7aa24ad59d099397bc51146c.png]: https://img-blog.csdnimg.cn/8a7b60cd7aa24ad59d099397bc51146c.png
[11021619ebcd45318250a665167c470e.png]: https://img-blog.csdnimg.cn/11021619ebcd45318250a665167c470e.png
[b927d09861f74513b2ff61a8f116eeda.png]: https://img-blog.csdnimg.cn/b927d09861f74513b2ff61a8f116eeda.png
[25af65d511804a13ac4378bcf6f9bdf9.png]: https://img-blog.csdnimg.cn/25af65d511804a13ac4378bcf6f9bdf9.png
[4ce94311765d472580b446f3c2a10490.png]: https://img-blog.csdnimg.cn/4ce94311765d472580b446f3c2a10490.png
[59c29605ee6f4f558798ae14c0a454d1.png]: https://img-blog.csdnimg.cn/59c29605ee6f4f558798ae14c0a454d1.png
[25478636193545fa81a1ab3368c266a4.png]: https://img-blog.csdnimg.cn/25478636193545fa81a1ab3368c266a4.png