Axum+Vue3前后端分离生产环境部署

SoulStranded2025-06-02 12:46

1.准备条件

前端已开发完成并可成功构建
后端已开发完成并可成功构建
已安装Nginx服务器

2.前端

前端使用Nginx托管静态文件

1.在项目根目录执行命令npm run build生成dist目录

2.将生成的dist目录复制到/var/www目录下面，例如/var/www/vue-project/dist

3.在目录/etc/nginx/sites-available下面创建服务配置文件vue-project.conf，内容如下：

bash 复制代码

server {
    listen 80;   # 监听端口号
    server_name yourdomain.com;    # IP或者域名
    
    location / {
        root /var/www/vue-project/dist;    # 静态文件根目录
        index index.html;    # 默认索引文件
        try_files $uri $uri/ /index.html;    # 处理所有路径请求
    }
    
    # 代理API请求到后端
    location /api/ {    # 将以/api开头的请求代理到后端服务
        proxy_pass http://localhost:8000/;     # 后端服务器地址
        proxy_set_header Host $host;    # HTTP请求头
        proxy_set_header X-Real-IP $remote_addr;    # 将客户端真实IP传递给后端
    }
}

4.使配置文件生效

ln -s /etc/nginx/sites-avaiable/vue-porject.conf /etc/nginx/sites-enabled/vue-project.conf

5.重新加载nginx服务

systemctl restart nginx

3.后端

后端使用systemd管理服务

1.在项目根目录先使用命令cargo build --release构建出二进制文件，产物路径为target/release/your_project_name

2.在目录/etc/systemd/system下创建配置文件，例如project_name.service，内容如下：

ini 复制代码

[Unit]
Description=SoulStranded Web Server   # 服务描述信息

[Service]
ExecStart=/root/workspace/project_name/target/release/project_name   # 构建产物二进制路径
WorkingDirectory=/root/workspace/soulstranded/backend    # 项目根目录
Restart=always    # 服务退出时自动重启

[Install]
WantedBy=multi-user.target    # 服务的启动级别依赖关系

3.启用并启动服务

bash 复制代码

sudo systemctl enable project_name
sudo systemctl start project_name