Meteor部署和优化

这几天用Meteor + React写了一个电子商务网站, 整个过程非常迅速. 反倒是上线和上线之后的优化用了一些时间. 在这里记录一下.

上线

上线用的meteor-up, 只有简单几步:

meteor up配置了我阿里云的服务器ip和密码
godaddy上配置了DNS的IP指向阿里云IP
阿里云的安全策略, 配置开启80端口
mup deploy打包docker发布一气呵成

优化

因为这个网站一共只有200多个商品, 所以我没有做分页, 只是在header加了filter. 这样当产品加载完毕后, 整个网站的使用会非常流畅. 但是就是这个加载过程, 耗时太长. 所以继续优化

本地缓存

用localforage缓存所有的商品信息, 这样当用户主动刷新页面或进入网站时, 先从本地缓存读取, 然后当商品信息从服务端加载完毕后, 再使用服务端数据重新渲染同时更新本地缓存.

长列表优化

200多个产品, 虽然每个都只有一个40多k的小图片, 但是全部加载下来也比较慢, 而且长列表也比较消耗资源. 首先尝试了React Lazyload的库, 效果还可以. 然后尝试了react-list库, 首次加载20个item, 边沿还有400px时触发下一个20个item的加载, 这样即使快速滑动也感觉不到卡顿.

CDN加速

经过以上优化后, 第一次加载后, 整个网站使用非常流畅快速, 但是首次加载依然缓慢. 通过chrome network查看, meteor的js文件加载解析的速度非常慢(后来才知道一个主要原因是我之前的VPS带宽只有1M), 所以尝试了CDN加速. 尝试了七牛, 阿里云和360云加速, 都需要备案. 最后尝试了CloudFlare, 是国外的CDN但是号称和百度有合作, 可以加速国内的访问. 要去域名服务提供商(我的是godaddy), 把nameservers改成CloudFare的.

npm包CDN加速

将react和antd之类的静态js, 从npm引入的方式, 改成cdn引入, 因为我的目标用户主要是国内, 所以用了bootcdn. 引入这些包需要多调试几次, 因为他们还可能依赖其他的包

以下是我的main.html中引入的js

<script src="https://cdn.bootcss.com/lodash.js/4.17.5/lodash.min.js"></script>
<script src="https://cdn.bootcss.com/react/16.3.1/umd/react.production.min.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.3.1/umd/react-dom.production.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdn.bootcss.com/react-router/4.2.0/react-router.min.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.22.0/moment.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/antd/3.4.0/antd.min.js"></script>

注意, 比如antd改成这种方式后, 就需要改变引入方式了. 其他momentjs, lodash之类的, 直接使用即可. 其实我觉得这种方式非常方便, 省着总是import.
import { Button } from 'antd' 改成 const { Button } = antd;

HTTPS

用Meteor up不要太简单, 只需要配置proxy block即可.用let's encrypt服务, 直接给个email地址, 就可以使用它们的ssl证书了.

只是需要注意阿里云的安全策略需要增加对https端口443的支持

proxy: {
    domains: 'xx.com',
ssl: {
    letsEncryptEmail: 'xxx@gmail.com',
  }
}

服务器选择

之前使用阿里云的海外服务器, 不需要备案, 但是后来才发现带宽只有1M, 根本不够用, 加带宽又很贵. 现在改成了DigitalOcean在san francisco的VPS, 据说在国内访问比较快. 结果速度提升很多, 一个月只要5美元. 看到的朋友想试试可以点我的推荐链接http://www.digitalocean.com/?refcode=fbc139ecc02f
, 能够得到10美元的优惠券

使用自己的MongoDB服务器

因为Meteor up打包的docker, 不支持从远程访问. 这样对于运维来说就很不方便. 所以我决定在相同的服务器上搭建一个MongoDB服务器.
第一步 将 MongoDB Repository 地址加入到yum配置中
sudo vi /etc/yum.repos.d/mongodb-org.repo添加

[mongodb-org-3.4]
name=MongoDB Repository
baseurl=https://repo.mongodb.org/yum/redhat/$releasever/mongodb-org/3.4/x86_64/
gpgcheck=1
enabled=1
gpgkey=https://www.mongodb.org/static/pgp/server-3.4.asc

第二步 安装
sudo yum install mongodb-org
然后启动
sudo systemctl start mongod
常用命令

sudo systemctl start mongod
sudo systemctl reload mongod
sudo systemctl stop mongod
sudo systemctl status mongod
sudo tail /var/log/mongodb/mongod.log 查看日志
`sudo systemctl enable mongod` 启动运行

安全设置

mongo
use admin

db.createUser(
  {
    user: "AdminSammy",
    pwd: "AdminSammy'sSecurePassword",
    roles: [ { role: "userAdminAnyDatabase", db: "admin" } ]
  }
)

然后vi /etc/mongod.conf如下修改

security:
  authorization: "enabled"

重启数据库后生效
现在开始登录数据库就需要用户名密码了
mongo -u "AdminSammy" -p "AdminSammy'sSecurePassword" --authenticationDatabase admin
注意现在AdminSammy虽然有admin数据库的完全访问权限, 但是并不能用于其他数据库, 还需要
use meteor

db.createUser(
  {
    user: "username",
    pwd: "password",
    roles: ["dbOwner"]
  }
)

这样就能用username登录数据库了

允许远程登录

vi /etc/mongod.conf,

net:
  port: 27017
  bindIp: 0.0.0.0

结果

经过以上优化, 我的电商网站打开速度提升不少, 并且得益于Meteor的特性和本地缓存, 在使用过程中也是速度飞快.