摘要：首先，的命令和并不能在全局使用。文章有意將瀏覽器不能訪問服務器的兩個問題寫出來，是因為作者在排查問題的時候，發現在服務器直接訪問的頁面，能很好地檢查排除問題在百度尋找問題答案的時候，發現這種做法也得到了不少人的肯定。

前段時間要把項目部署到服務器，期間踩了不少的坑。故寫下這篇文章，從零開始把自己部署的過程都記錄下來，希望能給其他像我一樣的小白一點幫助。如果有疏漏的地方，請各位客官指出，我會盡快做好修改，謝謝！?

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

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

在寫這篇文章時，Nodejs 的最新穩定版本是 v8.9.1，所以以下步驟將以這個版本為例進行安裝。

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

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

$ node -v
v8.9.1         # 如果出現了對應的版本號信息，說明安裝成功

然而 Nodejs 在編譯的時候往往需要花費較多的時間，在配置較低的服務器上編譯則需要更久。所以對于配置較低的服務器，我更推薦下面的方法，利用已編譯的二進制文件安裝 Nodejs 。

這種方法相比第一種節省了編譯安裝的時間，所以安裝起來更快。
第一步仍然需要下載對應的二進制文件：
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
解壓之后得到的文件夾就是已經安裝好的 Nodejs 了，為了方便我們可以把它重命名一下（在這里我把它放到了
用戶根目錄下面的 app 的文件夾里，你也可以換成其他路徑）：
mv node-v8.9.1-linux-x64 ~/app/nodejs

然而，這種方式安裝的 Nodejs 并不完美。首先，Nodejs 的命令 node 和 npm 并不能在全局使用。為了解決這個問題，我們需要建立兩個軟鏈接：
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 的路徑，在建立軟鏈接的時候要注意區別。
現在，node 和 npm 可以在全局使用了，同樣輸入命令 node -v 來檢查 Nodejs 是否安裝成功：

$ node -v
v8.9.1         # 出現了對應的版本號信息，說明安裝成功

還有一個問題，在 npm 下全局安裝的模塊無法直接在 bash 中執行。例如，我們要在 npm 中安裝 yarn：

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

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

現在，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 的安裝已經順利完成，我們可以在服務器上對 Nodejs 為所欲為了！

我們也可以通過系統的 yum 來直接安裝 Nodejs。這種方式安裝時需要先確保能訪問到官方庫：
sudo yum install epel-release
然后我們就可以安裝 Nodejs 了：
sudo yum install nodejs

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

CentOS 上安裝 Nginx 比較簡單，步驟跟 Nodejs 的編譯安裝非常類似，網上也有很多安裝 Nginx 的帖子。我參考的是 CentOS 7 下安裝 Nginx 這篇帖子，安裝過程也非常順利，沒有出現任何問題，故在這里不再贅述。

安裝完成并啟動 Nginx 后，我們在本地的瀏覽器訪問服務器，卻發現無法連接：

然而，我們在終端運行命令 curl http://127.0.0.1，卻能看到 HTML 代碼：

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

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

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

我們再用瀏覽器訪問一下服務器，現在發現能成功訪問了：

哈哈！漸入佳境了！

現在的前端項目基本是圍繞 Webpack 搭建的，而經過 Webpack 打包后會產生一系列 HTML 靜態文件。我們的目的是要將 Webpack 打包后的文件放到 Nginx 上，讓用戶能夠訪問我們的項目。在這里，我們以 vue-cli 腳手架生成的項目為例子來進行講解。
首先，生成一個打包后的項目文件：

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

這樣一來，my-vue 里面的 dist 文件夾就是我們打包后的項目文件了。
為了方便，我們在根目錄新建一個 nginx 文件夾，并把 my-vue 里面的 dist 文件夾放到 nginx 文件夾里，再重命名為 vue 文件夾：

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

然后我們需要對 Nginx 做一些配置，運行 sudo /usr/local/nginx/sbin/nginx -t 來確定 nginx 的配置文件：

$ sudo /usr/local/nginx/sbin/nginx -t
# 下面這行代碼說明 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

運行命令 sudo vim /usr/local/nginx/conf/nginx.conf，對配置文件添加下面代碼：

http {
    ...                                           // 其他配置代碼
    server {
        listen          8080;                     // 監聽的端口
        server_name     localhost;
        root            /home/shoufu/nginx/vue;   // 項目文件的根目錄

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

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

趕緊到服務器下執行命令 $ curl http://127.0.0.1:8080，發現也是 403 ：

恍然大悟！原來是 Nginx 還沒設置好！
那究竟是什么問題？轉戰百度，才發現是 Nginx 的權限不足。為了保證文件能正確執行，Nginx 既需要文件的讀權限，又需要文件所有父目錄的可執行權限。因此運行以下命令，把 vue 文件夾及所有父文件夾都加上讀寫權限：

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

此時我們再打開瀏覽器訪問服務器的 8080 端口：

大吉大利！!

至此，前端項目的部署已經基本完成！終于可以暫時拋去配置的煩惱，開開心心的回去修 Bug 了！

如客官所見，這是一篇非常入門的關于 Nginx 的配置文章，沒有任何技術難點。文章有意將瀏覽器不能訪問服務器的兩個問題寫出來，是因為作者在排查問題的時候，發現在服務器直接訪問 Nginx 的頁面，能很好地檢查、排除問題；在百度尋找問題答案的時候，發現這種做法也得到了不少人的肯定。因此我把它記錄下來，希望能給后來搭建 Nginx 服務器的新人一些啟發。由于篇幅所限，本文沒有對 Nginx 的特性做深入講解，還請有需要的客官查閱百度；如果時間允許，我也會盡量做好 Nginx 文章的更新。若您讀完后發現沒有任何收獲，那很可能說明您已經不在小白的行列了:D（若您讀完后能收獲幾張表情包那也是極好的）

最后，如果您讀完后覺得這篇文章對您有所收獲，歡迎點個贊或者點個收藏，這會鼓勵我寫出更多更好的文章出來的！:D

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

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

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

Centos 7 開放查看端口 防火墻關閉打開：http://blog.csdn.net/jack8598...

解決Nginx服務器中403 forbidden的錯誤：https://www.server110.com/ngi...