背景
现在，web开发的前后端分离技术越来越火爆，由于最近的公司官网使用了前后端分离的方案，这里就来记录一下前后端分离的项目部署。这里我们使用的前端框架是Vue.js，后台使用Laravel7提供数据接口。
Nginx
nginx (engine x) 是一个高性能的HTTP和反向代理服务器,这里我们使用nginx来作为前端页面的静态服务器。
思路
前端部署
nginx作为静态服务器部署前端代码
后端部署
nginx配置不同端口的后台服务器部署接口代码
nginx反向代理
将发往nginx服务器的数据请求发送到后台端口
代码
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 tosim.top; location / { root html/build; try_files $uri /index.html; # try_files：检查文件； $uri：监测的文件路径； /index.html：文件不存在重定向的新路径 index index.html; } location /api/ { # 把 /api 路径下的请求转发给真正的后端服务器 proxy_pass http://localhost:18080/; # 把host头传过去，后端服务程序将收到your.domain.name, 否则收到的是localhost:18080 proxy_set_header Host $http_host; # 把cookie中的path部分从/api替换成/service proxy_cookie_path /api /; # 把cookie的path部分从localhost:18080替换成your.domain.name proxy_cookie_domain localhost:18080 tosim.top; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } }
