摘要：場(chǎng)景最近一直在做一個(gè)養(yǎng)老項(xiàng)目，符合時(shí)代發(fā)展，此項(xiàng)目為一個(gè)前后端分離的項(xiàng)目，對(duì)于后臺(tái)的部署比較熟悉，說(shuō)到前端的靜態(tài)資源部署一時(shí)間有點(diǎn)蒙圈，后來(lái)查閱資料發(fā)現(xiàn)，其實(shí)很簡(jiǎn)單。

最近一直在做一個(gè)養(yǎng)老項(xiàng)目，符合時(shí)代發(fā)展，此項(xiàng)目為一個(gè)前后端分離的項(xiàng)目，對(duì)于后臺(tái)的部署比較熟悉，說(shuō)到前端的靜態(tài)資源部署一時(shí)間有點(diǎn)蒙圈，后來(lái)查閱資料發(fā)現(xiàn)，其實(shí)很簡(jiǎn)單。

工具

基礎(chǔ)知識(shí)

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

安裝好后軟件如下：

xshell連接遠(yuǎn)程服務(wù)器圖文教程

雙擊打開(kāi)xsehll如下所示，點(diǎn)擊左上角圖標(biāo)

填寫(xiě)遠(yuǎn)程要連接的服務(wù)器信息

選擇剛剛創(chuàng)建好的連接進(jìn)行連接

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

等待數(shù)秒后，進(jìn)入系統(tǒng)，默認(rèn)進(jìn)入的一般是家目錄，我們鍵入 cd / 切換到跟目錄

xftp的使用

如果我們將xftp安裝好的話，我們可以在xshell中直接啟動(dòng)ftp，并且ftp已經(jīng)從本地掛載到了服務(wù)器上，我們用戶完全可以使用鼠標(biāo)拖動(dòng)的方式上傳文件（前提是有權(quán)限）
點(diǎn)擊上面的按鈕，進(jìn)入如下畫(huà)面

對(duì)于大多數(shù)服務(wù)器其實(shí)都是linux系統(tǒng)，所以要想操作服務(wù)器，多多少少要對(duì)linux的shell腳本稍有了解，那對(duì)于我們部署服務(wù)器其實(shí)了解一下或者不了解都可以，我簡(jiǎn)單列舉幾個(gè)命令，視情況掌握即可。

cd .. 返回上一級(jí)目錄

cd ../.. 返回上兩級(jí)目錄

cd / 進(jìn)入根目錄

cd xx 進(jìn)入相應(yīng)目錄

ls 查詢當(dāng)前目錄下都有哪些內(nèi)容

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

whereis xxx 查詢某個(gè)軟件位置

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

對(duì)于nginx來(lái)說(shuō)，主要作用是使用他來(lái)做反向代理與負(fù)載均衡，作用我們不過(guò)多的列舉了，直接說(shuō)我們的配置方式。
默認(rèn)安裝情況下，我們的nginx會(huì)位于linux服務(wù)器根目錄下的/etc/nginx下，而這里面我們主要關(guān)注兩個(gè)東西

nginx.conf

conf.d

分別解釋一下是什么東西

nginx.conf是nginx的默認(rèn)配置文件，我們配置反向代理與負(fù)載均衡都會(huì)加載此配置文件

conf.d 這是一個(gè)文件夾，我們?cè)黾右恍┡渲梦募梢栽诖宋募A下寫(xiě)，之后配置到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;
}

重點(diǎn)是最后一樣代碼，將conf.d下的配置文件引入其中。

conf.d下的配置文件編寫(xiě)
這個(gè)就是配置的重點(diǎn)，先列舉配置文件，在進(jìn)行解釋

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

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

這里的原理就是 nginx會(huì)默認(rèn)監(jiān)聽(tīng)80端口，如果有域名為static.xxx.xx的訪問(wèn)我們服務(wù)器的話（讓域名解析到我們的服務(wù)器的公網(wǎng)上，如有不懂，百度了解一下），會(huì)默認(rèn)去訪問(wèn)根目錄下的static文件夾，而我們就需要把我們的靜態(tài)資源放入到根目錄下（cd / 就進(jìn)入根目錄了）的static中即可。

static文件里面的格式如下：

到此為止，如果我們是新增加的配置，那么我們需要重新讓nginx去加載配置文件。
nginx默認(rèn)可執(zhí)行文件在/usr/sbin/下，執(zhí)行命令：

/usr/sbin/nginx -s reload

執(zhí)行完如果沒(méi)有任何輸出，恭喜你，配置文件沒(méi)有問(wèn)題，如果有問(wèn)題，按照提示去查看哪里出問(wèn)題了。我這里就不列舉出問(wèn)題的情況了，回頭我會(huì)多帶帶寫(xiě)一個(gè)。

如果沒(méi)有修改配置文件，僅僅修改了上傳的靜態(tài)資源，也就是我們只是替換根目錄下的static里面的東西，不需要重新加載nginx的配置文件。

到此為止，我們可以直接在網(wǎng)頁(yè)上訪問(wèn)一下，看看是否能輸出靜態(tài)資源，比如css或者js等。
頁(yè)面上訪問(wèn)域名：static.xxx.xx/~,后面的~就是你static下面的資源，比如你在static下放了一個(gè)css的文件夾，css文件夾下有一個(gè)hello.css，那么訪問(wèn)方式就為

static.xxx.xx/css/hello.css

如果頁(yè)面有內(nèi)容輸出，賊表示靜態(tài)資源部署成功。

前端資源入口
一般前后端分離的項(xiàng)目，前端都會(huì)給后臺(tái)一個(gè)入口，拿我的項(xiàng)目為例，我們是java搭建的分布式后臺(tái)，服務(wù)器使用的tomcat，入口應(yīng)在我的登陸系統(tǒng)中，那么我們就需要把前端給我們的index.html文件放到我們后臺(tái)程序的默認(rèn)入口即可。
但是這里根據(jù)情況我們會(huì)要做一些修改，比如html文件我們要把他變?yōu)閖sp文件，其實(shí)也很簡(jiǎn)單，我們首先將其擴(kuò)展名更改，之后打開(kāi)文件，在其頭部添加如下一行代碼即可：

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

之后保存，放到服務(wù)器入口。
這個(gè)入口在我們相應(yīng)服務(wù)器的（以tomcat為例）webapps/ROOT/WEB-INF/views/ 下，我們將修改的index.jsp放到這里既可。

到此為止我們就可以讓后臺(tái)啟動(dòng)服務(wù)，訪問(wèn)前臺(tái)提供好的入口，進(jìn)行訪問(wèn)了。
不過(guò)這里希望大家明確一點(diǎn)，就是前端的所有訪問(wèn)靜態(tài)資源的路徑要全部修改成線上的環(huán)境。

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