Linux云服务器实现若依前后端部署最终实现外网访问(全流程详细教程)

部署听起来简单,但是要实现部署这个动作,需要很多前置工作,比如有一台服务器,服务器上需要安装系统需要的环境还有中间件等,然后是打包项目,最后将项目放到服务器上。

下面我们依次来说这个教程,中间涉及到的安装也都有对应的文章进行参考,可以直接点链接去查看,里面有对应的步骤及命令,安装不分前后顺序,最终只需要把所有必要安装的都安装完成即可。

一、服务器购买

使用虚拟机或云服务器

虚拟机就使用VMWare,安装一个CentOS7镜像
云服务器我这里用的是阿里云的,操作系统都是 CentOS7
阿里云服务器入门使用教程——购买及操作系统选择并进行远程连接

二、服务器环境安装

需要安装jdk,mysql,redis,nginx

三、项目打包

1.后端打包

在idea中maven工具栏中依次点击下面三个命令进行项目打包
在这里插入图片描述
打包成功
在这里插入图片描述
打包成功后找到ruoyi-admin下的这个jar包,这个就是我们要的
在这里插入图片描述

2.前端打包

前端打包直接使用readme.md文档中的这两个命令
都可以使用,一个是构建测试环境,一个是构建生产环境

npm run build:prod

在这里插入图片描述
构建成功后目录中就多了一个dist包,这里面的东西就是打包好的前端项目
在这里插入图片描述

四、服务器部署

1.后端部署

后端部署就是将jar包传到服务器上,然后运行jar包

上传jar包

自己创建一个目录来存放jar包,使用finalshell工具将jar包上传到对应目录

jar包启动命令

java -jar -Xmx1024M -Xms256M /www/wwwroot/default/infoProject/ruoyi-admin.jar

在这里插入图片描述

启动jar包

在这里插入图片描述
直接访问后端地址,成功
在这里插入图片描述

2.前端部署

前端部署就是将前端打包好的dist包放到nginx服务器指定目录下面

上传到nginx

找到nginx安装目录下的html文件夹,将dist文件夹上传到该目录下
在这里插入图片描述

修改nginx配置文件

将下面这段配置加到http块下
主要有两个地方,
一个是root,这里的路径是刚刚上传dist的路径
一个是proxy_pass,这里是后端jar包的访问路径

    server
    {
        listen 80;
        server_name infoproject;

        location / {
          root   /www/server/nginx/html/project/infoproject/dist;
          try_files $uri $uri/ /index.html;
          index  index.html index.htm;
        }
        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://11.11.78.99:9205/;
        }
    }
配置的解释:
1. server
server {
    listen 80;
    server_name infoproject;
  • server 块定义了一个虚拟服务器。
  • listen 80; 表示该服务器监听80端口(HTTP默认端口)。
  • server_name infoproject; 表示该服务器块将处理主机名为 infoproject 的请求。
2. location /
    location / {
        root   /www/server/nginx/html/project/infoproject/dist;
        try_files $uri $uri/ /index.html;
        index  index.html index.htm;
    }
  • location / 块定义了如何处理根路径 / 的请求。
  • root /www/server/nginx/html/project/infoproject/dist; 指定了该位置的根目录,即请求的文件将从该目录中查找。
  • try_files $uri $uri/ /index.html; 表示Nginx会尝试按顺序查找文件:
    1. 首先查找请求的URI对应的文件($uri)。
    2. 如果找不到,尝试查找URI对应的目录($uri/)。
    3. 如果仍然找不到,则返回 /index.html 文件。
  • index index.html index.htm; 指定了默认的索引文件,即当请求的URI是一个目录时,Nginx会尝试返回 index.htmlindex.htm 文件。
3. location /prod-api/
    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://11.11.78.99:9205/;
    }
  • location /prod-api/ 块定义了如何处理以 /prod-api/ 开头的请求。
  • proxy_set_header 指令用于设置传递给后端服务器的HTTP头信息:
    • Host $http_host; 将原始请求的 Host 头传递给后端服务器。
    • X-Real-IP $remote_addr; 将客户端的真实IP地址传递给后端服务器。
    • REMOTE-HOST $remote_addr; 将客户端的真实IP地址传递给后端服务器(与 X-Real-IP 类似)。
    • X-Forwarded-For $proxy_add_x_forwarded_for; 将客户端的原始IP地址添加到 X-Forwarded-For 头中,通常用于记录请求的原始来源。
  • proxy_pass http://11.11.78.99:9205/; 表示将所有匹配 /prod-api/ 的请求转发到 http://11.11.78.99:9205/ 这个后端服务器。

到这里就能够访问到登录界面了,验证码也能够出来,就算是部署成功了
在这里插入图片描述

问题
1.前端打包并配置nignx后,一直转圈,访问不到静态资源

在这里插入图片描述

原因:nginx配置问题
解决:检查nginx配置

2.验证码图片不显示

在这里插入图片描述

解决:前端重新打包部署

3.无限弹窗

在这里插入图片描述

解决:后端路径问题,url后少加一个/

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

丿BAIKAL巛

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值