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

2023-09-03 23:39:00

系列文章目录

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

文章目录

请添加图片描述
在这里插入图片描述

前言

我们在第一章里，在云服务里配置了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、登录华为云服务，找到产品页

在这里插入图片描述

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

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

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

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

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

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

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

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

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

1.4.1、配置服务器密码

在这里插入图片描述

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
在这里插入图片描述

1.4.2.2、更改安全组

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

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

登录云服务器，运行sudo cat /credentials/password.txt命令行获取宝塔管理界面用户名及密码。可查看到管理员用户名为administrator。
在这里插入图片描述
也可以登录云服务器，运行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获取的用户名密码，单击“登录”。
在这里插入图片描述

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

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

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

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

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

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

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

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

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

在这里插入图片描述

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

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

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

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

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

5.1、nginx配置到首页管理

在【软件商店】里，配置nginx为【首页显示】
在这里插入图片描述

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

在这里插入图片描述

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;
    }

在这里插入图片描述

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

首先【重载配置】，然后【重启】服务
在这里插入图片描述
在这里插入图片描述

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
在这里插入图片描述

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

在这里插入图片描述

6.3、重新编译项目

6.3.1、快捷打开项目根目录

在这里插入图片描述

6.3.2、编译项目

输入命令：mvn clean package
在这里插入图片描述

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 &

在这里插入图片描述

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

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

总结

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

更多推荐

正则表达式的学习笔记

[!note]其实这个正则表达式整体上不难,自从这个gpt出来之后这种正则表达式已经不需要我们去写了,我们并不需要自己能够去写特别深奥的代码,我们可以将这个正则表达式交给gpt去做,我们只需要能够看懂就行了,所以学习这个正则表达式,自己写不出来那种比较难的正则没有事情,只要你能够看懂别人给你的,你就达标了正则表达式的练

redis学习

Redis​redis是一个开源的使用ansic语言编写、支持网络、可基于内存亦可持久化的日志型、key-value数据库，并提供多种语言的api。从2010年3月15日起，redis的开发工作由vmware主持.和MySQL一样都是数据仓库，用于存放数据的仓库，存储和管理磁盘查询数据时顺序IO随机IOmysqI底层使

Leetcode算法入门与数组丨5. 数组二分查找

文章目录1二分查找算法2二分查找细节3二分查找两种思路3.1直接法3.2排除法1二分查找算法二分查找算法是一种常用的查找算法，也被称为折半查找算法。它适用于有序数组的查找，并通过将待查找区间不断缩小一半的方式来快速定位目标值。算法思想如下：首先，确定待查找数组的起始位置（通常为数组的第一个元素）和结束位置（通常为数组的

微服务08-认识和使用SpringAMQP

1.AMQP的认识1.1介绍AMQP是什么？看完你就知道了_hello_读书就是赚钱的博客-CSDN博客_amqp好处：什么connection：消息队列的连接、channel：服务发送接收消息的通道、Queue：消息队列——>这些你都不需要自己编写工作过程：发布者（Publisher）发布消息（Message），经由

常见的查找算法以及分块搜索算法的简明教程

顺序查找最基本的查找算法举例//顺序查找publicstaticintsearchSequence(int[]arr,inttarget){inti=0;for(intarr2:arr){if(arr2==target){returni;}i++;}return-1;}二分查找[!warning]值得注意的是这个二分查

Go的性能优化建议

前言：\textcolor{Green}{前言：}前言：💞这个专栏就专门来记录一下寒假参加的第五期字节跳动训练营💞从这个专栏里面可以迅速获得Go的知识Go的性能优化建议3性能优化建议3.1性能优化建议-Benchmark3.2性能优化建议-slice3.3性能优化建议-Map3.4性能优化建议-字符串处理3.5性能

【AI视野·今日CV 计算机视觉论文速览 第248期】Mon, 18 Sep 2023

AI视野·今日CS.CV计算机视觉论文速览Mon,18Sep2023Totally83papers👉上期速览✈更多精彩请移步主页Interesting:📚Robuste-NeRF,处理高速且大噪声事件相机流的NERF模型。(fromNUS新加坡国立)稀疏噪声事件与稠密事件数据的区别：模型架构：项目网站：https:

Python网络编程(socket)

网络编程指的是：在程序中实现两台计算机之间的通信。Python提供了大量网络编程的工具和库，本文重点学习socket和select模块。网络编程涉及许多关于TCPIP的基础知识，本文默认对这些知识已经了解了，不再对TCPIP相关的知识进行学习。socket模块这个模块提供了访问BSD套接字的接口。在所有现代Unix系统

开始在 Windows 上将 Python 用于 Web 开发

🎬岸边的风：个人主页🔥个人专栏:《VUE》《javaScript》⛺️生活的理想，就是为了理想的生活!目录设置开发环境安装适用于Linux的Windows子系统设置VisualStudioCode创建新项目安装Python、pip和venv创建虚拟环境打开WSL-Remote窗口安装MicrosoftPython扩

【C# 基础精讲】抽象类与接口

抽象类（AbstractClass）和接口（Interface）是面向对象编程中两种重要的概念，它们用于定义类的结构、行为和关系，是实现多态性、代码复用和系统设计的关键手段。在C#及其他面向对象编程语言中，抽象类和接口都发挥着重要作用。本文将详细解释抽象类和接口的概念、特点、用法以及在C#中的应用。1.抽象类的概念与特

同城信息服务源码 本地生活服务小程序源码

同城信息服务源码本地生活服务小程序源码功能介绍：基本设置：网站参数、安全设置、分站管理、支付设置、操作日志、地区设置、公交地铁、国际区号、清理缓存、模板风格、模块管理、域名管理、底部菜单、消息通知、登录设置其他设置：关键词管理、单页文档、网站公告、帮助信息、网站协议、广告设置、友情链接、举报管理、意见反馈、投诉列表短信

热文推荐
  1. 华为云云耀云服务器L实例评测｜用Python的Flask框架加Nginx实现一个通用的爬虫项目

    🏆作者简介，黑夜开发者，CSDN领军人物，全栈领域优质创作者✌，CSDN博客专家，阿里云社区专家博主，2023年6月CSDN上海赛道top4。🏆数年电商行业从业经验，AWS/阿里云资深使用用户，历任核心研发工程师，项目技术负责人。🎉欢迎👍点赞✍评论⭐收藏文章目录🚀一、前言-关于Flask框架🚀二、功能描述�

  2. Java 代理模式之静态代理与动态代理

    1，代理模式代理模式给某一个对象提供一个代理对象，并由代理对象控制对原对象的引用。通俗的来讲代理模式就是我们生活中常见的中介。代理模式的目的：（1）通过引入代理对象的方式来间接访问目标对象，防止直接访问目标对象给系统带来的不必要复杂性；（2）通过代理对象对访问进行控制；代理模式一般会有三个角色：抽象角色：指代理角色和真

  3. C++内存管理

    目录一.new和delete二.operatornew与operatordelete函数三.new和delete的实现原理四.在VS2022编译器下new和delete不匹配的问题五.定位new六.malloc/free和new/delete的区别七.C++内存分布八.内存泄漏C++在内存管理上引入了两个操作符，分别是

  4. 性能测试 —— Tomcat监控与调优：status页监控

    Tomcat服务器是一个免费的开放源代码的Web应用服务器，Tomcat是Apache软件基金会(ApacheSoftwareFoundation)Jakarta项目中的一个核心项目，由Apache、Sun和其他一些公司及个人共同开发而成。Tomcat是一个轻量级应用服务器，在中小型系统和并发访问用户的场合下被普遍使用

  5. STM32 EtherCAT 总线型（1 拖 4）步进电机解决方案

    第1章概述技术特点支持标准100M/s带宽全双工EtherCAT总线网络接口及CoE通信协议一进一出（RJ45接口），支持多组动态PDO分组和对象字典的自动映射，支持站号ID的自动设置与保存，支持SDO的电机参数设置与自动保存。自动适配市面上EtherCAT总线主站系统或PLC运动控制器，如TwinCAT,Cod

  6. 【Unity实战】从零手戳一个库存背包系统

    文章目录前言素材开始一、绘制背包UI二、背包开启关闭三、初始化背包网格四、添加物品五、拖拽交换功能物品六、物品拆分七、物品堆叠八、拖拽还原九、引入字典存储数据十、拾取物品十一、丢弃物品最终效果源码完结前言库存背包系统是大多数游戏的关键部分，几乎在每种类型的游戏都可能会用到，今天我将带你从零实现一个能够进行拖放的库存拆分

  7. Linux学习第13天：嵌入式LinuxLED驱动开发：一字一符总见情

    在正式写这篇笔记前，有一个事情必须要说一下。昨天更新的基于API函数的字符设备驱动开发按照正常的教程来说应该在本笔记后一天更新才对。但是由于我一时的疏忽，跳过了本笔记。在昨天学习基于API函数的时候造成了一定程度的困扰。今天重翻教程的时候才发现昨天漏了一节，今天补上。从这件小小的事情上我也明白了一个道理，学习不可一蹴而

  8. React中组件通信01——props

    React中组件通信01——props1.父传子——props1.1简单例子——props1.2props可以传递任何数据1.2.1传递数字、对象等1.2.2传递函数1.2.3传递模版jsx2.子传父+子传子——props2.1父传子——传递函数2.2子传父——通过父传子的函数实现2.3优化+子传子（兄弟通信）3.re

  9. Spring工厂模式，模拟ApplicationContext实现

    一、什么是SpringSpring是一个轻量级的Java企业开发解决方案。它集合了众多优秀的设计模式如：单例、代理、工厂模式等。在这其中最基础的也就是工厂模式。二、Spring为什么是轻量级在Spring问世之前JavaEE开发主流使用EnterpriseJavaBean（EJB）来进行。但是这个框架是重量级的，扩展性