前后端分离项目在云服务器的部署

目录

后端部署

前端部署

后端部署

先把springboot项目在本地打成jar包：

打完jar包在下面的位置

打开文件所在本地位置

然后在云服务器上建一个专门放jar包的地方（看个人习惯），这里我建了个文件夹来存放，进入之后将上面的jar包拖入其中

然后启动运行（前台运行，关闭窗口之后就停止服务了，这里进行测试是否能访问到后端）

java -jar + jar包名

如果报错误

就是端口被占用，我的端口是8080

lsof -i :8080

然后杀死进程，再查看就没有了

kill -9 22112

然后就再启动，就启动成功了

然后在本地浏览器访问项目的一个接口，访问成功了说明后端部署成功

地址是：云服务器ip地址:8080(自己的项目的端口号)/xxx(项目的接口)

Ctrl+C：退出

前端部署

在下面的这个文件加右边的一段话

//打包配置文件
module.exports = {
  assetsDir: 'static',
  parallel: false,
  publicPath: './',
};

然后在终端输入命令进行打包

npm run build:prod

打包之后会有一个dist

然后在云服务器上可以创建一个文件夹，将这个dist文件夹直接拖进去

然后修改nginx配置文件

listen       80;
        server_name  localhost;
        root   /usr/src/vueDist/dist/;  #vue文件dist的完整路径 
        sendfile        on;
	    tcp_nopush      on;
	    default_type text/html;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            #root   html;
            #index  index.html index.htm;
            index  /index.html;
		   try_files $uri $uri/ /index.html;
        }

         location /prod-api/ {
            proxy_pass http://xxxxxx: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;
            
            # 可选：WebSocket支持
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
        }

listen:80 是利用nginx启动前端的接口

先要在云服务器上放开防火墙端口

然后在云服务器安全组开放端口80

然后启动nginx:./nginx

nginx常用命令：

进入nginx/sbin目录中执行如下命令：

• 启动：./nginx
• 重启：./nginx -s reload
• 关闭：./nginx -s stop

然后在浏览器输入去看前台有没有部署好：云服务器ip:80（nginx端口）

出现你项目的页面就算成功

然后用下面的方式启动后台（这个方式不会随着会话框关闭）

nohup.out用作日志存放，不用自己建

nohup java -jar 项目名 nohup.out(日志存放) &

有问题可以查看日志，大多是端口被占用，用上面的方法查看并删除重新启动即可

cat nohup.out

启动成功之后刷新前台页面项目就部署成功啦