使用Google cloud虛擬機上部署flask編寫的網站

背景

我們幾個本科生在20年秋季學期選擇了一個關於追蹤COVID19情況（澳洲）的項目；目前網頁結構已經完成，就差將其部署到服務器上了，因爲我的賬戶裏面還有$400的免費積分所以小組的組長決定把這個任務交給我。我今天的時候，用通過文中方法成功部署到服務器上，因此我在這裏趁熱打鐵，和大家分享一下，如何使用Google Cloud，將網站部署到服務器上~

Why google cloud

google cloud在新用戶註冊的時候，如果綁定信用卡，會給你$440的免費積分。你用這些錢在Google cloud裏面做任何事情~
由於我創建的是單cpu虛擬機，運行起來，$0.034/小時；便宜的價格，非常適合課程的展示
但是，由於綁定的是信用卡，創建的虛擬機，一定要記得關閉，否則會持續扣費！！

項目需求

一個域名：www.your_domain（我們使用的是騰訊的），github repo(包含網頁的全部代碼)，Google Cloud，Gunicorn應用程序服務器和 Nginx前端反向代理
語言：Python3
環境：Ubuntu18.04

Google cloud的初始化:

進入cloud：

在google搜索引擎中所有Google cloud–點擊第一個鏈接–菜單–Compute Engine– VM instances

點擊創建一個虛擬機：

接下來會進入這樣的頁面：左上角會顯示金額（如無特殊需求，選擇最低資費即可）
系統的話，選擇linux系統都可以，但是我使用的是ubuntu,所以建議也使用ubuntu

選中Allow HTTP traffic 和Allow HTTPS traffic
展開Management, security, disks, networking, sole tenancy
勾選刪除保護（保護存入到虛擬機的文件，默認爲刪除！！如果不選，刪除之後文件就會消失）

設置靜止external IP地址

菜單–VPC network–External IP address

將剛剛初始化過的虛擬機external 地址設置爲static，這樣就會擁有固定的external IP地址啦~

設置防火牆

避免使用瀏覽器訪問不了網址,而出現的尷尬情況…

創建一個新的“firewall rules”，並如下圖設置"rules"
注意tcp這裏可以根據自己情況填寫，本教程使用的接口爲5000

打開虛擬機

虛擬機在google cloud裏面是沒有用戶界面的，因此，需要我們通過SSH（bash）對其進行操作。
注意：創建時，虛擬機爲啓動狀態；在不用的時候一定要！一定要！一定要關閉虛擬機！！
我有一個韓國的同學，因爲3周沒有關閉虛擬機（GPU版），被google 划走信用卡800美元!所以同學關閉網頁之前，一定要再三確定，虛擬機已經關閉，避免不愉快的things發生~

開啓虛擬機後，會像上圖中”dashboard“一樣，出現一個綠色的”對號“，遇到那個對號要警覺！！
接下來就是打開虛擬機的shell/bash啦，點擊SSH,會自動彈出~

在虛擬機（Linux）中下載、安裝Nginx

安裝 Nginx

sudo apt update
sudo apt install nginx

測試防火牆

sudo ufw app list

會輸出：

Available applications:
  Nginx Full
  Nginx HTTP
  Nginx HTTPS
  OpenSSH

sudo ufw allow 'Nginx HTTP'

檢查瀏覽器

systemctl status nginx

會輸出

● nginx.service - A high performance web server and a reverse proxy server
   Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
   Active: active (running) since Fri 2018-04-20 16:08:19 UTC; 3 days ago
     Docs: man:nginx(8)
 Main PID: 2369 (nginx)
    Tasks: 2 (limit: 1153)
   CGroup: /system.slice/nginx.service
           ├─2369 nginx: master process /usr/sbin/nginx -g daemon on; master_process on;
           └─2380 nginx: worker process

一切準備就緒，開始部署

安裝python3，以及相關組件(pip)

sudo apt update
sudo apt install python3-pip python3-dev build-essential libssl-dev libffi-dev python3-setuptools
sudo apt install python3-pip

創建Python3的虛擬環境

sudo apt install python3-venv

上傳文件

這裏我們選擇先將文件上傳到github repo，再使用git指令從倉庫中提取~

sudo apt install git
git clone "github的http鏈接"

更改文件夾(文件)名稱爲"myproject"

爲了方便後續代碼的展示，這裏建議更改文件名稱爲myproject
將文件file1 改爲 myproject

mv file1 myproject

創建一個虛擬的環境

python3. 7-m venv myprojectenv

激活虛擬環境

source myprojectenv/bin/activate

格式類似：

(myprojectenv)user@host:~/myproject$

設置Flask應用程序

下載wheel 和gunicorn

pip install wheel
pip install gunicorn flask

建議將文件下的app文件名稱重新使用mv file1 myproject來命名，使這裏命名保持一致。

修改flask文件的內容

nano 爲修改指令，運行及打開一個編輯器，關閉使用Ctrl+W然後選擇Y以確定更改文件的內容

nano ~/myproject/myproject.py

下面代碼爲需要對代碼略作修改的地方：host需要替換爲虛擬機的internal IP（可在VM instance中找到）

if __name__ == "__main__":
    app.run(host='我的Internal IP',port = '5000')

UFW防火牆端口啓用

啓用5000爲文本訪問端口

sudo ufw allow 5000

測試打開網頁

python myproject.py

如出現庫沒有安裝的情況，請使用pip指令在bash中一一安裝~

Output
* Serving Flask app "myproject" (lazy loading)
 * Environment: production
   WARNING: Do not use the development server in a production environment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://your_Internal_IP:5000/ (Press CTRL+C to quit)

接下來，就是在瀏覽器中搜索：http://your_external_IP:5000

運行之後使用CTRL-C結束運行

警告：如出現Error,請解決之後再進行下一步！否則後面的操作將無效！

創建WSGI入口點

nano ~/myproject/wsgi.py

編輯wsgi文件—從"myproject"中引入server(flask),並運行

from myproject import server

if __name__ == "__main__":
    server.run()

配置Gunicorn

cd ~/myproject
gunicorn --bind your_Internal_IP:5000 wsgi:server


Output
[2018-07-13 19:35:13 +0000] [28217] [INFO] Starting gunicorn 19.9.0
[2018-07-13 19:35:13 +0000] [28217] [INFO] Listening at: http://0.0.0.0:5000 (28217)
[2018-07-13 19:35:13 +0000] [28217] [INFO] Using worker: sync
[2018-07-13 19:35:13 +0000] [28220] [INFO] Booting worker with pid: 28220

同樣，在瀏覽器中搜索：
http://your_external_IP:5000
警告：如果遇到bug,解決了再進入下一步！

退出虛擬Python環境

deactivate

創建一個.service在/etc/systemd/system

sudo nano /etc/systemd/system/myproject.service

將所有的user（YOUR_USER_NAME）更改爲你google cloud的用戶名~
然後複製粘貼下面的代碼到nano編輯器中~

[Unit]
Description=Gunicorn instance to serve myproject
After=network.target

[Service]
User=YOUR_USER_NAME
Group=www-data
WorkingDirectory=/home/YOUR_USER_NAME/myproject
Environment="PATH=/home/YOUR_USER_NAME/myproject/myprojectenv/bin"
ExecStart=/home/YOUR_USER_NAME/myproject/myprojectenv/bin/gunicorn --workers 3 --bind unix:myproject.sock -m 007 wsgi:server

[Install]
WantedBy=multi-user.target

創建並啓用Gunicorn

sudo systemctl start myproject
sudo systemctl enable myproject

檢查狀態

sudo systemctl status myproject

Output
● myproject.service - Gunicorn instance to serve myproject
   Loaded: loaded (/etc/systemd/system/myproject.service; enabled; vendor preset: enabled)
   Active: active (running) since Fri 2018-07-13 14:28:39 UTC; 46s ago
 Main PID: 28232 (gunicorn)
    Tasks: 4 (limit: 1153)
   CGroup: /system.slice/myproject.service
           ├─28232 /home/sammy/myproject/myprojectenv/bin/python3.6 /home/sammy/myproject/myprojectenv/bin/gunicorn --workers 3 --bind unix:myproject.sock -m 007
           ├─28250 /home/sammy/myproject/myprojectenv/bin/python3.6 /home/sammy/myproject/myprojectenv/bin/gunicorn --workers 3 --bind unix:myproject.sock -m 007
           ├─28251 /home/sammy/myproject/myprojectenv/bin/python3.6 /home/sammy/myproject/myprojectenv/bin/gunicorn --workers 3 --bind unix:myproject.sock -m 007
           └─28252 /home/sammy/myproject/myprojectenv/bin/python3.6 /home/sammy/myproject/myprojectenv/bin/gunicorn --workers 3 --bind unix:myproject.sock -m 007

配置Nginx代理請求

sudo nano /etc/nginx/sites-available/myproject

###填寫域名
your_domain爲你自己的域名（形式：google.com）
記得更換YOUR_USER_NAME哦！

server {
    listen 80;
    server_name your_domain www.your_domain;

    location / {
        include proxy_params;
        proxy_pass http://unix:/home/YOUR_USER_NAME/myproject/myproject.sock;
    }
}

要啓用Nginx服務器塊配置，請將文件鏈接到sites-enabled目錄下

sudo ln -s /etc/nginx/sites-available/myproject /etc/nginx/sites-enabled

檢查語法錯誤

sudo nginx -t

如果返回結果沒有指示任何問題，請重新啓動Nginx進程以讀取新配置：

sudo systemctl restart nginx

sudo ufw delete allow 5000
sudo ufw allow 'Nginx Full'

激動人心的時刻到啦！現在！你應該可以通過瀏覽器，訪問您的網站了哦！http://your_domain
謝謝您的耐心瀏覽！
記得關注，收藏哦！~

使用google cloud部署基於flask的網站