部署SpringBoot+Vue的网站

本文最后更新于：几秒前

大事件部署

云服务器购买

首先在腾讯云申请使用云服务器，(云产品免费体验馆_云产品免费试用_个人云产品试用-腾讯云)。

点击使用即可（这里选择腾讯云预装的宝塔服务器）：

腾讯云服务器试用

宝塔面板

完成一系列验证后进入控制台点击轻量级应用服务器

点击重置密码来设置root密码等下登录时要用

通过远程连接工具XShell连接该实例

SSH连接服务器

输入主机地址和用户名密码后连接到主机，在控制台输入(这里是root登录，可以不用sudo)

1	`sudo /etc/init.d/bt default`

此时会显示宝塔的用户名密码

宝塔面板账号密码

此时需要在腾讯云设置防火墙放行端口，由于宝塔默认端口是8888，这里防火墙先放行8888，待会在宝塔面板可以改其端口（这里由于我改了面板为2090所以放行2090）

此时可以通过http://[公网IP]:8888tencentcloud来访问宝塔面板

输入刚刚获取到的账号密码即可登录

登录后会要求你绑定宝塔账号，这里不多赘述。

待完成后安装必要软件：Ngnix、MySql、Redis、JDK、Node版本管理器

部署后端

宝塔面板点击文件将要部署的Jar包传入/www/wwwroot/下，点击网站->Java项目->添加Java项目选择Jar包和合适的JDK（对于特殊项目还需要将项目用户设置为root。

添加环境变量

这里是通过命令的形式添加项目运行时环境变量

1	`env ALIBABA_CLOUD_ACCESS_KEY_ID=id ALIBABA_CLOUD_ACCESS_KEY_SECRET=secret /www/server/java/jdk-17.0.8/bin/java -jar -Xmx1024M -Xms256M /www/wwwroot/big_event-0.0.1-SNAPSHOT.jar --server.port=8080`

完成后点击确定后运行即可。

部署前端-1

首先将node项目通过宝塔面板的文件传到/www/wwwroot/下（千万不要带着node module一起传），然后点击网站->node项目->添加node项目。

这里有个坑会在遇到的问题中讲。

如果部署失败可以在宝塔面板的终端选项进入前端目录执行命令。

部署前端-2

部署前端还可以通过nginx来实现，这里给出其步骤：

生成dist生产文件，因为nginx不能直接部署vue项目，所以需要通过指令

1	`npm run build`

生成dist文件夹，完成后宝塔面板点击网站->HTML项目

这里必须填写域名，你可以填写自己的域名，然后根目录选择刚刚生成的dish文件夹，点击创建即可，然后点击刚刚创建好的项目的设置->配置文件，设置好反向代理。

# 后端API代理
    location /api/ {
        proxy_pass http://localhost: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;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

在服务器安全组中设置好端口放行应该就能访问(这里指的是通过IP访问)。

部署数据库

在宝塔面板下载号数据库之后可能需要远程连接，此时就可能会出现root用户不能远程访问的问题，也就是root@localhost,此时执行如下语句

-- 创建用户
CREATE USER 'root'@'%' IDENTIFIED BY '???';
-- 授权
grant all privileges on *.* to 'root'@'%' ;

这里还需要注意一点，如果这里的root远程的密码与本地root密码不一样可能会出现某些问题，所以此处为解决此问题，在宝塔面板查看数据库的root密码将SQL语句的???替换就行。

此外记得执行刷新权限表的SQL

1	`FLUSH PRIVILEGES;`

还不能连接？

在腾讯云服务器的防火墙下添加3306端口放行就行。

遇到的问题

vue.config.js在部署时，应该修改server.host来让node.js监听公网地址，所以需要在其文件中这样设置：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { hostname } from 'node:os'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ], 
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('/src', import.meta.url))
    }
  },
  server: {
    proxy: {
      "/api": {
        target: "http://localhost:8080",
        changeOrigin: true,
        rewrite: (path)=>path.replace(/^\/api/,'')
      }
    },
    host: "0.0.0.0",
  }
})

如果不设置node.js会默认监听127.0.0.1此时即便你防火墙放开了通过公网IP访问前端界面也访问不了，会出现已拒绝连接的问题。

你可以通过端口扫描 - 站长工具来查看公网IP的对应端口是否开放。

同样地，假设需要将该node.js项目部署在80端口下也需要在此文件中加配置：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { hostname } from 'node:os'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ], 
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('/src', import.meta.url))
    }
  },
  server: {
    proxy: {
      "/api": {
        target: "http://localhost:8080",
        changeOrigin: true,
        rewrite: (path)=>path.replace(/^\/api/,'')
      }
    },
    host: "0.0.0.0",
    port: 80
  }
})