背景

現(xiàn)在，web開發(fā)的前后端分離技術越來越火爆，由于最近的公司官網(wǎng)使用了前后端分離的方案，這里就來記錄一下前后端分離的項目部署。這里我們使用的前端框架是Vue.js，后臺使用Laravel7提供數(shù)據(jù)接口。

Nginx

nginx (engine x) 是一個高性能的HTTP和反向代理服務器,這里我們使用nginx來作為前端頁面的靜態(tài)服務器。

思路

前端部署

nginx作為靜態(tài)服務器部署前端代碼

后端部署

nginx配置不同端口的后臺服務器部署接口代碼

nginx反向代理

將發(fā)往nginx服務器的數(shù)據(jù)請求發(fā)送到后臺端口

代碼

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：監(jiān)測的文件路徑； /index.html：文件不存在重定向的新路徑 index index.html; }location /api/ {# 把 /api 路徑下的請求轉發(fā)給真正的后端服務器proxy_pass http://localhost:18080/;# 把host頭傳過去，后端服務程序將收到y(tǒng)our.domain.name, 否則收到的是localhost:18080proxy_set_header Host $http_host;# 把cookie中的path部分從/api替換成/serviceproxy_cookie_path /api /;# 把cookie的path部分從localhost:18080替換成your.domain.nameproxy_cookie_domain localhost:18080 tosim.top;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}
}

總結

以上是生活随笔為你收集整理的前后端分离nginx配置，同时解决跨域问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。