基于若依框架前后端分离的项目部署

腾讯云服务器 之 环境搭建

单项目的部署

项目目录

后端打包上传

• 查看端口号

  在ruoyi-admin的application.yml文件中

  

• 停止本地的运行，然后clean下，这样可以规避很多报错问题
  

• 找到ruoyi-admin，打包
  

• 打包完成后，打开ruoyi-admin所在的文件夹，进入target目录找到jar包
  

• 上传到服务器

  • 路径自己选，我是在data目录下创建了一个java文件夹，专门用来存放jar包的
    

  • 启动jar包 戳这里 → 项目部署笔记 之 jar包启动方式

    第一次启动还好，后续启动的时候建议先ps -ef查看是否已经启动，启动后需要杀掉之前的进程

    // 命令意思就不解释了，不明白的可以看jar包启动方式的博客
    nohup java -jar ruoyi-admin.jar >> info.log
    

前端打包上传

• 进入目录“employment-vue3”

  cd employment-vue3
  

• 打包

  npm run build:prod
  

• 注意在执行上边命令时，整个过程可以出现warn，但是不可以出现error
• 打包完毕
  
• 上传到 nginx目录下的html中

  • 进入html目录

    cd /usr/src/nginx/html
    

  • 上传（命令自行百度吧，我这边使用的是final shell可以直接上传）

  • 上传成功，记住该dist所在的位置

    /usr/src/nginx/html/dist

    

配置nginx

• 找到nginx.conf文件

  一般在你安装的nginx目录下的conf文件夹下

  

• 编辑conf文件

  worker_processes  1;events {worker_connections  1024;
  }http {include       mime.types;default_type  application/octet-stream;sendfile        on;keepalive_timeout  65;server {# 此为前端访问的端口，默认是80，如果有多个项目，这里需要更改listen       80;  server_name  你的服务器ip地址;charset utf-8r;location / {# 这里是前端的dist上传的地址，需要具体到dist目录下root   /usr/src/nginx/html/dist;index  index.html index.htm;try_files $uri $uri/ /index.html;}error_page   500 502 503 504  /50x.html;location /prod-api/ {proxy_set_header Host $http_host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;# 这里是后端设置的端口号proxy_pass http://localhost:8088/;}location = /50x.html {root   html;}}
  }
  

• 编辑完成后，重启配置文件

  • 进入sbin目录（即nginx安装目录下）
    

• 执行重新加载命令

  ./nginx -s reload
  

服务器打开防火墙

完成

两个项目的部署

两个项目介绍

• 一个是ruoyi-admin（我们上边已经部署完成了）
• 一个是info-manage

后端打包并上传

同单项目部署后端打包一样，记录下端口号8081：
1、打包
2、上传到data/java/目录下
3、启动jar包：nohup java -jar infomanage-admin.jar >> info.log &
（日志文件记得改一下）

前端打包并上传

单项目上传中我给dist文件存放的位置其实是有点不规范的，但是项目已经运行暂时不改，我们第二次上传的时候可以在html中创建一个以项目命名的文件夹，然后在文件夹中上传dist文件

nginx配置

• 在部署了单个服务后，我们可以看到server的内容为
  

• 我们可以仿照上边的server再复制一个

  修改前端访问的接口为18088，同步项目的后端接口为8081
  （18088这个数字是根据自己爱好来哈，不是强制的）
  （具体的配置信息看下方）

• 配置内容

  nginx的配置文件，删除掉了其他的注释信息，这里只粘贴了必要的内容

  // 
  worker_processes  auto;
  events {worker_connections  1024;
  }http {include       mime.types;default_type  application/octet-stream;sendfile        on;keepalive_timeout  65;server {listen       80;server_name  你的服务器地址;charset utf-8r;location / {root   /usr/src/nginx/html/dist;index  index.html index.htm;try_files $uri $uri/ /index.html;}error_page   500 502 503 504  /50x.html;location /prod-api/ {proxy_set_header Host $http_host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_pass http://localhost:8088/;}}server{#第二个项目的访问端口号listen       18088;server_name  你的服务器地址;charset utf-8r;location / {# 第二个项目的前端文件的路径root   /usr/src/nginx/html/info/dist;index  index.html index.htm;try_files $uri $uri/ /index.html;}error_page   500 502 503 504  /50x.html;location /prod-api/ {proxy_set_header Host $http_host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;# 第二个项目的后端端口proxy_pass http://localhost:8081/;}}
  }
  

• 重新加载配置文件

服务器端口开放

完成