Meteor部署和優(yōu)化

這幾天用Meteor + React寫(xiě)了一個(gè)電子商務(wù)網(wǎng)站, 整個(gè)過(guò)程非常迅速. 反倒是上線和上線之后的優(yōu)化用了一些時(shí)間. 在這里記錄一下.

上線

上線用的meteor-up, 只有簡(jiǎn)單幾步:

meteor up配置了我阿里云的服務(wù)器ip和密碼
godaddy上配置了DNS的IP指向阿里云IP
阿里云的安全策略, 配置開(kāi)啟80端口
mup deploy打包docker發(fā)布一氣呵成

優(yōu)化

因?yàn)檫@個(gè)網(wǎng)站一共只有200多個(gè)商品, 所以我沒(méi)有做分頁(yè), 只是在header加了filter. 這樣當(dāng)產(chǎn)品加載完畢后, 整個(gè)網(wǎng)站的使用會(huì)非常流暢. 但是就是這個(gè)加載過(guò)程, 耗時(shí)太長(zhǎng). 所以繼續(xù)優(yōu)化

本地緩存

用localforage緩存所有的商品信息, 這樣當(dāng)用戶主動(dòng)刷新頁(yè)面或進(jìn)入網(wǎng)站時(shí), 先從本地緩存讀取, 然后當(dāng)商品信息從服務(wù)端加載完畢后, 再使用服務(wù)端數(shù)據(jù)重新渲染同時(shí)更新本地緩存.

長(zhǎng)列表優(yōu)化

200多個(gè)產(chǎn)品, 雖然每個(gè)都只有一個(gè)40多k的小圖片, 但是全部加載下來(lái)也比較慢, 而且長(zhǎng)列表也比較消耗資源. 首先嘗試了React Lazyload的庫(kù), 效果還可以. 然后嘗試了react-list庫(kù), 首次加載20個(gè)item, 邊沿還有400px時(shí)觸發(fā)下一個(gè)20個(gè)item的加載, 這樣即使快速滑動(dòng)也感覺(jué)不到卡頓.

CDN加速

經(jīng)過(guò)以上優(yōu)化后, 第一次加載后, 整個(gè)網(wǎng)站使用非常流暢快速, 但是首次加載依然緩慢. 通過(guò)chrome network查看, meteor的js文件加載解析的速度非常慢(后來(lái)才知道一個(gè)主要原因是我之前的VPS帶寬只有1M), 所以嘗試了CDN加速. 嘗試了七牛, 阿里云和360云加速, 都需要備案. 最后嘗試了CloudFlare, 是國(guó)外的CDN但是號(hào)稱(chēng)和百度有合作, 可以加速?lài)?guó)內(nèi)的訪問(wèn). 要去域名服務(wù)提供商(我的是godaddy), 把nameservers改成CloudFare的.

npm包CDN加速

將react和antd之類(lèi)的靜態(tài)js, 從npm引入的方式, 改成cdn引入, 因?yàn)槲业哪繕?biāo)用戶主要是國(guó)內(nèi), 所以用了bootcdn. 引入這些包需要多調(diào)試幾次, 因?yàn)樗麄冞€可能依賴(lài)其他的包

以下是我的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之類(lèi)的, 直接使用即可. 其實(shí)我覺(jué)得這種方式非常方便, 省著總是import.
import { Button } from 'antd' 改成 const { Button } = antd;

HTTPS

用Meteor up不要太簡(jiǎn)單, 只需要配置proxy block即可.用let's encrypt服務(wù), 直接給個(gè)email地址, 就可以使用它們的ssl證書(shū)了.

只是需要注意阿里云的安全策略需要增加對(duì)https端口443的支持

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

服務(wù)器選擇

之前使用阿里云的海外服務(wù)器, 不需要備案, 但是后來(lái)才發(fā)現(xiàn)帶寬只有1M, 根本不夠用, 加帶寬又很貴. 現(xiàn)在改成了DigitalOcean在san francisco的VPS, 據(jù)說(shuō)在國(guó)內(nèi)訪問(wèn)比較快. 結(jié)果速度提升很多, 一個(gè)月只要5美元. 看到的朋友想試試可以點(diǎn)我的推薦鏈接http://www.digitalocean.com/?refcode=fbc139ecc02f
, 能夠得到10美元的優(yōu)惠券

使用自己的MongoDB服務(wù)器

因?yàn)镸eteor up打包的docker, 不支持從遠(yuǎn)程訪問(wèn). 這樣對(duì)于運(yùn)維來(lái)說(shuō)就很不方便. 所以我決定在相同的服務(wù)器上搭建一個(gè)MongoDB服務(wù)器.
第一步 將 MongoDB Repository 地址加入到y(tǒng)um配置中
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
然后啟動(dòng)
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` 啟動(dòng)運(yùn)行

安全設(shè)置

mongo
use admin

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

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

security:
  authorization: "enabled"

重啟數(shù)據(jù)庫(kù)后生效
現(xiàn)在開(kāi)始登錄數(shù)據(jù)庫(kù)就需要用戶名密碼了
mongo -u "AdminSammy" -p "AdminSammy'sSecurePassword" --authenticationDatabase admin
注意現(xiàn)在AdminSammy雖然有admin數(shù)據(jù)庫(kù)的完全訪問(wèn)權(quán)限, 但是并不能用于其他數(shù)據(jù)庫(kù), 還需要
use meteor

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

這樣就能用username登錄數(shù)據(jù)庫(kù)了

允許遠(yuǎn)程登錄

vi /etc/mongod.conf,

net:
  port: 27017
  bindIp: 0.0.0.0

結(jié)果

經(jīng)過(guò)以上優(yōu)化, 我的電商網(wǎng)站打開(kāi)速度提升不少, 并且得益于Meteor的特性和本地緩存, 在使用過(guò)程中也是速度飛快.