文件上传

使用 winscp将windows上的项目上传到云服务器中，具体参考：

https://cloud.tencent.com/document/product/1207/53134

安装前后端依赖

# 更新软件包
sudo apt upadte

**更改文件夹权限, **这一步很重要!

前端部署

安装 Node.js

sudo apt install nodejs npm
# 查看node,npm版本
node -v
npm -v

构建项目

cd frontend
npm install
npm run build

构建后会生成 dist文件夹

开发环境中不需要使用 npm run dev, nginx自动代理

配置nginx,将 dist文件夹交给nginx代理

# 前端静态文件
location / {
    root /path/to/frontend/dist;
    index index.html;
    try_files $uri $uri/ /index.html;
}

后端部署

安装 jdk和 maven

sudo apt install openjdk-17-jdk maven
java -version
mvn -v

连接数据库

# 安装数据库
sudo install mysql

编写 application.properties或 application.yml中数据库的配置

spring.datasource.url=jdbc:mysql://localhost:3306/votesystem?useSSL=false&useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai&allowPublicKeyRetrieval=true
spring.datasource.username=voteuser
spring.datasource.password=你的密码

构建并启动后端

cd backend
mvn clean package
# 运行
java -jar target/*.jar

使用 nohup守护进程后台进行

nohup java -jar target/你的jar包名.jar > backend.log 2>&1 &

在 nginx配置文件中让nginx代理8080端口

# 后端API代理
    location /api/ {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

**注意: **没有完整这一步, 虽然会出现能正常打开界面,但是数据显示不全。这里让ai查了半天也没找到, 直接复制default的内容也没找到问题

配置web服务器

安装nginx

sudo apt install nginx

配置文件

vim /etc/nginx/sites-available/default

nginx配置示例

server {
    listen 80;
    root /home/ubuntu/projects/votesystem/frontend/dist;
    index index.html index.htm;

	# `_`为域名，这里没有购买，就不配置
    server_name _;

    # 前端静态文件
    location / {
        root /path/to/frontend/dist;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    # 后端API代理
    location /api/ {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

测试配置是否生效

sudo nginx -t

重载nginx使配置生效

sudo systemctl reload nginx

重启nginx

sudo systemctl restart nginx

启动

sudo systemctl start nginx

停止

sudo systemctl stop nginx

查看运行状态

sudo systemctl status nginx

注意事项

• winscp传输不了文件,可能是权限问题, 在上传完文件后,要将所有的文件的权限全部由root改为当前用户
• 使用 chrome浏览器调试, 不要选择 firefox