第一次与云服务器的亲密接触

最近想学一点服务器的内容，看到腾讯云服务器搞活动，二话不说我就买了。在这里记录一下部署一个 node + vue + mongodb 的项目过程。期间参考了很多文章，主要是官方文档。成果在这里 http://www.fishhere.fun ，可以查看一下。

登录 Linux 实例

我购买的是CentOS 7.5 64位。
直接通过官方提供的 webshell 登录，这个 webshell 还是挺方便的可以复制粘贴。
需要注意的是，要在安全组中放通22端口，我的默认就是允许访问。
期间遇到了一个问题，偶尔登录不上，提示“实例鉴权失败，请确认实例已启用密码鉴权并且账号密码正确”，根据文档进行排查无果，索性提交工单，十分钟后就收到回复，为这速度点个赞，但是回复只是一些让我检查密码是否正确之类的内容。
我决定改用另外的方式登录。

使用 OS X 的 shell 登录

打开终端，选择 shell 中的新建远程连接。依次输入用户名和公网 ip,这时终端会提示输入密码，输入密码即可。

此时是可以正常登录的，我再次尝试使用官方提供的 webshell，发现也可以登录了。

安装 node 环境

下载安装版，选择自己所需的版本，我这里选择最新的稳定版。

#wget https://nodejs.org/dist/v10.16.3/node-v10.16.3-linux-x64.tar.xz

wget https://nodejs.org/dist/v12.18.1/node-v12.18.1-linux-x64.tar.xz

解压安装包
1
tar xvf node-v12.18.1-linux-x64.tar.xz

创建软连接

ln -s /root/node-v12.18.1-linux-x64/bin/node /usr/local/bin/node

ln -s /root/node-v12.18.1-linux-x64/bin/npm /usr/local/bin/npm

成功创建软链接后，即可在云服务器任意目录下使用 node 及 npm 命令

查看版本
1
2
3
node -v

npm -v
如果出现版本信息，说明我们已经安装成功了。

安装 node 的多个环境

安装git
1
yum install -y git

执行以下命令，下载 NVM 源码并检查最新版本

git clone https://github.com/cnpm/nvm.git ~/.nvm && cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`

配置 nvm 的环境变量
1
echo ". ~/.nvm/nvm.sh" >> /etc/profile
读取环境变量
1
source /etc/profile
查看node所有版本
1
nvm list-remote

6.安装多个版本的 Node.js

nvm install v10.16.3
nvm install v12.18.1

7.查看已经安装的脚本

nvm ls

8.切换 Node.js 使用版本

nvm use v10.16.3

安装 mongodb

下载，直接去官网查看下载连接，选择合适的，我的是 linux。

# wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-4.0.4.tgz
wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel70-4.2.8.tgz

解压

tar zxvf mongodb-linux-x86_64-rhel70-4.2.8.tgz  # 解压
mv mongodb-linux-x86_64-rhel70-4.2.8 /usr/local/mongodb  #将解压后的文件移动到指定目录

创建文件夹

mkdir /var/mongodb
# 用于存放数据
mkdir /var/mongodb/data
# 用于存放日志
mkdir /var/mongodb/logs

操作 mongodb

# 启动 mongodb
/usr/local/mongodb/bin/mongod --dbpath=/var/mongodb/data --logpath /var/mongodb/logs/log.log -fork
 
# 停止 mongodb
/usr/local/mongodb/bin/mongod -shutdown -dbpath=/var/mongodb/data

–dbpath 指定存储数据的文件夹
–logpath 指定日志存储文件（将不会输出到控制台）
–port 指定端口，如果不写的话，默认是27017
–fork 表示后台运行

4.1 创建 mongodb.conf 文件并配置， bind_ip (值为内网 IP) 支持外网访问
这一步骤，如果不需要外网访问数据库，可以不用操作，我只是方便我自己在本地电脑远程操作数据库。

port = 27017 
dbpath = /var/mongodb/data
logpath = /var/mongodb/logs/log.log
logappend = true
bind_ip = 172.1.2.3
fork = true

# 执行这个命令 开启 mongodb 的服务
cd /usr/local/mongodb/bin/
./mongod -f mongodb.conf

创建数据库管理员的账号密码

-- 超级管理员
db.createUser({ user: "root", pwd:"yourPassword", roles:[{ role: "userAdminAnyDatabase", db: "admin" }] })

-- 数据库管理员 readWrite 读写权限
db.createUser({ user: "yourName", pwd:"yourPassword", roles:[ { role: "readWrite", db: "yourDB" }] })

使用git将代码拉取到服务器

创建文件夹（可选）
我喜欢这样的格式。

mkdir yourFolder
cd yourFolder
mkdir yourFolder-node
cd yourFolder-node

克隆仓库
1
git clone https://yourWebsite.com/yourProject.git
如果仓库是私人仓库，会提示输入账号和密码。

拉取代码

cd yourFolder/yourFolder-node/yourProject/
git pull

#输入邮箱和密码

安装依赖和运行代码
1
2
npm install
npm start
因为我用了 Egg 框架，内置了进程守护，所以无需安装其他进程守护模块。
这个时候打开ip+端口号就能访问页面了
但是有个端口号，看起来不是很专业，接下来我们使用nginx去掉它。

配置 nginx

查看 yum 源是否存在
1
yum list | grep nginx
很多系统内置了 nginx

安装 nginx
我打算再次安装，走一下流程。

vim /etc/yum.repos.d/nginx.repo

baseurl=http://nginx.org/packages/OS/OSRELEASE/$basearch/
改成自己对应的系统
输入这段代码

[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/centos/7/$basearch/
gpgcheck=0
enabled=1

然后就可以愉快的安装了

yum install nginx

查看版本

nginx -v

从刚刚的 1.16.1 升级到了 1.18.0

体验 nginx

# 查看 nginx 安装到了哪个路径，rpm 是 linux 的包管理工具，-q 代表询问模式，-l 代表返回列表
rpm -ql nginx

# 进入文件夹查看配置文件
cd /etc/nginx
vim nginx.conf

# 直接子配置文件
cd /etc/nginx/conf.d
vim default.conf

nginx 的常用命令

# 启动
nginx

# 使用linux的命令启动
systemctl start nginx.service

# 查看服务的运行状态
ps aux | grep nginx

# 立即停止
nginx  -s stop

# 从容停止，进程完成当前工作后再停止
nginx -s quit

# 杀死进程
killall nginx

# 使用linux的命令停止
systemctl stop nginx.service

# 重启服务
systemctl restart nginx.service

# 修改配置文件后，需要重新加载
nginx -s reload

# 查看端口号占用情况
netstat -tlnp

配置nginx

# 执行
cd /etc/nginx/conf.d
vim default.conf

# 添加以下内容
    location / {
        proxy_pass http://127.0.0.1:7001;
        proxy_set_header Host      $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        #root   /usr/share/nginx/html;
        #index  index.html index.htm;
   }

记得要执行 nginx -s reload 命令，每次修改 nginx 的配置都要执行此命令。
到了这一步，我们的网站就可以不用加端口号访问了。

下面这一步是开启 gzip, 优化一下我们的网站。

# 执行
cd /etc/nginx
vim nginx.conf

#修改部分内容
http {
    include       /etc/nginx/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  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;
    # 修改这里，开启 gzip
    gzip  on;
    gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-javascript;


    include /etc/nginx/conf.d/*.conf;
}

优化 vue 项目

有一些项目是在服务端打包成 gzip 文件，我使用了 vue，我直接在本地打包。

# 安装插件
npm install compression-webpack-plugin -D

// vue.config.js
const CompressionPlugin = require('compression-webpack-plugin')
module.exports = {
    configureWebpack: () => {
        return {
            plugins: [
                new CompressionPlugin({
                    algorithm: 'gzip',
                    test: /\.(js|css)(\?.*)?$/i, // 匹配文件名
                    threshold: 1024, // 对超过1k的数据压缩
                    deleteOriginalAssets: false, // 不删除源文件
                    // minRatio: 0.8 // 压缩比
                })
            ]
        }
    }
}

如果本身就是很小的文件，再压缩成 gzip 反而会变大。所以设置成超过 1k 的数据进行压缩。

配置 ssl

腾讯云有免费的证书，可以申请使用一年，之前用过阿里云的域名也有免费的证书。
以下用我的 http://www.fishhere.fun 网站举例说明。

在 SSL 证书管理页面中下载并解压 fishhere.fun 证书文件包到本地目录
使用 FileZilla 上传文件
依次输入主机用户名和密码。

当然也可以使用其他趁手的工具，直接使用命令行也是很酷的。

然后将文件拖到 /etc/nginx 下，这个路径是我们在上一步骤中通过查询命令拿到的，

修改配置内容

# 进入 conf.d 目录
cd /etc/nginx/conf.d

# 创建文件
vim fishhere.conf

server {
    #SSL 访问端口号为 443
    listen 443 ssl;
    #填写绑定证书的域名
    server_name fishhere.com;
    #证书文件名称
    ssl_certificate 1_fishhere.fun_bundle.crt;
    #私钥文件名称
    ssl_certificate_key 2_fishhere.fun.key;
    ssl_session_timeout 5m;
    #请按照以下协议配置
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    #请按照以下套件配置，配置加密套件，写法遵循 openssl 标准。
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
    ssl_prefer_server_ciphers on;
    location / {
        #网站主页路径。此路径仅供参考，具体请您按照实际目录操作。
        proxy_pass http://127.0.0.1:7001;
        proxy_set_header Host      $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        #root /var/www/cloud.tencent.com;
        #index  index.html index.htm;
    }
}
server {
    listen 80;
    #填写绑定证书的域名
    server_name www.fishhere.fun;
    #把http的域名请求转成https
    return 301 https://$host$request_uri;
}

展望

好了，我们就结束了云服务器的部署工作，很多细节仍然需要提高，比如使用密码就可以直接访问云服务器是不是不太安全？比如 nginx 配置网站主页路径是不是应该直接指向 vue? 这些问题在配置的过程当中也有查阅相关文档，但说法不一，最后决定使用最简单的方式。

最后感谢你的阅读，如果有好的建议或者意见可以给我回复，谢谢你。