前端Nginx部署配置

項目上線之前端部署

遇上的問題

在和同學合作的項目中，涉及到前端的部署，需要在后端部署的基礎上對linux下的nginx.config文件進行配置。此處記錄一下在學習配置過程中遇到的問題。

參考博客

學長的博客 利用Nginx輕松實現瀏覽器中Ajax的跨域請求

---

部署詳情

1.首先我們需要下載xftp和xshell,官網可直接下載

戳下載地址 https://www.netsarang.com/zh/xshell/ 需要綁定郵箱進行注冊，推薦下載時xftp與xshell一並下載

2.下載后鏈接到我們的服務器,並找到nginx的安裝目錄，並打開conf文件夾

可以使用xftp直接可視化界面輸入地址，也可以使用shell命令 cd /你的目錄 進入到目錄下。同時選擇編輯器打開nginx.conf文件，或者使用vi nginx.conf命令進行編輯。

3.對文件進行編輯，找到文件中的serve部分進行更改

• 注意之所以需要反向代理是因為未配置轉達之前，默認訪問同域之下的服務器，一個端口之下只能擁有一個進程，項目后端端口在8080,需要將前端端口80轉發到8080

server部分如下:

server {
    listen       80;#前端監聽端口
    server_name  localhost;#代理服務地址
    
    root /home/app/vuecli/dist;   #設置根目錄！即存放你build后前端代碼的地址

    location / {
        autoindex on;       #開啟nginx目錄瀏覽功能
        autoindex_exact_size off;   #文件大小從KB開始顯示
        charset utf-8;          #顯示中文
        add_header 'Access-Control-Allow-Origin' '*'; #允許來自所有的訪問地址
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #支持請求方式
        add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
    }

    #開始配置我們的反向代理
    location /api{    #"/api"中的api可以替換為自定義的任何內容
    rewrite ^/api/(.*)$ /$1 break;    #重點！把接口頭部為/api的請求頭重寫替換為$ $1中的內容，如此處前端請求接口為/api/login,將重寫代理成/login
    include uwsgi_params;
    proxy_pass http://localhost:8080;   #nginx默認監聽80,需要反向代理到8080或者自定義端口
    charset utf-8;   #顯示中文
        add_header 'Access-Control-Allow-Origin' '*'; #允許來自所有的訪問地址
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #支持請求方式
        add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
}

使用shell命令更改conf文件的話，進入vi編輯器后輸入i進入編輯 ,esc命令退出編輯，:wq!命令保存並退出vi編輯器

4.重啟nginx服務器

在修改conf文件或者重新替換前端dist文件之后需要重新重啟服務器，/usr/local/nginx/sbin/nginx -s reload命令進行nginx的重啟，需要將/usr/local/nginx替換成你得nginx服務器所在目錄。

5.vue的config文件夾下的index.js文件實現vue項目下的代理

原理同serve部分,在pathrewrite中把/api替換成/,並且訪問target中的地址。

---

部署過程中問題總結如上。記錄用以警醒自己，后續遇上問題再進行補充。