摘要：場景最近一直在做一個養老項目，符合時代發展，此項目為一個前后端分離的項目，對于后臺的部署比較熟悉，說到前端的靜態資源部署一時間有點蒙圈，后來查閱資料發現，其實很簡單。

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

工具

基礎知識

軟件推薦
本地與服務器相互連接的軟件有很多，secureCRT，putty，xsehll等等，那我這里推薦使用xshell與xftp組合，對于不熟悉linux命令的前端人員來說也可以很方便的操作，不過xshell與xftp是收費的，我們自行下載破解版本即可，文章末尾給出我的百度云連接。
軟件安裝
對于xshell與xftp的安裝其實很簡單，傻瓜式安裝即可，當然在安裝路徑選擇的時候可以按照個人喜好選擇安裝地址即可，最好全部都是英文路徑。

安裝好后軟件如下：

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

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

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

選擇剛剛創建好的連接進行連接

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

等待數秒后，進入系統，默認進入的一般是家目錄，我們鍵入 cd / 切換到跟目錄

xftp的使用

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

對于大多數服務器其實都是linux系統，所以要想操作服務器，多多少少要對linux的shell腳本稍有了解，那對于我們部署服務器其實了解一下或者不了解都可以，我簡單列舉幾個命令，視情況掌握即可。

cd .. 返回上一級目錄

cd ../.. 返回上兩級目錄

cd / 進入根目錄

cd xx 進入相應目錄

ls 查詢當前目錄下都有哪些內容

rm -rf xx 刪除xx文件或者目錄（慎用，別不小心刪除了系統。。）

whereis xxx 查詢某個軟件位置

大概知道這幾個命令差不多就夠了。

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

nginx.conf

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