服務器部署靜態資源（經過nginx反向代理）

場景

最近一直在作一個養老項目，符合時代發展，此項目爲一個先後端分離的項目，對於後臺的部署比較熟悉，說到前端的靜態資源部署一時間有點蒙圈，後來查閱資料發現，其實很簡單。

前提

• 工具
• 基礎知識

工具

軟件推薦
本地與服務器相互鏈接的軟件有不少，secureCRT，putty，xsehll等等，那我這裏推薦使用xshell與xftp組合，對於不熟悉linux命令的前端人員來講也能夠很方便的操做，不過xshell與xftp是收費的，咱們自行下載破解版本便可，文章末尾給出個人百度雲鏈接。
軟件安裝
對於xshell與xftp的安裝其實很簡單，傻瓜式安裝便可，固然在安裝路徑選擇的時候能夠按照我的喜愛選擇安裝地址便可，最好所有都是英文路徑。

基礎知識

xshell與xftp使用

安裝好後軟件以下：

xshell鏈接遠程服務器圖文教程

• 雙擊打開xsehll以下所示，點擊左上角圖標

• 填寫遠程要鏈接的服務器信息

• 選擇剛剛建立好的鏈接進行鏈接

• 接下來輸入用戶名和密碼，記得讓其記住，下次鏈接即不用在次輸入用戶名和密碼

• 等待數秒後，進入系統，默認進入的通常是家目錄，咱們鍵入 cd / 切換到跟目錄

• xftp的使用

若是咱們將xftp安裝好的話，咱們能夠在xshell中直接啓動ftp，而且ftp已經從本地掛載到了服務器上，咱們用戶徹底可使用鼠標拖動的方式上傳文件（前提是有權限）
點擊上面的按鈕，進入以下畫面

linux

對於大多數服務器其實都是linux系統，因此要想操做服務器，多多少少要對linux的shell腳本稍有了解，那對於咱們部署服務器其實瞭解一下或者不瞭解均可以，我簡單列舉幾個命令，視狀況掌握便可。

• cd .. 返回上一級目錄
• cd ../.. 返回上兩級目錄
• cd / 進入根目錄
• cd xx 進入相應目錄
• ls 查詢當前目錄下都有哪些內容
• rm -rf xx 刪除xx文件或者目錄（慎用，別不當心刪除了系統。。）
• whereis xxx 查詢某個軟件位置

大概知道這幾個命令差很少就夠了。

nginx

對於nginx來講，主要做用是使用他來作反向代理與負載均衡，做用咱們不過多的列舉了，直接說咱們的配置方式。
默認安裝狀況下，咱們的nginx會位於linux服務器根目錄下的/etc/nginx下，而這裏面咱們主要關注兩個東西

1. nginx.conf
2. conf.d

分別解釋一下是什麼東西

• nginx.conf是nginx的默認配置文件，咱們配置反向代理與負載均衡都會加載此配置文件
• conf.d 這是一個文件夾，咱們增長一些配置文件，能夠在此文件夾下寫，以後配置到nginx.conf中

加載conf.d下的文件到nginx.conf中

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
}

重點是最後同樣代碼，將conf.d下的配置文件引入其中。

conf.d下的配置文件編寫
這個就是配置的重點，先列舉配置文件，在進行解釋

server {
      listen  80;
      server_name static.xxx.xx;

      location / {
        root /static;
      }
      
      location ~/(javascript|css|images){
        root /static/;
      }
  
}

這裏的原理就是 nginx會默認監聽80端口，若是有域名爲static.xxx.xx的訪問咱們服務器的話（讓域名解析到咱們的服務器的公網上，若有不懂，百度瞭解一下），會默認去訪問根目錄下的static文件夾，而咱們就須要把咱們的靜態資源放入到根目錄下（cd / 就進入根目錄了）的static中便可。

static文件裏面的格式以下：

到此爲止，若是咱們是新增長的配置，那麼咱們須要從新讓nginx去加載配置文件。
nginx默承認執行文件在/usr/sbin/下，執行命令：

/usr/sbin/nginx -s reload

執行完若是沒有任何輸出，恭喜你，配置文件沒有問題，若是有問題，按照提示去查看哪裏出問題了。我這裏就不列舉出問題的狀況了，回頭我會單獨寫一個。

若是沒有修改配置文件，僅僅修改了上傳的靜態資源，也就是咱們只是替換根目錄下的static裏面的東西，不須要從新加載nginx的配置文件。

到此爲止，咱們能夠直接在網頁上訪問一下，看看是否能輸出靜態資源，好比css或者js等。
頁面上訪問域名：static.xxx.xx/~,後面的~就是你static下面的資源，好比你在static下放了一個css的文件夾，css文件夾下有一個hello.css，那麼訪問方式就爲

static.xxx.xx/css/hello.css

若是頁面有內容輸出，賊表示靜態資源部署成功。

前端資源入口
通常先後端分離的項目，前端都會給後臺一個入口，拿個人項目爲例，咱們是java搭建的分佈式後臺，服務器使用的tomcat，入口應在個人登錄系統中，那麼咱們就須要把前端給咱們的index.html文件放到咱們後臺程序的默認入口便可。
可是這裏根據狀況咱們會要作一些修改，好比html文件咱們要把他變爲jsp文件，其實也很簡單，咱們首先將其擴展名更改，以後打開文件，在其頭部添加以下一行代碼便可：

<%@page pageEncoding="utf-8" contentType="text/html;charset=utf-8"%>

以後保存，放到服務器入口。
這個入口在咱們相應服務器的（以tomcat爲例）webapps/ROOT/WEB-INF/views/ 下，咱們將修改的index.jsp放到這裏既可。

到此爲止咱們就可讓後臺啓動服務，訪問前臺提供好的入口，進行訪問了。
不過這裏但願你們明確一點，就是前端的全部訪問靜態資源的路徑要所有修改爲線上的環境。

最後附上軟件下載地址：
連接：https://pan.baidu.com/s/1bqkVGC3 密碼：ecvc