(小白指南)在 Linux 服务器上安装 Nodejs、Nginx 以及部署 Web 应用

浏览: 238 发布日期: 2017-12-18 分类: centos

前段时间要把项目部署到服务器,期间踩了不少的坑。故写下这篇文章,从零开始把自己部署的过程都记录下来,希望能给其他像我一样的小白一点帮助。如果有疏漏的地方,请各位客官指出,我会尽快做好修改,谢谢!????

作者使用的服务器系统是 CentOS 7,运行指令可能和其他系统有所差别,在这里不再赘述,还请客官明察秋毫,善用百度(´・ᴗ・`)

安装 Nodejs

安装 Nodejs 有两种方法,分别是下载源码编译和下载软件包,在 Nodejs 官网的下载页面(https://nodejs.org/en/download/)能可以看到两个不同的包,查看链接地址就能获取到对应版本的下载链接。

在写这篇文章时,Nodejs 的最新稳定版本是 v8.9.1,所以以下步骤将以这个版本为例进行安装。

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 。

2、直接安装编译好的 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 的命令 nodenpm 并不能在全局使用。为了解决这个问题,我们需要建立两个软链接:
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 的路径,在建立软链接的时候要注意区别。
现在,nodenpm 可以在全局使用了,同样输入命令 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 为所欲为了!

3、通过 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

参考资料

返回顶部