vue前后端打包部署记录

后端

1、后端打包一个jar包。
2、登陆阿里云购买服务器–控制台–云服务器 ECS–实例 （默认全配置好后）
3、服务器配置，点击更多>>网络和安全组>>安全组配置>>添加安全组(端口:80，授权对象：0.0.0.0/0)
3、window+R 打开并输出 mstsc 远程连接，默认3389端口。
3、在远程服务里需要下载java服务 jdk-11.0.8_windows-x64_bin。及nginx
4、在jar包的文件夹里的路径上cmd打开。并启动jar包，命令：java -jar redisson-demo-0.0.1-SNAPSHOT.jar &
其中 redisson-demo-0.0.1-SNAPSHOT.jar 为jar包名称。
5、jar包启动成功后可以看到端口：如：8081，把服务器ip+端口告诉前端用于打包

前端

1、前端打包，在封装axios的时候，在每个接口前面添加 api;

2、在axios请求拦截的时候判断是生产环境还是开发环境

3、代理培配置，api开头的加上域名、ip地址

4、npm run build 打包

nginx 配置

1、打开nginx 的 nginx.conf文件，修改server

//其中server_name为服务器地址或域名
     server {
    
    
        listen       80;
        server_name  139.129.220.121;
     }

2、添加代码

  location ^~/api/ {
    
    
          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-NginX-Proxy true;
         proxy_pass http://127.0.0.1:8081/; 
        }

3、修改好后把我们的前端包dist里的文件复制到 nginx的html文件夹里，双击重启nginx

4、访问 139.129.220.121 就能打开项目，且能够调用接口