生产环境,我们一般都是通过Nginx反向代理后端服务,完成如下步骤即可。

Nginx配置:

server {
    listen       80;
    server_name  demo.maku.net;
    
    # 前端
    location /maku-cloud {
        alias /work/www/maku-cloud-admin;
        index index.html;
    }
	
    # 后端
    location /maku-cloud-server/ {
        proxy_pass      http://127.0.0.1:8080/
        client_max_body_size 1024m;
        proxy_set_header  X-Real-IP  $remote_addr;
        proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header  Host $host;
        proxy_redirect    off;
    }
}

重启Nginx

service nginx restart

修改前端接口

配置好Nginx后,还需要修改一下前端工程的.env.production文件,把访问地址改成后端Nginx地址,然后通过npm run build打包,把dist里面的文件,上传到/work/www/maku-cloud-admin目录。

VITE_API_URL=http://demo.maku.net/maku-cloud-server

访问项目

完成上面的步骤,就可以访问项目了,访问地址如下所示:

http://demo.maku.net/maku-cloud