如何将node+mongodb项目部署在腾讯云服务器，并进行性能优化的

原创

云上云

修改于 2019-08-27 17:27:54

8.8K0

修改于 2019-08-27 17:27:54

文章被收录于专栏：上云

1. 流程

开发好前端与后端程序。

购买服务器与域名

服务器上安装所需环境（本项目是 node 和 mongodb ）

服务器上开放端口与设置规则

用 nginx、apache 或者tomcat 来提供HTTP服务或者设置代理

上传项目代码或者用码云或者 gihub 来拉取你的代码到服务器上

启动 express 服务器

优化页面加载

2. 内容细节

2.1 开发好前端与后端程序

开发好前端与后端程序，这个没什么好说的，就是开发！开发！开发！再开发！

2.2 购买服务器与域名

本人一直觉得程序员应该有一个自己的个人网站，拥有自己的域名与服务器。学知识或者测试项目的时候可以用来测试。

可以使用腾讯云服务器https://cloud.tencent.com/product/cvm ，相对来讲比较便宜。

可以ping一下腾讯云哪个节点比较好：https://ping.gaomeluo.com/tengxun/

服务器预装环境可以选择 CentOS 或者 windows server，，为了体验和学习 linux 系统，我选择了CentOS。

3. 服务器上安装所需环境（本项目是 node 和 mongodb ）

3.1 登录服务器

因本人用的是 MacBook Pro ，所以直接打开 mac 终端，通过下面的命令行连接到服务器。root 是腾讯云服务器默认的账号名，连接时候会叫你输入密码，输入你购买时设置的或者后来设置的密码。

ssh root@47.106.20.666 //你的服务器公网 ip，比如 47.106.20.666

如图：

window 系统的，请用 Putty 或 Xshell 来登录。

一般在新服务器创建后，建议先升级一下 CentOS：

yum -y update

常用的 Linux 命令

cd 进入目录
cd .. 返回上一个目录
ls -a 查看当前目录
mkdir abc 创建abc文件夹
mv 移动或重命名
rm 删除一个文件或者目录

3.2 安装 node

升级常用库文件, 安装 node.js 需要通过 g++ 进行编译。

yum -y install gcc gcc-c++ autoconf

跳转到目录：/usr/local/src，这个文件夹通常用来存放软件源代码：

cd /usr/local/src

下载 node.js 源码，也可以使用 scp 命令直接上传，因为下载实在太慢了：

下载地址：https://nodejs.org/en/download/ ，请下载最新的相应版本的源码进行下载，本人下载了 v10.13.0 版本的。

https://nodejs.org/dist/v10.13.0/node-v10.13.0.tar.gz

下载完成后解压：

tar -xzvf node-v10.13.0.tar.gz

进入解压后的文件夹：

cd node-v10.13.0

执行配置脚本来进行预编译处理：

./configure

编译源代码，这个步骤花的时间会很长，大概需要 5 到 10 分钟：

make

编译完成后，执行安装命令，使之在系统范围内可用：

make install

安装 express 推荐 global 安装

npm -g install express

建立超级链接, 不然 sudo node 时会报 "command not found"

sudo ln -s /usr/local/bin/node /usr/bin/node
sudo ln -s /usr/local/lib/node /usr/lib/node
sudo ln -s /usr/local/bin/npm /usr/bin/npm
sudo ln -s /usr/local/bin/node-waf /usr/bin/node-waf

通过指令查看 node 及 npm 版本：

node -v
npm -v

node.js 到这里就基本安装完成了。

3.2 安装 mongodb

下载地址：https://www.mongodb.com/download-center/community

下载时，请选对相应的环境与版本，因为本人的服务器是 CentOS ，其实本质就是 linux 系统，所以选择了如下图环境与目前最新的版本。

mongodb :

软件安装位置：/usr/local/mongodb
数据存放位置：/home/mongodb/data
数据备份位置：/home/mongodb/bak
日志存放位置：/home/mongodb/logs

下载安装包

> cd /usr/local
> wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-4.0.4.tgz

解压安装包，重命名文件夹为 mongodb

tar zxvf mongodb-linux-x86_64-4.0.4.tgz
mv mongodb-linux-x86_64-4.0.4 mongodb

在 var 文件夹里建立 mongodb 文件夹，并分别建立文件夹 data 用于存放数据，logs 用于存放日志

mkdir /var/mongodb
mkdir /var/mongodb/data
mkdir /var/mongodb/logs

打开 rc.local 文件，添加 CentOS 开机启动项：

vim /etc/rc.d/rc.local
// 不懂 vim 操作的请自行查看相应的文档教程，比如： vim 模式下，要 按了 i 才能插入内容，输入完之后，要按 shift 加 :wq 才能保存退出。

将 mongodb 启动命令追加到本文件中，让 mongodb 开机自启动：

/usr/local/mongodb/bin/mongod --dbpath=/var/mongodb/data --logpath /var/mongodb/logs/log.log -fork

启动 mongodb

/usr/local/mongodb/bin/mongod --dbpath=/var/mongodb/data --logpath /var/mongodb/logs/log.log -fork

看到如下信息说明已经安装完成并成功启动:

forked process: 18394
all output going to: /var/mongodb/logs/log.log

mongodb 默认的端口号是 27017。

如果你数据库的连接要账号和密码的，要创建数据库管理员，不然直接连接即可。

在 mongo shell 中创建管理员及数据库。

切换到 admin 数据库，创建超级管理员帐号

use admin
db.createUser({ user: "用户名", pwd:"登陆密码", roles:[{ role: "userAdminAnyDatabase", db: "admin" }] })

切换到要使用的数据库，如 taodb 数据库，创建这个数据库的管理员帐号

use taodb
db.createUser({ user: "用户名", pwd:"登陆密码", roles:[ { role: "readWrite", db: "taodb" }] //读写权限 })

重复按两下 control+c ，退出 mongo shell。

到这里 mongodb 基本已经安装设置完成了。

3.3 服务器上开放端口与设置安全组规则

安全组规则是什么鬼

授权安全组规则可以允许或者禁止与安全组相关联的 CVM 实例的公网和内网的入方向和出方向的访问。undefined腾讯云安全组应用案例文档 80 端口是为 HTTP(HyperText Transport Protocol) 即超文本传输协议开放的,浏览器 HTTP 访问 IP 或域名的 80 端口时,可以省略 80 端口号

端口都配置对了，以为能用公网 IP 进行访问了么 ?

还有防火墙这一关呢，如果防火墙没有关闭或者相关的端口没有开放，也是不能用公网 IP 进行访问网站内容的。

和安全组端口同理，比如我们的服务要用到的是 3000 端口，就要开放 3000 的端口，不然是访问不了的；其他端口同理。

3.4 用 nginx、apache 或者 tomcat 来提供 HTTP 服务或者设置代理

我是用了 nginx 的，所以这里只介绍 nginx 。

开启 ngnx 代理

cd /usr/local/nginx

在 nginx 目录下有一个 sbin 目录，sbin 目录下有一个 nginx 可执行程序。

./nginx

关闭 nginx

./nginx -s stop

重启

./nginx -s reload

基本的使用就是这样子了。

如下给出我的 nginx 代理的设置：

我的两个项目是放在 /home/blog/blog-react/build/; 和 /home/blog/blog-react-admin/dist/; 下的，如果你们的路径不是这个，请修改成你们的路径。

#user  nobody;
worker_processes  1;
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
#pid        logs/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    # 如果port_in_redirect为off时，那么始终按照默认的80端口；如果该指令打开，那么将会返回当前正在监听的端口。
    port_in_redirect off;

    # 前台展示打开的服务代理
    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        #root /home/blog;

        location  / {
            root   /home/blog/blog-react/build/;
            index  index.html;
            try_files $uri $uri/ @router;
            autoindex on;
        }

        location @router{
            rewrite ^.*$ /index.html last;
        }

        location /api/ {
            proxy_set_header X-Real-IP $remote_addr;
            proxy_pass http://47.106.136.114:3000/ ;
        }
        gzip on;

        gzip_buffers 32 4k;

        gzip_comp_level 6;

        gzip_min_length 200;

        gzip_types text/css text/xml application/javascript;

        gzip_vary on;

        #error_page  404              /404.html;
        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }


    # HTTPS server
    # 管理后台打开的服务代理
    server {
        listen       4444;
        server_name  localhost;
        #   charset koi8-r;
        #   ssl_certificate      cert.pem;
        #   ssl_certificate_key  cert.key;

        #   ssl_session_cache    shared:SSL:1m;
        #    ssl_session_timeout  5m;

        #    ssl_ciphers  HIGH:!aNULL:!MD5;
        #    ssl_prefer_server_ciphers  on;

        location / {
            root   /home/blog/blog-react-admin/dist/;
            index  index.html index.htm;
            try_files $uri $uri/ @router;
            autoindex on;
        }
        location @router{
            rewrite ^.*$ /index.html last;
        }

        location /api/ {
            proxy_set_header X-Real-IP $remote_addr;
            proxy_pass http://47.106.136.114:3000/ ;
        }
        gzip on;

        gzip_buffers 32 4k;

        gzip_comp_level 6;

        gzip_min_length 200;

        gzip_types text/css text/xml application/javascript;

        gzip_vary on;

        error_page   500 502 503 504  /50x.html;
    }
}

我是开了两个代理的：前台展示打开的服务代理和管理后台打开的服务代理，这个项目是分开端口访问的。

比如：我的公网 ip 是 47.106.20.666，那么可以通过 http://47.106.20.666 即可访问前台展示，http://47.106.20.666:4444 即可访问管理后台的登录界面。

至于为什么要写这样的配置:

try_files $uri $uri/ @router;

location @router{
        rewrite ^.*$ /index.html last;
    }

因为进入到文章详情时或者前端路由变化了，再刷新浏览器，发现浏览器出现 404 。刷新页面时访问的资源在服务端找不到，因为 react-router 设置的路径不是真实存在的路径。

所以那样设置是为了可以刷新还可以打到对应的路径的。

3.5 上传项目代码，或者用码云、 gihub 来拉取你的代码到服务器上

我是创建了码云的账号来管理项目代码的，因为码云上可以创建免费的私有仓库，我在本地把码上传到 Gitee.com 上，再进入服务器用 git 把代码拉取下来就可以了，非常方便。

具体请看：码云（Gitee.com）帮助文档 V1.2 http://git.mydoc.io/?t=180676

git 的安装请看： CentOS 7.4 系统安装 git https://www.cnblogs.com/hglibin/p/8627975.html

如果不想用 git 进行代码管理，请用其他可以连接服务器上传文件的软件，比如 FileZilla。

3.6 启动 express 服务

启动 express 服务，我用了 pm2，可以永久运行在服务器上，且不会一报错 express 服务就挂了，而且运行中还可以进行其他操作。

安装：

npm install -g pm2

切换当前工作目录到 express 应用文件夹下,执行 pm2 命令启动 express 服务：

pm2 start ./bin/www

比如我操作项目时的基本操作：

cd /home/blog/blog-node
pm2 start ./bin/www // 开启
pm2 stop ./bin/www // 关闭
pm2 list //查看所用已启动项目：

3.7 页面加载优化

再看刚刚的 nginx 的一些配置：

server {
        gzip on;
        gzip_buffers 32 4k;
        gzip_comp_level 6;
        gzip_min_length 200;
        gzip_types text/css text/xml application/javascript;
        gzip_vary on;
    }

这个就是利用 ngonx 开启 gzip，亲测开启之后,压缩了接近 2/3 的文件大小，本来要 1M 多的文件，开启压缩之后，变成了 300k 左右。

做完一系列的优化处理之后，在网络正常的情况下，页面首屏渲染由本来是接近 5 秒，变成了 3 秒内，首屏渲染之前的 loading 在 1 秒内可见了。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

mongodb