新聞熱詞:從爬蟲到react native應用

背景

1. 因爲只想瞭解當天新增的top熱詞，減小過多信息干擾，打算作一款app實現這個功能。
2. 架構： 熱詞抓取 -> mysql <=> nodejs <=> nginx <=> react native應用

軟件安裝：

從阿里雲申請的CentOS7.4裸機，所以軟件安裝列表以下：

1. jdk： yum install java-1.7.0-openjdk-devel
2. maven： wget apache-maven-3.3.9-bin.tar.gz && add to /etc/profile && source
   
3. ssh免密登陸：scp ~/.ssh/id_rsa.pub root@阿里雲服務器ip:~/.ssh/authorized_keys
4. nodejs： sudo yum -y install npm && sudo npm install -g n && sudo n 9.4.0
5. 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
6. 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):

1. 數據來源: 百度熱詞榜、 神馬熱詞榜、搜狗實時熱詞榜、搜狗微信熱詞榜
2. 數據處理: 解析使用jsoup(java的HTML解析器),數據存儲使用mysql. 具體可參見代碼
3. crontab定時job: 設置/var/spool/cron/下的配置文件,每15分鐘抓取一次熱詞:
   15 * * * * cd /your path/news-app-crawler/release/bin && sh crawler.hotquery.sh > crawler.log

服務端web(nodejs):

1. 建立node項目，node app.js啓動web服務，在瀏覽器中打開 http://localhost:3000 查看結果。
2. node鏈接數據庫配置見代碼 。
   
3. 部署代碼到服務器，根據前面配置好域名和nginx，能夠在瀏覽器打開 http://hotquery.lbsso.com/ 獲取json格式熱詞列表。

注意:mysql鏈接有時間限制，當鏈接超過必定時間沒有活動後，會自動關閉該鏈接，所以須要加上重連機制。另外時區設置爲UTC，不然得到的時間有誤差。

客戶端app(react native):

1. 環境準備能夠直接參考facebook的文檔 react-native ，很詳細。主要是ios要確保xcode8以上版本，android確保java8及android 6.0 sdk。
   
2. 建立react項目：react-native init AwesomeProject
   
3. 運行ios項目：react-native run-ios
   
4. 運行android項目：react-native run-android
5. 獲取web接口熱詞並展示，參見代碼
6. 最終熱詞列表及點擊結果以下：
   

轉自我的博客：http://www.lihonghong.me/app/crawler-to-react/