摘要：首先，的命令和并不能在全局使用。文章有意將瀏覽器不能訪問(wèn)服務(wù)器的兩個(gè)問(wèn)題寫出來(lái)，是因?yàn)樽髡咴谂挪閱?wèn)題的時(shí)候，發(fā)現(xiàn)在服務(wù)器直接訪問(wèn)的頁(yè)面，能很好地檢查排除問(wèn)題在百度尋找問(wèn)題答案的時(shí)候，發(fā)現(xiàn)這種做法也得到了不少人的肯定。

前段時(shí)間要把項(xiàng)目部署到服務(wù)器，期間踩了不少的坑。故寫下這篇文章，從零開(kāi)始把自己部署的過(guò)程都記錄下來(lái)，希望能給其他像我一樣的小白一點(diǎn)幫助。如果有疏漏的地方，請(qǐng)各位客官指出，我會(huì)盡快做好修改，謝謝！?

作者使用的服務(wù)器系統(tǒng)是 CentOS 7，運(yùn)行指令可能和其他系統(tǒng)有所差別，在這里不再贅述，還請(qǐng)客官明察秋毫，善用百度(′???`)

安裝 Nodejs 有兩種方法，分別是下載源碼編譯和下載軟件包，在 Nodejs 官網(wǎng)的下載頁(yè)面（https://nodejs.org/en/download/）能可以看到兩個(gè)不同的包，查看鏈接地址就能獲取到對(duì)應(yīng)版本的下載鏈接。

在寫這篇文章時(shí)，Nodejs 的最新穩(wěn)定版本是 v8.9.1，所以以下步驟將以這個(gè)版本為例進(jìn)行安裝。

首先下載源碼到本地：
wget -c https://nodejs.org/dist/v8.9.1/node-v8.9.1.tar.gz
下載完畢，提取 tar 文件：
tar -zxvf node-v8.9.1.tar.gz
進(jìn)入文件夾：
cd node-v8.9.1
在編譯代碼之前，還需要在機(jī)器上安裝一些軟件包，使得編譯可以正常運(yùn)行：
sudo yum install gcc gcc-c++
對(duì)源代碼進(jìn)行配置：
./configure
進(jìn)行編譯：
make
安裝：
sudo make install

安裝完成后，可以輸入命令 node -v 來(lái)檢查 Nodejs 是否安裝成功：

$ node -v
v8.9.1         # 如果出現(xiàn)了對(duì)應(yīng)的版本號(hào)信息，說(shuō)明安裝成功

然而 Nodejs 在編譯的時(shí)候往往需要花費(fèi)較多的時(shí)間，在配置較低的服務(wù)器上編譯則需要更久。所以對(duì)于配置較低的服務(wù)器，我更推薦下面的方法，利用已編譯的二進(jìn)制文件安裝 Nodejs 。

這種方法相比第一種節(jié)省了編譯安裝的時(shí)間，所以安裝起來(lái)更快。
第一步仍然需要下載對(duì)應(yīng)的二進(jìn)制文件：
wget -c https://nodejs.org/dist/v8.9.1/node-v8.9.1-linux-x64.tar.xz
提取文件：
tar -xvf node-v8.9.1-linux-x64.tar.xz
解壓之后得到的文件夾就是已經(jīng)安裝好的 Nodejs 了，為了方便我們可以把它重命名一下（在這里我把它放到了
用戶根目錄下面的 app 的文件夾里，你也可以換成其他路徑）：
mv node-v8.9.1-linux-x64 ~/app/nodejs

然而，這種方式安裝的 Nodejs 并不完美。首先，Nodejs 的命令 node 和 npm 并不能在全局使用。為了解決這個(gè)問(wèn)題，我們需要建立兩個(gè)軟鏈接：
sudo ln -s ~/app/nodejs/bin/node /usr/local/bin/node
sudo ln -s ~/app/nodejs/bin/npm /usr/local/bin/npm
其中，~/app/nodejs 是我們剛才安裝的 Nodejs 的路徑，在建立軟鏈接的時(shí)候要注意區(qū)別。
現(xiàn)在，node 和 npm 可以在全局使用了，同樣輸入命令 node -v 來(lái)檢查 Nodejs 是否安裝成功：

$ node -v
v8.9.1         # 出現(xiàn)了對(duì)應(yīng)的版本號(hào)信息，說(shuō)明安裝成功

還有一個(gè)問(wèn)題，在 npm 下全局安裝的模塊無(wú)法直接在 bash 中執(zhí)行。例如，我們要在 npm 中安裝 yarn：

$ npm install -g yarn
$ yarn
bash: yarn: command not found...

為了解決這個(gè)問(wèn)題，我們需要在 Linux 上手動(dòng)配置環(huán)境變量。編輯 /etc/profile 文件：
sudo vi /etc/profile
在文件的底部，添加下面兩行代碼：
export NODE_HOME=~/app/nodejs/bin
export PATH=$NODE_HOME:$PATH
跟剛才一樣，~/app/nodejs 是我們安裝的 Nodejs 的路徑。

現(xiàn)在，npm 全局安裝的模塊也可以使用了：

$ yarn
yarn install v1.3.2
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
info Lockfile not saved, no dependencies.
Done in 0.09s.

至此，Nodejs 的安裝已經(jīng)順利完成，我們可以在服務(wù)器上對(duì) Nodejs 為所欲為了！

我們也可以通過(guò)系統(tǒng)的 yum 來(lái)直接安裝 Nodejs。這種方式安裝時(shí)需要先確保能訪問(wèn)到官方庫(kù)：
sudo yum install epel-release
然后我們就可以安裝 Nodejs 了：
sudo yum install nodejs

然而這種方法并不能確保安裝的 Nodejs 為最新版本。在最新穩(wěn)定版本為 v8.9.1 的情況下，我用這種方法安裝的 Nodejs 的版本是 v6.12.0 ，升級(jí)過(guò)程也屢遭波折，所以這種方法也不推薦采用。

CentOS 上安裝 Nginx 比較簡(jiǎn)單，步驟跟 Nodejs 的編譯安裝非常類似，網(wǎng)上也有很多安裝 Nginx 的帖子。我參考的是 CentOS 7 下安裝 Nginx 這篇帖子，安裝過(guò)程也非常順利，沒(méi)有出現(xiàn)任何問(wèn)題，故在這里不再贅述。

安裝完成并啟動(dòng) Nginx 后，我們?cè)诒镜氐臑g覽器訪問(wèn)服務(wù)器，卻發(fā)現(xiàn)無(wú)法連接：

然而，我們?cè)诮K端運(yùn)行命令 curl http://127.0.0.1，卻能看到 HTML 代碼：

說(shuō)明 Nginx 啟動(dòng)正常，并且本地是能成功訪問(wèn)的！
這個(gè)問(wèn)題困擾了我一段時(shí)間。后來(lái)百度的時(shí)候才發(fā)現(xiàn)，原來(lái)是被 CentOS 的防火墻攔截了（CentOS 7 的防火墻改為 firewall ，而 7 以下是 iptables，具體修改的命令請(qǐng)參考 Centos 7 開(kāi)放查看端口 防火墻關(guān)閉打開(kāi) 這篇文章）。于是修改服務(wù)器的防火墻，讓它通行 80 端口：
sudo firewall-cmd --zone=public --add-port=80/tcp --permanent
這條命令的幾個(gè)含義：

–zone             # 作用域
–add-port=80/tcp  # 添加端口，格式為：端口/通訊協(xié)議
–permanent        # 永久生效，沒(méi)有此參數(shù)重啟后失效

設(shè)置完還需要重啟一下防火墻：
sudo firewall-cmd --reload

我們?cè)儆脼g覽器訪問(wèn)一下服務(wù)器，現(xiàn)在發(fā)現(xiàn)能成功訪問(wèn)了：

哈哈！漸入佳境了！

現(xiàn)在的前端項(xiàng)目基本是圍繞 Webpack 搭建的，而經(jīng)過(guò) Webpack 打包后會(huì)產(chǎn)生一系列 HTML 靜態(tài)文件。我們的目的是要將 Webpack 打包后的文件放到 Nginx 上，讓用戶能夠訪問(wèn)我們的項(xiàng)目。在這里，我們以 vue-cli 腳手架生成的項(xiàng)目為例子來(lái)進(jìn)行講解。
首先，生成一個(gè)打包后的項(xiàng)目文件：

$ npm install -g vue-cli    # 安裝 vue-cli 腳手架
$ vue init webpack my-vue   # 初始化項(xiàng)目 my-vue
$ cd my-vue && npm install  # 安裝項(xiàng)目所需模塊
$ npm run build             # 對(duì)項(xiàng)目文件進(jìn)行 Webpack 打包

這樣一來(lái)，my-vue 里面的 dist 文件夾就是我們打包后的項(xiàng)目文件了。
為了方便，我們?cè)诟夸浶陆ㄒ粋€(gè) nginx 文件夾，并把 my-vue 里面的 dist 文件夾放到 nginx 文件夾里，再重命名為 vue 文件夾：

$ mkdir ~/nginx
$ mv ~/my-vue/dist ~/nginx/vue

然后我們需要對(duì) Nginx 做一些配置，運(yùn)行 sudo /usr/local/nginx/sbin/nginx -t 來(lái)確定 nginx 的配置文件：

$ sudo /usr/local/nginx/sbin/nginx -t
# 下面這行代碼說(shuō)明 nginx 的配置文件是 /usr/local/nginx/conf/nginx.conf
nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok
nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful

運(yùn)行命令 sudo vim /usr/local/nginx/conf/nginx.conf，對(duì)配置文件添加下面代碼：

http {
    ...                                           // 其他配置代碼
    server {
        listen          8080;                     // 監(jiān)聽(tīng)的端口
        server_name     localhost;
        root            /home/shoufu/nginx/vue;   // 項(xiàng)目文件的根目錄

        location / {
            index       index.html index.htm;
        }
    }
}

其中，/home/shoufu 是我在服務(wù)器的用戶根目錄（~）
修改完畢，保存退出。運(yùn)行以下命令來(lái)重啟 Nginx，讓配置生效：
sudo /usr/local/nginx/sbin/nginx -s reload
別忘了讓防火墻開(kāi)放 8080 端口，允許用戶訪問(wèn)：
sudo firewall-cmd --zone=public --add-port=8080/tcp --permanent
sudo firewall-cmd --reload
這時(shí)我們打開(kāi)瀏覽器訪問(wèn)服務(wù)器的 8080 端口，卻意外地得到了 403 Forbidden 的錯(cuò)誤：

趕緊到服務(wù)器下執(zhí)行命令 $ curl http://127.0.0.1:8080，發(fā)現(xiàn)也是 403 ：

恍然大悟！原來(lái)是 Nginx 還沒(méi)設(shè)置好！
那究竟是什么問(wèn)題？轉(zhuǎn)戰(zhàn)百度，才發(fā)現(xiàn)是 Nginx 的權(quán)限不足。為了保證文件能正確執(zhí)行，Nginx 既需要文件的讀權(quán)限，又需要文件所有父目錄的可執(zhí)行權(quán)限。因此運(yùn)行以下命令，把 vue 文件夾及所有父文件夾都加上讀寫權(quán)限：

$ sudo chmod 755 ~
$ sudo chmod 755 ~/nginx
$ sudo chmod 755 ~/nginx/vue

此時(shí)我們?cè)俅蜷_(kāi)瀏覽器訪問(wèn)服務(wù)器的 8080 端口：

大吉大利！!

至此，前端項(xiàng)目的部署已經(jīng)基本完成！終于可以暫時(shí)拋去配置的煩惱，開(kāi)開(kāi)心心的回去修 Bug 了！

如客官所見(jiàn)，這是一篇非常入門的關(guān)于 Nginx 的配置文章，沒(méi)有任何技術(shù)難點(diǎn)。文章有意將瀏覽器不能訪問(wèn)服務(wù)器的兩個(gè)問(wèn)題寫出來(lái)，是因?yàn)樽髡咴谂挪閱?wèn)題的時(shí)候，發(fā)現(xiàn)在服務(wù)器直接訪問(wèn) Nginx 的頁(yè)面，能很好地檢查、排除問(wèn)題；在百度尋找問(wèn)題答案的時(shí)候，發(fā)現(xiàn)這種做法也得到了不少人的肯定。因此我把它記錄下來(lái)，希望能給后來(lái)搭建 Nginx 服務(wù)器的新人一些啟發(fā)。由于篇幅所限，本文沒(méi)有對(duì) Nginx 的特性做深入講解，還請(qǐng)有需要的客官查閱百度；如果時(shí)間允許，我也會(huì)盡量做好 Nginx 文章的更新。若您讀完后發(fā)現(xiàn)沒(méi)有任何收獲，那很可能說(shuō)明您已經(jīng)不在小白的行列了:D（若您讀完后能收獲幾張表情包那也是極好的）

最后，如果您讀完后覺(jué)得這篇文章對(duì)您有所收獲，歡迎點(diǎn)個(gè)贊或者點(diǎn)個(gè)收藏，這會(huì)鼓勵(lì)我寫出更多更好的文章出來(lái)的！:D

CentOS下nodejs最簡(jiǎn)單的安裝方法：https://segmentfault.com/a/11...

解決linux下node.js全局模塊找不到的情況：http://blog.csdn.net/y3530275...

CentOS 7 下安裝 Nginx：http://www.linuxidc.com/Linux...

Centos 7 開(kāi)放查看端口 防火墻關(guān)閉打開(kāi)：http://blog.csdn.net/jack8598...

解決Nginx服務(wù)器中403 forbidden的錯(cuò)誤：https://www.server110.com/ngi...