背景
- 由于只想了解当天新增的top热词，减少过多信息干扰，打算做一款app实现这个功能。
- 架构： 热词抓取 -> mysql <=> nodejs <=> nginx <=> react native应用
软件安装：
从阿里云申请的CentOS7.4裸机，因此软件安装列表如下：
- jdk： yum install java-1.7.0-openjdk-devel
- maven： wget apache-maven-3.3.9-bin.tar.gz && add to /etc/profile && source
- ssh免密登录：scp ~/.ssh/id_rsa.pub root@阿里云服务器ip:~/.ssh/authorized_keys
- nodejs： sudo yum -y install npm && sudo npm install -g n && sudo n 9.4.0
- mysql：
wget http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.rpm
rpm -ivh mysql-community-release-el7-5.noarch.rpm
yum install mysql-community-server
service mysql restart - nginx:
wget http://dl.Fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm
rpm -ivh epel-release-latest-7.noarch.rpm && yum install nginx -y
vim /etc/nginx/conf.d/nginx.yourservice.conf :
server {
listen 80;
server_name 你的域名; #例如到阿里云申请域名，然后在域名解析设置，使用记录类型A
access_log /var/log/nginx/yourservice-access.log;
error_log /var/log/nginx/yourservice-error.log;
location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-Nginx-Proxy true;
proxy_set_header Connection "";
proxy_pass http://127.0.0.1:3000; #nodejs web服务监听的端口
proxy_redirect default;
}
location /static/ {
}
}
systemctl start nginx.service 启动nginx
注意：使用阿里云服务器遇到个坑，localhost可以访问http接口，用ip无法访问，误以为是防火墙问题，后来在阿里云－实例安全组修改：允许80地址段访问才解决。
爬虫(java):
- 数据来源: 百度热词榜、 神马热词榜、搜狗实时热词榜、搜狗微信热词榜
- 数据处理: 解析使用jsoup(java的HTML解析器),数据存储使用mysql. 具体可参见代码
- crontab定时job: 设置/var/spool/cron/下的配置文件,每15分钟抓取一次热词:
15 * * * * cd /your path/news-app-crawler/release/bin && sh crawler.hotquery.sh > crawler.log
服务端web(nodejs):
- 创建node项目，node app.js启动web服务，在浏览器中打开 http://localhost:3000 查看结果。
- node连接数据库配置见代码 。
- 部署代码到服务器，根据前面配置好域名和nginx，可以在浏览器打开 http://hotquery.lbsso.com/ 获取json格式热词列表。
注意:mysql连接有时间限制，当连接超过一定时间没有活动后，会自动关闭该连接，因此需要加上重连机制。另外时区设置为UTC，否则获得的时间有偏差。
客户端app(react native):
- 环境准备可以直接参考facebook的文档 react-native ，很详细。主要是ios要确保xcode8以上版本，android确保java8及android 6.0 sdk。
- 创建react项目：react-native init AwesomeProject
- 运行ios项目：react-native run-ios
- 运行android项目：react-native run-android
- 获取web接口热词并展现，参见代码
- 最终热词列表及点击结果如下：