前端如何配置伺服器

A. 如何配置伺服器

在網路存在的環境下，伺服器可以提供的服務類型各不相同，所以伺服器又分為幾種，分別是文件伺服器、資料庫伺服器、應用程序伺服器以及web伺服器，下面我們就以文件伺服器為例來介紹一下伺服器的設置方法吧。
伺服器的設置方法：

第一步：首先需要登錄計算機的操作系統，在登錄時需要以管理員的身份進行，進入系統以後，使用滑鼠選擇開始菜單，然後再選擇管理工具選項，進入管理工具選項以後，在列表當中選擇相應的伺服器，這時會自動彈出一個窗口，然後點擊添加選項，然後根據配置向導進行下一步操作。

第二步：進行檢測，然後選擇自定義配置選項，進入下一步操作。

第三步：選擇頁面當中的伺服器角色按鈕，然後選擇其中的文件伺服器選項，接著使用滑鼠點擊下一步選項。

第四步：這時就可以將文件伺服器的磁碟配額打開了，接著再選擇相應的復選框，根據實際要求進行相應的設置，輸入最合適的數值。

第五步：將文件伺服器的索引服務打開，然後選擇是按鈕，將索引服務啟用，接著使用滑鼠點擊下一步選項。

第六步：進入下一步頁面以後，使用滑鼠點擊選擇總結選項，進入到相應的窗口以後，對完成的設置進行檢查，沒有差錯就進入下一步。

第七步：通過添加向導操作將所選用的服務進行啟用操作，然後頁面就會出現共享文件夾的向導，完成以上操作以後，點擊下一步選項。
第八步：將文件夾的路徑打開，然後使用滑鼠點擊瀏覽選項，在相應的列表當中，找到公共資源的文件夾，然後點擊確定按鈕，然後進入下一步操作。

B. web前端項目部署到伺服器：

執行成功後會生成dist文件

4.1 進入到nginx配置目錄：/usr/local/nginx/conf,對 nginx.conf 文件進行配置

使用include可以配置多個.conf文件，如一個項目一個配置文件。在同目錄下創建demo文件夾，並創建demo.conf配置文件

下面使用是以ip地址的方式創建的的配置文件

訪問地址：

其中dist名稱時可以修改，保持與/usr/local/nginx/html下cp名稱一致，否則會訪問不到;並且/usr/local/nginx/html目錄可存在同一ip下多個web項目。

域名與ip綁定

配置域名demo.conf
eg: 域名 - demo.cn

4.2阿里雲配置域名前綴
阿里雲->域名->域名列表—>域名 管理-> 域名解析->解析設置

如圖：記錄值 填寫當前服務ip

學習過程中所記錄，有問題或者有好的方式歡迎指點。不勝感激 🤗 🤗 🤗

C. 如何配置web伺服器

第一步:IIS的安裝
A.在控制面板中選擇「添加/刪除程序」,在出現的對話框中選擇「添加/刪除Windows組件」。
B.在出現的復選框中選擇安裝Internet信息服務(IIS),這一組件約需19MB的空間。
C.點擊「下一步」,並將Win2000安裝光碟放入光碟機,安裝程序即可將程序文件復制到硬碟中,點擊「結束」即可完成。
第二步:IIS中Web伺服器的基本配置
IIS中Web伺服器的基本配置主要包括如下幾部分:
A.打開IIS伺服器的配置窗口,選擇「開始」→「程序」→「管理工具」→「Internet服務管理器」,或者「選擇」→「控制面板」→「管理工具」→「Internet服務管理器」也可,打開的窗口。
B.在打開的窗口中滑鼠右擊「默認Web站點」,選擇「屬性」菜單。
C.在出現的「默認Web站點屬性」窗口中,選擇「主目錄」標簽,用以設置Web內容在硬碟中的位置,默認目錄為「C:\Inetpub\Wwwroot」,你可根據需要自己設置。
D.在屬性窗口處選擇「文檔」標簽,設置自己默認的首頁網頁名稱,例如「Myfirstweb.htm」,將其添加並移動到列表的最頂端。
E.確認默認的Web站點是否已經啟動,如果沒有可以滑鼠右鍵點擊「默認Web站點」,選擇「啟動」,在打開的IE地址欄中鍵入本機的IP地址,即可看到自己指定的主頁已經開始在Internet上發布了。
這里只是介紹IIS最基本的設置選項,大家還可以按照需要去具體設置上面提到的「默認Web站點屬性」,通過它來配置IIS的安全和其他一些參數。
IIS雖然好用,但默認安裝的情況下,它也有很多的安全漏洞,包括著名的Unicode漏洞和CGI漏洞,因此在IIS安裝完成之後,建議繼續在微軟公司主頁上下載安裝它們提供的安全漏洞補丁SP1和SP2。此外,建議將磁碟的文件系統轉換成NTFS格式,安裝系統的分區可在系統安裝候轉換,也可在安裝完系統以後用PQMagic等工具進行轉換。

D. nginx前端常用配置

nginx現在幾乎是眾多大型網站的必用技術，大多數情況下，我們不需要親自去配置它，但是了解它在應用程序中所擔任的角色，以及如何解決這些問題是非常必要的。

下面我將從nginx在企業中的真實應用來解釋nginx在應用程序中起到的作用。

為了便於理解，首先先來了解一下一些基礎知識， nginx是一個高性能的反向代理伺服器 那麼什麼是反向代理呢？

代理 是在伺服器和客戶端之間假設的一層伺服器， 代理 將接收客戶端的請求並將它轉發給伺服器，然後將服務端的響應轉發給客戶端。

不管是正向代理還是反向代理，實現的都是上面的功能。

正向代理 是為我們服務的，即為客戶端拆逗雀服務的，客戶端可以根據正向代理訪問到它本身無法訪問到的伺服器資源。

正向代理 對我們是透明的，對服務端是非透明的，即旅早服務端並不知道自己收到的是來自代理的訪問還是來自真實客戶端的訪問。

反向代理 是為服務端服務的，反向代理可以幫助伺服器接收來自客戶端的請求，幫助伺服器做請求轉發，負載均衡等。

反向代理 對服務端是透明的，對我們是非透明的，即我們並不知道自己訪問的是代理伺服器，而伺服器知道反向代理在為他服務。

下面是一個nginx配置文件的基本結構：

下面是 nginx 一些配置中常用的內置全局變數，你可以在配置的任何位置使用它們。

| 變數名 | 功能 | | ------ | ------ | | $host | 請求信息中的 Host ，如果請求中沒有 Host 行，則等於設置的伺服器名 | | $request_method | 客戶端請求類型，如 GET 、 POST | $remote_addr | 客戶端的 IP 地址 | | $args | 請求中的參數 | | $content_length | 請求頭中的 Content-length 欄位 | | $http_user_agent | 客戶端agent信息 | | $http_cookie | 客戶端cookie信息 | | $remote_addr | 客戶端的IP地址 | | $remote_port | 客戶端的埠 | | $server_protocol | 請求使用的協議，如 HTTP/1.0 、·HTTP/1.1 | | server_name | 伺服器名稱| | $server_port`|伺服器的埠號|

先追本溯源以下，跨域究竟是怎麼回事。

同源策略限制了從同一個源載入的文檔或腳本如何與來自另一個源的資源進行交互。這是一個用於隔離潛在惡意文件的重要安全機制。通常不允許不同源間的讀操作。

如果兩個頁面的協議，埠（如果有指定）和域名都相同，則兩個頁面具有相同的源。

例如：

現在我在 fe.server.com 對 dev.server.com 發起請求一定會出現跨域。

現在我們只需要啟動一個nginx伺服器，將 server_name 設置為 fe.server.com ,然後設置相應的location以攔截前端需要跨域的請求，最後將請求代理回 dev.server.com 。如下面的配置：

這樣可以完美繞過瀏覽器的同源策略： fe.server.com 訪問 nginx 的 fe.server.com 屬於同源訪問，而 nginx 對服務端轉發的請求不會觸發瀏覽器的同源策略。

根據狀態碼過濾

根據URL名稱過濾，精準匹配URL，不匹配的URL全部重定向到主頁。

根據請求類型過濾。

GZIP 是規定的三種標指廳准HTTP壓縮格式之一。目前絕大多數的網站都在使用 GZIP 傳輸 HTML 、 CSS 、 JavaScript 等資源文件。

對於文本文件， GZip 的效果非常明顯，開啟後傳輸所需流量大約會降至 1/4 ~ 1/3 。

並不是每個瀏覽器都支持 gzip 的，如何知道客戶端是否支持 gzip 呢，請求頭中的 Accept-Encoding 來標識對壓縮的支持。

啟用 gzip 同時需要客戶端和服務端的支持，如果客戶端支持 gzip 的解析，那麼只要服務端能夠返回 gzip 的文件就可以啟用 gzip 了,我們可以通過 nginx 的配置來讓服務端支持 gzip 。下面的 respone 中 content-encoding:gzip ，指服務端開啟了 gzip 的壓縮方式。

這里為什麼默認版本不是 1.0 呢？

HTTP 運行在 TCP 連接之上，自然也有著跟 TCP 一樣的三次握手、慢啟動等特性。

啟用持久連接情況下，伺服器發出響應後讓 TCP 連接繼續打開著。同一對客戶/伺服器之間的後續請求和響應可以通過這個連接發送。

為了盡可能的提高 HTTP 性能，使用持久連接就顯得尤為重要了。

HTTP/1.1 默認支持 TCP 持久連接， HTTP/1.0 也可以通過顯式指定 Connection: keep-alive 來啟用持久連接。對於 TCP 持久連接上的 HTTP 報文，客戶端需要一種機制來准確判斷結束位置，而在 HTTP/1.0 中，這種機制只有 Content-Length 。而在 HTTP/1.1 中新增的 Transfer-Encoding: chunked 所對應的分塊傳輸機制可以完美解決這類問題。

nginx 同樣有著配置 chunked的 屬性 chunked_transfer_encoding ，這個屬性是默認開啟的。

Nginx 在啟用了 GZip 的情況下，不會等文件 GZip 完成再返回響應，而是邊壓縮邊響應，這樣可以顯著提高 TTFB ( Time To First Byte ，首位元組時間，WEB 性能優化重要指標)。這樣唯一的問題是， Nginx 開始返回響應時，它無法知道將要傳輸的文件最終有多大，也就是無法給出 Content-Length 這個響應頭部。

所以，在 HTTP1.0 中如果利用 Nginx 啟用了 GZip ，是無法獲得 Content-Length 的，這導致HTTP1.0中開啟持久鏈接和使用 GZip 只能二選一，所以在這里 gzip_http_version 默認設置為 1.1 。

如上面的圖，前面是眾多的服務窗口，下面有很多用戶需要服務，我們需要一個工具或策略來幫助我們將如此多的用戶分配到每個窗口，來達到資源的充分利用以及更少的排隊時間。

把前面的服務窗口想像成我們的後端伺服器，而後面終端的人則是無數個客戶端正在發起請求。負載均衡就是用來幫助我們將眾多的客戶端請求合理的分配到各個伺服器，以達到服務端資源的充分利用和更少的請求時間。

Upstream指定後端伺服器地址列表

在server中攔截響應請求，並將請求轉發到Upstream中配置的伺服器列表。

上面的配置只是指定了nginx需要轉發的服務端列表，並沒有指定分配策略。

輪詢策略

默認情況下採用的策略，將所有客戶端請求輪詢分配給服務端。這種策略是可以正常工作的，但是如果其中某一台伺服器壓力太大，出現延遲，會影響所有分配在這台伺服器下的用戶。

最小連接數策略

將請求優先分配給壓力較小的伺服器，它可以平衡每個隊列的長度，並避免向壓力大的伺服器添加更多的請求。

最快響應時間策略

依賴於NGINX Plus，優先分配給響應時間最短的伺服器。

客戶端ip綁定

來自同一個ip的請求永遠只分配一台伺服器，有效解決了動態網頁存在的session共享問題。

匹配以 png|gif|jpg|jpeg 為結尾的請求，並將請求轉發到本地路徑， root 中指定的路徑即nginx本地路徑。同時也可以進行一些緩存的設置。

nginx的功能非常強大，還有很多需要探索，上面的一些配置都是公司配置的真實應用（精簡過了），如果您有什麼意見或者建議，歡迎在下方留言...

E. 如何配置Web伺服器；

（1）了解DNS主機名和IP地址。
如果此WEB伺服器在Internet上，需向ISP申請和注冊此伺服器的DNS主機名和IP地址。如果此伺服器只在企業網內使用，則在內部的DNS伺服器上注冊。
（2）打開伺服器文檔，選擇"埠"-"Internet埠"，啟用"TCP/ IP埠"。
（3）選擇"Internet協議"，完成以下選項後，保存文檔。

"綁定主機名"：
A、選擇"是"則您可在"主機名"項中輸入主機別名，WEB用戶可用此別名替代Domino伺服器名訪問WEB伺服器。
B、選擇"否"（預設）則不允許使用別名。

"DNS查詢"：
選擇"是"則Domino伺服器查詢發送請求的WEB客戶機的DNS名。
Domino日誌文件和資料庫將包含WEB客戶機的DNS主機名。
選擇"否"（預設）則不查詢，Domino日誌文件和資料庫將只包含WEB客戶機的IP地址。

注意：

選擇"否"將提高Domino伺服器性能，因為伺服器不使用資源執行DNS查詢。
"允許HTTP客戶瀏覽資料庫"：選擇"是"則允許WEB用戶在URL中使用OpenServer命令來顯示伺服器上資料庫列表。

選擇"否"（預設）則不允許。但即使WEB用戶不能看到伺服器上資料庫列表，他們仍能打開有許可權訪問的單個資料庫。

（4）啟動HTTP任務。在伺服器控制台上，輸入：loap http

F. 前端vue與後端Thinkphp在伺服器的部署

vue在服務端部署時，我們都知道通過npm run build 指令打包好的dist文件，通過http指定是可以直接瀏覽的，Thinkphp通過域名指向index.php文件才可以瀏覽。要使前端正常調用後端數據，有兩種方法：1、前端跨域調用後端數據，2、前端打包文件部署在後端的伺服器文件夾下（同域）。

web伺服器： apache

一、跨域

在伺服器配置站點：

在路徑/home/www/  下創建test項目文件夾，用來放項目文件。  

找到httpd-vhosts.conf文件配置站點  

前端站點：  

    ServerName test.test.com  

    DocumentRoot "/home/www/test/dist"    

    DirectoryIndex index.html  

後端站點：  

    ServerName test.testphp.com  

    DocumentRoot "/home/www/test/php"    

    DirectoryIndex index.php  

將前端打包好的dist文件放在/home/www/test/ 文件夾下，運行http://test.test.com可瀏覽，當路徑改變時，刷新會出現404錯誤。此時dist文件下創建一個.htaccess文件，當路徑不存在時，路徑指向http://test.test.com/index.html能解決此問題。

  RewriteEngine On  

  RewriteBase /  

  RewriteRule ^index\.html$ - [L]  

  RewriteCond %{REQUEST_FILENAME} !-f  

  RewriteCond %{REQUEST_FILENAME} !-d  

  RewriteRule . /index.html [L]  

在/home/www/test文件夾下創建項目根目錄php文件夾，將thinkphp文件放在php下。TP5的入口文件在public文件下，在這將public下的入口文件index.php挪到php文件夾下（個人習慣將入口文件放在項目根目錄）, 後端綁定Index模塊。

前端調用後端介面，存在跨域，跨域解決方法有好幾種，在這我將在後端php做配置，解決跨域問題，在公用控制器設置跨域配置：

class Common extends Controller  

{  

    public $param;  

    // 設置跨域訪問  

    public function _initialize()  

    {  

        parent::_initialize();  

        isset($_SERVER['HTTP_ORIGIN']) ? header('Access-Control-Allow-Origin: '.$_SERVER['HTTP_ORIGIN']) : '';  

        header('Access-Control-Allow-Credentials: true');  

        header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');  

        header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, authKey, sessionId");  

$param =  Request::instance()->param();  

$this->param = $param;  

    }  

}  

前端調用登錄介面： this.axios.post('http://test.testphp.com/index.php/base/login', {user: '', password: ''})。

(可在webpack.base.conf.js文件下可定義介面：http://test.testphp.com/index.php/)

二、同域

後端配置同上，公共配置器中的header配置注釋。將前端的dist文件下的所有文件（包含.htaccess），放在php文件夾下。將後端index控制器的index方法的路徑重定向php下的index.html文件：

namespace app\index\controller;  

use think\Controller;  

class Index extends Controller  

{  

    public function index() {  

$this->redirect('/index.html');  

    }  

}  

前端調用登錄介面： this.axios.post('/index.php/base/login', {user: '', password: ''})

轉自：https://blog.csdn.net/qq_35465132/article/details/78986675