springboot+vue前后端分离-使用腾讯云服务器部署网站

项目打包

参考链接

CSDN

springboot打包

idea默认新建的shell窗口在项目根目录位置，可以看到项目根目录下有mvnw

HELP.md         log             mvnw            mvnw.cmd        pom.xml         src             target

 ./mvnw clean package -Dmaven.test.skip=true

打包结果输出到target目录（clean表示先清理target目录上次打包内容，再进行这次打包）
-Dmaven.test.skip=true 表示自动测试案例不需要打包

vue打包

npm run build

打包成功后可以得到dist目录，这个目录就是整个项目打好的包。

服务器申请

腾讯云
我选择的轻量云服务器，最低配置。小网站，不考虑高带宽场景应该是够用了。

选择系统

建议centos或ubuntu，不要用opencloudos这个国产系统，bug太多！！！
如果你已经创建了一个服务器实例，想要更换服务器系统，可以在实例详情里重装系统

这里建议你装好系统后登陆服务器实例，并创建一个你的目录例如“/mydict”之类的
后续你的项目文件都可以上传到这里

域名解析挂载

腾讯云域名管理指引
你可以直接在已经创建的服务器实例的详情中找到域名管理页面，在那里可以申请域名。
域名申请需要保证不与现有域名重复，并且要缴费，这个很便宜。
申请好域名以后可以在刚刚这个域名管理页面添加域名，绑定到你的服务器实例的公网IP(可以在服务器实例详情页找到公网IP和内网IP)

注意：如果你之前有IP绑定过这个域名，建议你先去把这个绑定删掉，不然你的域名解析会解析到老IP。域名绑定的IP，以及DNS管理请到这里腾讯云DNS管理

域名绑定IP弄好以后，我建议你先通过本地的dos或者shell窗口ping一下你的IP和你的域名看看是不是都通了，并且域名是不是解析到你绑定的域名了。

ping 你的IP:端口 或者 你的域名

防火墙

服务器实例有防火墙管理页面，可以看到默认的http端口是80。
因为我们打算做前后端分离，同时前后端服务都放到同一个服务器实例上部署，所以后端springboot服务需要一个启动端口，例如你可以在springboot项目的application.properties中配置启动端口为8081

server.port=8081

然后在你的防火墙管理页面添加8081的允许访问规则，不然防火墙不允许访问这个端口，你的前端页面无法从这个端口获取后台服务接口功能。也就无法获取数据展示到页面。（ps：当然你的前端项目也得访问对应服务器 公网IP:8081 才能获取数据）
当然你需要开启跨域访问通行

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 允许跨域的路径
                .allowedOrigins("xxx","xxx","xxx") // 允许跨域请求的域名
//                .allowedOrigins("https://localhost")
                .allowedMethods("GET", "POST", "PUT", "DELETE") // 允许的请求方法
                .allowedHeaders("*") // 允许的请求头
                .allowCredentials(true); // 是否允许证书（cookies）
    }
}

云数据库

我这里使用的是腾讯云的轻量数据库（MySQL）
对于小网站来说够用了，选了最便宜的。

创建数据库和表，并录入数据

数据库实例登陆之后你就能可视化的创建数据库和表了，数据库编码格式我选的utf-8。

springboot访问云数据库

我是用的jdbc方式，比较直接。当让你也可以选择jpa，就是jpa会报一个错，说不能识别腾讯云mysql的方言，估计又是腾讯自己搞得事，不跟国际标准接轨，所以我选择了jdbc。不论哪种方式连接mysql，都要配置application.properties。

spring.application.name=项目名称
# 这个链接地址你可以在腾讯云mysql的实例信息上找到
spring.datasource.url=jdbc:mysql://localhost:3306/your_database?useSSL=false
spring.datasource.username=数据库用户名
spring.datasource.password=密码
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

找一个ftp工具软件上传打好的项目包

mac上免费的一个ftp工具软件OpenSFTP

服务器环境准备

java

首先你需要下载对应你项目jdk版本的jdk安装包，同时你得考虑哪个jdk可以安装到你服务器的系统环境。
这里我选择的是x64 Compressed Archive【https://download.oracle.com/java/23/latest/jdk-23_linux-x64_bin.tar.gz (sha256)】
jdk官方下载
通过
将下载到本地电脑的jdk通过ftp软件上传到服务器上的目录下（前面你自己创建的）
先cd到对应目录

cd /mydict

解压缩

tar -zxvf jdk-8uXXX-linux-x64.tar.gz

解压完成后会产生一个jdk文件夹
这个文件夹就是你的jdk安装路径
接下来修改系统配置项

vim /etc/profile

按i键，打开编辑模式
将你的安装路径配置到profile文件里

export JAVA_HOME=/path/to/jdk
export PATH=$PATH:$JAVA_HOME/bin

最后是的profile系统配置文件生效

source /etc/profile

这时jdk安装好了，你可以检查安装是否成功。

java -version

显示jdk的版本信息就是成功了。

nginx（推荐安装方式）

在CentOS 7上安装Nginx可以通过EPEL仓库来进行。以下是安装Nginx的步骤：

首先，添加EPEL仓库：

sudo yum install epel-release

然后，安装Nginx：

sudo yum install nginx

启动Nginx服务：

nginx

设置Nginx开机自启：

sudo systemctl enable nginx

可以通过运行以下命令来检查Nginx是否正在运行：

sudo systemctl status nginx

如果您的服务器安全组或防火墙设置正确，您现在应该能够通过浏览器访问Nginx的默认欢迎页面，URL通常是 http://your_server_ip/ 或者 http://localhost/。（腾讯云服务器会显示一个centos系统介绍页面，不知道为啥不是welcome to nginx）

以上步骤会在CentOS 7上安装Nginx的最新稳定版本。如果需要更高版本的Nginx，您可能需要从源代码编译或者寻找第三方仓库。

如果你想要查看nginx目前监听的端口（nginx一般默认监听80端口，因为这个端口一般默认是http端口）

sudo netstat -tulnp | grep :80

如果想要自行下载nginx进行安装

nginx官方下载
建议选择和你系统对应的路径下的安装包
例如我这里是centos7，所以路径要选择http://nginx.org/packages/centos/7/
至于http://nginx.org/packages/centos/7/x86_64/RPMS/后面这个/x86_64可以通过输入

arch

查看你系统的架构
/RPMS表示想要下载.rpm的安装包

在Linux中，可以使用rpm命令来安装RPM软件包。基本命令格式如下：

rpm -ivh package_name.rpm

其中，-i代表安装，-v代表详细输出，-h代表显示安装进度。

例如，如果你有一个名为example.rpm的软件包，你可以使用以下命令来安装它：

rpm -ivh example.rpm

如果你需要解决软件包的依赖问题，可以使用–nodeps选项来忽略依赖，但这通常不推荐，因为这可能导致系统不稳定：

rpm -ivh --nodeps example.rpm

如果你的系统使用的是新版的RPM包管理器（RPM 5以上版本），也可以使用dnf命令来安装RPM包：

dnf install example.rpm

dnf会自动解决依赖问题。

启动项目

jar包启动（必须nohup运行，否则会随着访问会话关闭运行）

nohup java -jar xxx.jar

配置nginx

编辑nginx配置vim /etc/nginx/nginx.conf
可以看到nginx将你vue打包的dist目录作为前端展示的项目根路径，并且默认展示index.html。
并且将展示的页面都推送到80端口，这和默认的服务器火墙配置一致。（http默认访问80端口）

    server {
        listen 80;
        listen [::]:80;
        server_name 你的域名.com www.你的域名.com;
        root /mydict/dist;
        index index.html;
        location / {
            root /mydict/dist;
            try_files $uri $uri/ /index.html;
            expires 30d;
        }
     }

重新加载nginx nginx -s reload
如果需要启动nginx nginx

验证网站

到这里你就可以通过互联网访问你自己注册域名的网站了。

如果你还想用Django进行网站部署

CSDN

如果你想使用腾讯云提供的一件部署网站

官方指引