（小白指南）在 Linux 服務器上安裝 Nodejs、Nginx 以及部署 Web 應用

前段時間要把項目部署到服務器，期間踩了很多的坑。故寫下這篇文章，從零開始把本身部署的過程都記錄下來，但願能給其餘像我同樣的小白一點幫助。若是有疏漏的地方，請各位客官指出，我會盡快作好修改，謝謝！?

做者使用的服務器系統是 CentOS 7，運行指令可能和其餘系統有所差異，在這裏再也不贅述，還請客官明察秋毫，善用百度(´･ᴗ･`)

安裝 Nodejs

安裝 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 。

二、直接安裝編譯好的 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 進行安裝

咱們也能夠經過系統的 yum 來直接安裝 Nodejs。這種方式安裝時須要先確保能訪問到官方庫：
sudo yum install epel-release
而後咱們就能夠安裝 Nodejs 了：
sudo yum install nodejs

然而這種方法並不能確保安裝的 Nodejs 爲最新版本。在最新穩定版本爲 v8.9.1 的狀況下，我用這種方法安裝的 Nodejs 的版本是 v6.12.0 ，升級過程也屢遭波折，因此這種方法也不推薦採用。

Nginx 的安裝與配置

安裝 Nginx

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

配置 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

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

哈哈！漸入佳境了！

部署 Web 應用

如今的前端項目基本是圍繞 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...