使用 Nginx 反向代理实现前后端分离部署

菜就多练习

于 2024-09-12 10:40:18 发布

阅读量134

点赞数 2

分类专栏：项目部署文章标签： nginx 运维 vue spring boot

本文链接：https://blog.csdn.net/m0_73310000/article/details/142168131

版权

项目部署专栏收录该内容

3 篇文章 0 订阅

订阅专栏

使用 Nginx 反向代理实现前后端分离部署

这里使用我的大二课程作业给大家在Windows下演示使用 Nginx 反向代理实现前后端分离部署

配置前端构建输出

打开你的 Vue 项目，在终端中输入npm run build命令，直到看见Build complete.说明打包完成

在这里插入图片描述

打包完成后你会在目录中看见一个dist文件夹，里面会有index.html文件和css、img、js等文件夹

在这里插入图片描述

将dist整个文件夹复制到 Nginx 根目录下的html文件夹中，同时可以修改文件夹为你需要的名字，我这里就叫maiba好了

在这里插入图片描述

设置 Nginx 反向代理

打开conf目录下的nginx.conf文件夹，修改配置，注意修改为自己对应的文件夹名和后端服务地址

worker_processes  1;  # 定义工作进程数量

events {
    worker_connections  1024;  # 定义每个工作进程的最大连接数
}

http {
    include       mime.types;  # 包含文件类型定义
    default_type  application/octet-stream;  # 默认文件类型
    sendfile        on;  # 开启高效文件传输模式

    keepalive_timeout  65;  # 连接保持超时时间
    server {
        listen       80;  # 监听端口号
        server_name  localhost;  # 服务器名称

        location / {
            root   html/maiba;  # 网站根目录
            index  index.html index.htm;  # 默认首页文件
        }
        error_page   500 502 503 504  /50x.html;  # 错误页面配置
        location = /50x.html {
            root   html;  # 错误页面根目录
        }

        location /api/ {
            proxy_pass http://localhost:8081;  # 后端服务地址
            proxy_set_header Host $host;  # 设置请求头Host
            proxy_set_header X-Real-IP $remote_addr;  # 设置请求头X-Real-IP
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  # 设置请求头X-Forwarded-For
            proxy_set_header X-Forwarded-Proto $scheme;  # 设置请求头X-Forwarded-Proto
        }
    }
}

在server中listen 80，表示服务器监听 HTTP 的 80端口，这是默认的 HTTP 端口。
在 location / 中，定义了网站的根目录 html/maiba 和默认首页文件 index.html，这是静态资源的主要入口。
而 location /api/ 通过 proxy_pass 把 API 请求转发到后端服务http://localhost:8081，实现前后端的通信。