使用 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
,实现前后端的通信。
部署与测试
项目的启动可以直接使用 IDE 启动,也可以打包成 Jar 包后命令启动,这里直接使用一键启动
访问自己电脑的 IP 地址或者使用localhost
都可,由于 Nginx 中配置的是80
端口(HTTP默认端口),所以直接访问 IP 地址或者localhost
即可,无需特意输入端口,能看到前端页面和请求状态码200说明成功
在这种方式下,你需要同时运行 Nginx 和后端项目
博客原文链接直达:部署之道:整合、分离与容器化的前后端部署方法
想了解更多内容,请访问我的个人博客:Panda
欢迎志同道合的朋友一起学习交流,共同进步!