10RMB/月不到部署FLASK網站專案（flask+gunicorn+nginx）

傑柯發表於2020-10-22
Flask網站Nginx

目錄

FLASK專案部署

一、本地寫好一個小專案

（一）專案結構

My_website
┣━ HelloWorld
┃ ┣━ blueprints
┃ ┃ ┗━ main.py
┃ ┣━ static
┃ ┃ ┗━ css
┃ ┃ ┗━ style.css
┃ ┣━ templates
┃ ┃ ┗━ index.html
┃ ┗━ __init__.py
┣━ run.py
┗━ .flaskenv

粗體資料夾，細體是檔案目錄

（二）程式碼部分

  1. __init__py
# __ini__.py
from flask import Flask
from HelloWorld.blueprints.main import main_bp


def create_app():
    app = Flask('HelloWorld')
    app.register_blueprint(main_bp)

    return app
  1. main.py
# main.py
from flask import Blueprint, render_template

main_bp = Blueprint('main', __name__)


@main_bp.route('/')
def index():
    return render_template('index.html')
  1. run.py
# run.py
from HelloWorld import create_app

app = create_app()
  1. style.css
/* style.css */
*{
    margin: 0;
    padding: 0;
}

body{
    padding-top: 20%;
    background-color: #50514f;
    display: flex;
    flex-direction: column;
    align-items: center;
}

p.china{
    margin-top: 30px;
    color: white;
    font-family: 黑體;
    font-size: 1.5rem;
    font-weight: lighter;
}
p.english{
    font-size: 1.2rem;
    font-weight: bold;
    font-family: 微軟雅黑;
    color: #70c1b3;
}
  1. index.html
{# index.html #}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>你好世界</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
<p class="china">你好，你已經部署成功！</p>
<p class="english">Wow , congratulation , it work !</p>
<p class="china">完善屬於你自己的網站吧！</p>
<p class="english">Next , complete your own site as you like !</p>
<p class="china">希望能留下你的心得收穫！</p>
<p class="english">Hope to leave your happy expression !</p>



</body>
</html>

（三）生成requirement.txt檔案

$ pip install pipreqs

# 進入專案目錄
$ cd My_website
$ pipreqs ./

由於專案比較小，所以最終生成的requirment.txt檔案只包含FLask庫
所以在後續開發過程中，如果引進了新的第三方庫，也需要更新這個檔案

（四）程式碼提交到github倉庫，便於遠端主機獲取專案檔案

二、騰訊雲租用伺服器

（一）租用伺服器

騰訊雲 - 產業智變 雲啟未來

如果你是學生，或者低於25歲，即可享受校園雲伺服器優惠政策，一個月只需10元左右，需要實名認證，不用稽核，都是秒認證的。

學生雲伺服器_學生雲主機_學生雲資料庫_雲+校園特惠套餐 - 騰訊雲
優惠政策
在這裡插入圖片描述

選擇第二個稍微比第二個好一點。點選購買

在這裡插入圖片描述

活動地區選什麼都ok，映象後面可以換，我加1塊錢買了域名，超值。

（二）重置伺服器

  1. 進入控制檯
    在這裡插入圖片描述

  2. 進入該伺服器
    在這裡插入圖片描述

  3. 選擇合適的系統
    在這裡插入圖片描述

  4. 這裡我們使用Ubuntu 18.04.1LTS
    在這裡插入圖片描述

  5. 點選重置密碼
    在這裡插入圖片描述
    在這裡插入圖片描述

    使用者名稱系統預設或者自定義都行，這裡用系統預設

     ![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20201022210421720.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pwanpjaA==,size_16,color_FFFFFF,t_70#pic_center)

    重置例項密碼完成後頁面會重新整理一下，接下來就是搭建網站了

（三）域名解析

在這裡插入圖片描述
在這裡插入圖片描述
在這裡插入圖片描述
在這裡插入圖片描述

需要實名認證，這次需要身份證的照片，只有認證了才可以域名解析
不過我們可以先新增記錄

新增記錄
在這裡插入圖片描述

點選 “解析”
點選 “新增記錄”

在這裡插入圖片描述
在這裡插入圖片描述

兩條記錄不同的是，如果你想訪問你的網站，可以通過輸入兩個網址
第一張圖是：www.zpjcmm.design
第二張圖是：zpjcmm.design

在這裡插入圖片描述

儲存完可以看到，兩條記錄，就等著實名認證可以之後，再用域名訪問，我們可以先用ip地址訪問我們的網址

（四）防火牆新增規則

在這裡插入圖片描述
在這裡插入圖片描述
在這裡插入圖片描述

三、伺服器搭建網站

（一）用Xsell7連線伺服器

  1. 新建會話
    在這裡插入圖片描述

  2. 輸入名稱和主機地址（也就是伺服器公網ip地址）
    在這裡插入圖片描述
    在這裡插入圖片描述

  3. 輸入使用者名稱和密碼
    在這裡插入圖片描述
    在這裡插入圖片描述

    這裡的使用者名稱就是在上面重置伺服器後用的使用者名稱，如果是系統預設就ubuntu，如果是自定義，就要用自定義的使用者名稱

（二）更新系統可安裝的包列表

$ sudo apt update
$ sudo apt upgrade

一路回車

（三）新增root密碼（可選）

# 新增root管理
$ sudo passwd
Enter new UNIX password:
Retype new UNIX password:
passwd: password updated successfully

（四）安裝虛擬環境並配置好程式且安裝需要的第三庫檔案

  1. 安裝pip
$ sudo apt install python3-pip
  1. 安裝和配置虛擬環境
# 安裝虛擬環境
$ sudo pip3 install virtualenv

# 安裝虛擬環境擴充包
$ sudo pip3 install virtualenvwrapper

$ nano ~/.bashrc

# .bashrc
export WORKON_HOME=$HOME/.virtualenvs
export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3
source /usr/local/bin/virtualenvwrapper.sh

儲存檔案
ctrl + o ：編輯完成
回車：檔名確認
ctrl + x：退出編su

  1. 建立虛擬環境
$ mkdir virtualenvs
$ cd virtualenvs
$ virtualenv helloworld
  1. 克隆專案到伺服器
(hell..)$ cd ..
(hell..)$ git clone https://github.com/zpj995380228/helloworld.git
  1. 安裝所需的第三方庫
(hell..)$ cd helloworld/
(hell..)$ pip install -r requirement

（五）設定防火牆（可選）

(hell..)(root)$ ufw allow 22
(hell..)(root)$ ufw allow 80
(hell..)(root)$ ufw allow 8000 
(hell..)(root)$ ufw enable

檢視防火牆狀態

(hell..)(root)$ ufw status

在這裡插入圖片描述

（六）使用Gunicorn執行程式

  1. 安裝gunicorn
(hell..)$ pip install gunicorn
  1. 執行程式
(hell..)$ guniicorn -w 4 -b 0.0.0.0:8000 run:app

（七）訪問伺服器

使用手機或者可以上網的電腦訪問你的遠端主機的IP地址的8000埠
比如我的就是：106.52.12.24:8000（記得冒號是英文輸入狀態下的冒號）
在這裡插入圖片描述

（八）使用nginx提供反向代理

(hell..)$ sudo apt install nginx

(hell..)$ sudo rm /etc/nginx/site-enabled/default
(hell..)$ sudo nano /etc/nginx/site-enabled/helloworld

# helloworld
server{
    listen 80 default_server;
    server_name _;
    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;
    location / {
        proxy_pass http://127.0.0.1:8000;
        proxy_redirect off;
        proxy_set_header Host              $host;
        proxy_set_header X-Real-IP         $remote_addr;
        proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
    location /static {
    alias /home/ubuntu/helloworld/HelloWorld/static/ ;
    expires 30d;
    }
}

執行程式

(hell..)$ gunicorn -w 4 run:app
[2020-10-22 07:12:26 +0800] [9935] [INFO] Starting gunicorn 20.0.4
[2020-10-22 07:12:26 +0800] [9935] [INFO] Listening at: http://127.0.0.1:8000 (9935)
[2020-10-22 07:12:26 +0800] [9935] [INFO] Using worker: sync
[2020-10-22 07:12:26 +0800] [9938] [INFO] Booting worker with pid: 9938
[2020-10-22 07:12:26 +0800] [9939] [INFO] Booting worker with pid: 9939
[2020-10-22 07:12:26 +0800] [9941] [INFO] Booting worker with pid: 9941
[2020-10-22 07:12:26 +0800] [9943] [INFO] Booting worker with pid: 9943

直接訪問ip地址

在這裡插入圖片描述

style.css被禁止，檢視nginx錯誤日誌

(hell..)$ nano /var/log/nginx/error.log

2020/10/22 07:12:32 [error] 9670#9670: *6 open() "/home/ubuntu/helloworld/HelloWorld/static//css/style.css" failed (13: Permission denied), cli$
2020/10/22 07:12:39 [error] 9670#9670: *6 open() "/home/ubuntu/helloworld/HelloWorld/static//css/style.css" failed (13: Permission denied), cli$
2020/10/22 07:17:32 [error] 9670#9670: *10 open() "/home/ubuntu/helloworld/HelloWorld/static//css/style.css" failed (13: Permission denied), cl$
2020/10/22 07:17:43 [error] 9670#9670: *10 open() "/home/ubuntu/helloworld/HelloWorld/static//css/style.css" failed (13: Permission denied), cl$

許可權問題，修改nginx的許可權就可以了

(hell..)$ nano /etc/nginx/nginx.conf

user www-data; 刪除這一行 
user root;     換成這一行
...

再執行程式

(hell..)$ sudo service nginx restart
(hell..)$ gunicorn -w 4 run:app
[2020-10-22 07:28:31 +0800] [12285] [INFO] Starting gunicorn 20.0.4
[2020-10-22 07:28:31 +0800] [12285] [INFO] Listening at: http://127.0.0.1:8000 (12285)
[2020-10-22 07:28:31 +0800] [12285] [INFO] Using worker: sync
[2020-10-22 07:28:31 +0800] [12288] [INFO] Booting worker with pid: 12288
[2020-10-22 07:28:31 +0800] [12290] [INFO] Booting worker with pid: 12290
[2020-10-22 07:28:31 +0800] [12292] [INFO] Booting worker with pid: 12292
[2020-10-22 07:28:31 +0800] [12293] [INFO] Booting worker with pid: 12293

在這裡插入圖片描述

（九）使用supervisor管理程式實現自動後臺執行

(hell..)$ sudo apt install supervisor
(hell..)$ sudo nano /etc/supervisor/conf.d/helloworld.conf

[program:helloworld]
command=/home/ubuntu/.virtualenvs/helloworld/bin/gunicorn -w 4 run:app
directory=/home/ubuntu/helloworld
user=root
autostart=true
autorestart=true
stopasgroup=true
killasgroup=true

(hell..)$ sudo service supervisor restart 
(hell..)$ sudo supervisorctl 
helloworld                       RUNNING   pid 16517, uptime 0:00:08
supervisor>

在這裡插入圖片描述

相關文章