如何在Azure上佈署一個數據可視化網頁(2019-nCov)

簡介

很久沒有更新這個網誌了，所以藉著之前在家抗疫的日子建立了一個簡單的數據可視化程式，現在這個網站現在在Azure 中的一台VM中運行。該網站的代碼已放置在我的Github中，我把它分為API 和前端網頁兩個Repository。以下是它們Repository的網址

1.https://github.com/Isaac234517/ncov-web-api
2. https://github.com/Isaac234517/infection

而本項目的網址是 http://13.76.99.126/static/index.html
下圖是效果圖

這個可視化項目分為主頁及地圖，主頁中會顯示你所選擇的地區的確診人數的趨勢圖及每日新增的趨勢圖。而另外一頁是以數據地圖形式顯示世界各國的確診人數。
本項目的數據來自github上的https://github.com/BlankerL/DXY-COVID-19-Data 項目。本文章是在2019/04/13號草擬，所以上圖的數據是4月13日當天的某個時間。

架構

我把本項目佈署到azure 的VM上，由於項目的數據來自DXY-COVID-19-Data 項目。我使用的是該項目當中的json 格式數據，為確保數據能時常保持與DXY-COVID-19-Data 項目的數據同步所以在VM上我寫了一個cronjob 會每小時都會git pull 一次，整個項目的數據會每小時更新一次。另外這個項目採用Python 的Flask 開發，頁面則時純靜態頁面。下圖是本項目的架構圖;

此項目運行在Azure Platform 上的Linux VM中。如上圖所示，網頁的Http Request 通過Nginx 處理，數據存取則透過頁面調用 Flask 的API 存取位於VM 上的JSON File JSON File 則透過系統的Cron job 每小時使用Git pull 更新。

涉及的工具、所使用的第三方程式庫或Framework

1. Azure Platform
2. Nginx,
3. Python
4. Flask Web framework
5. git
6. Jquery , Bootstrap, EChart, Chosen.Jquery

在Azure 上架設本項目

接下來會介紹如何在Azure 的VM 上架設本網站，首先大家需要開設一個Azure Account。

由於項目是實驗性質，所以我會開設的VM 是這種

其餘磁碟及網絡則按照自己的需要選擇。
切記要令互聯網能存取你的VM的話，需要設置能使用http 80 port 連接你的VM 設置的位置如下圖

設置好後，便可打開Terminal ，輸入ssh username@vm_ip 連接你的VM

設置Flask Web API

1. 在VM 中輸入以下指令安裝 python pip 及flask
sudo apt-get update
sudo apt install python3.6
sudo apt install python3-pip
pip3 install flask
pip3 install flask-cors
2. 完成安裝後安裝 git
sudo apt install git
3. 安裝完成後使用git clone 下載 DXY-COVID-19-Data 到VM中

4. 下載後前往DXY-COID-19下的JSON Folder，下圖中紅圈標示的json 檔案是本項目會用到的數據檔案。

5. 由於數據是需要定時更新，所以編寫了以下bash script

其中 cd "XX" 中的是DXY-COVID-19-Data 的資料夾路徑。需要按照你的擺放位置更改。

6. 之後使用linux 的crontab 功能設置定時運行上面的bash script 我把它命為repository_update.sh 並且而放在ncov-web-api repository 下。在terminal 中輸入crontab -e

之後輸入上圖中的0 * * * * XXX XXX 是檔案路徑如上圖我的bash script 路徑是/home/Isaac/repository_update.sh 輸入後存檔退出。

7. 使用crontab -l 檢查是否已正確設置

現在，系統會每小時便運行git pull 更新DXY-COVID-19-Data

8. 使用git clone 下載ncov-web-api repository

9. 之後前往ncov-web-api資料夾下輸入mkdir json_data 建立json_data

10. 建立json_data資料夾後，在json_datat 資料夾下建立4條symbolic link 指向剛才提及的4個json 檔案。

ln -s /home/Isaac/github/DXY-COVID-19-Data/json/DXYArea-TimeSeries.json DXYArea-TimeSeries.json

ln -s /home/Isaac/github/DXY-COVID-19-Data/json/DXYArea.json DXYArea.json

ln -s home/Isaac/github/DXY-COVID-19-Data/json/DXYOverall-TimeSeries.json DXYOverall-TimeSeries.json

ln -s /home/Isaac/github/DXY-COVID-19-Data/json/DXYOverall.json DXYOverall.json

指令中有顏色標示的是json 檔案的路徑。

11. 完成上面所有步驟後，便可以開始設置網頁。

設置Web Page

本項的web page 是一個靚態網頁， render 是通過使用web api拿取數據實現的。

1. git clone infection 項目

2. 前往ncov-web-api 資料夾下建立symbolic link

ln -s /home/Isaac/github/infection/ static

指令中有顏色標示的是infection 項目的目錄。在flask web framework下 static 目錄下的案案會被視為靜態檔案在http request 中以靚態方式呈現 (https://flask.palletsprojects.com/en/1.1.x/quickstart/#static-files)

3. Web Page 及Web Api 的設置已完成，現在可以開始最後的步驟，設置nginx 伺服器。