（小白指南）在 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...