開發(fā)環(huán)境:
OS:MacOS
python --version:3.6.4
Node --version :v9.6.1
flask --version :0.12.2
create-react-app --version :1.5.2

一、搭建后臺(tái)

1.安裝Flask

pip3 install flask

2.安裝virtualenv

virtualenv是一個(gè)用于創(chuàng)建虛擬環(huán)境的腳本。可以讓不同的項(xiàng)目使用自己的一套環(huán)境，避免項(xiàng)目間的沖突或者與本地環(huán)境的沖突。
使用
pip3 install virtualenv
然后創(chuàng)建虛擬環(huán)境
cd /var/www/WebSite
virtualenv venv #創(chuàng)建虛擬環(huán)境
source venv/bin/activate #運(yùn)行虛擬環(huán)境
此時(shí)命令提示符變了，有個(gè)(venv)前綴，表示當(dāng)前環(huán)境是一個(gè)名為venv的Python環(huán)境
然后正常安裝各種包，在venv環(huán)境下，用pip安裝的包都被安裝到venv這個(gè)環(huán)境下，系統(tǒng)Python環(huán)境不受任何影響。
使用deactivate命令可以退出當(dāng)前環(huán)境。
在venv環(huán)境下，可以使用pip3 freeze > requirements.txt導(dǎo)出當(dāng)前venv環(huán)境中所用到的python第三方庫(kù)。
在部署到服務(wù)器的過程中，在服務(wù)器端運(yùn)行pip3 install -r requirements.txt，可以直接安裝項(xiàng)目所需庫(kù)。

3.創(chuàng)建后臺(tái)文件

創(chuàng)建一個(gè)python文件hello.py作為項(xiàng)目的入口文件

from backend import creat_app

app = creat_app()

if __name__ == "__main__":
    app.run(host='0.0.0.0', port=8080)

然后創(chuàng)建一個(gè)目錄為backend做為項(xiàng)目后臺(tái)
在backend中創(chuàng)建一個(gè)__init__.py

from flask import Flask,render_template,g,session
from flask_cors import CORS
def creat_app():
    app = Flask(__name__,template_folder="templates",static_folder="static",static_url_path="/backend/static")
    #防止跨域攻擊
    CORS(app)
    #注冊(cè)藍(lán)圖
    from . import main
    app.register_blueprint(main.main)
    app.config['SECRET_KEY'] = '...自己生成的秘鑰'
    app.debug = True
    db.init_app(app)
    return app

然后創(chuàng)建templates和static目錄用于存放渲染模板和其他靜態(tài)文件。
創(chuàng)建一個(gè)main模塊
在其__init__.py中寫入

from flask import render_template
from flask import Blueprint
from flask import url_for

main = Blueprint('main', __name__, template_folder='templates', static_folder='static', static_url_path="/static")

@main.route('/', defaults={'path': ''})
@main.route('/<path:path>')
def index(path):
  return render_template('index.html')

此時(shí)項(xiàng)目的目錄如下

WebSite
├──hello.py
└──backend
    ├── __init__.py
    ├── main
    │   └── __init__.py
    ├── static
    └── templates

二、搭建前臺(tái)

1.init

創(chuàng)建React項(xiàng)目時(shí)。使用Facebook 提供的 creat react app 庫(kù)進(jìn)行創(chuàng)建。這個(gè)庫(kù)為我們封裝好了打包還有開發(fā)時(shí)要用到的基本庫(kù)。
npm install -g create-react-app
create-react-app frontend
創(chuàng)建后目錄結(jié)構(gòu)如下

frontend
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── registerServiceWorker.js

package.json中為以下內(nèi)容

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

發(fā)現(xiàn)package.json中沒有webpack這樣的打包工具。
其實(shí)webpack已經(jīng)安裝在node_modules中，打包的工作現(xiàn)在全都通過scripts中build來完成。webpack配置文件在 node_modules中的react-scripts庫(kù)內(nèi)。已經(jīng)幫我們完成了封裝。
package.json中的許多應(yīng)用庫(kù)都已經(jīng)封裝在了react-scripts庫(kù)中。如果要查看，可以運(yùn)行npm run eject來還原到package.json中。但是注意這個(gè)步揍是不可逆的。正常條件下幫我們封裝的程序就足夠我們打包調(diào)試和正常的開發(fā)。

可以通過 npm run +scripts中的指令來運(yùn)行scrips中的腳本。
npm run start會(huì)運(yùn)行一個(gè)本地的server用于調(diào)試代碼。

三、在Flask后臺(tái)中運(yùn)行前臺(tái)程序

1.build目錄

npm run build會(huì)在frontend目錄下創(chuàng)建一個(gè)build目錄。然后將react程序用到的資源以及打包壓縮過的js、css文件放入其中。

build
├── asset-manifest.json
├── favicon.ico
├── index.html
├── manifest.json
├── service-worker.js
└── static
    ├── css
    │   ├── main.c17080f1.css
    │   └── main.c17080f1.css.map
    ├── js
    │   ├── main.61911c33.js
    │   └── main.61911c33.js.map
    └── media
        └── logo.5d5d9eef.svg

瀏覽器中，如果文件名不發(fā)生變化，可能會(huì)導(dǎo)致不更新此文件而是使用本地的緩存文件。react-script的build腳本幫助我們解決了這個(gè)問題。
static目錄下的文件后面都有一串hash值。這個(gè)值是通過對(duì)文件進(jìn)行md5后取了其中一段作為文件名字的。這樣做只要文件發(fā)生變化。hash值也會(huì)發(fā)生變化。這樣保證了文件有所更新后。build出來的文件的名字也會(huì)變化。

2.配置到服務(wù)器

雖然build文件已經(jīng)生成。但是生成的路徑是在frontend目錄下。而要Flask后臺(tái)上運(yùn)行，需要把build中的入口文件index.html移動(dòng)到backend的template目錄下。而其他的js、css、圖片等則要移動(dòng)到backend中的static目錄下方便外部訪問。
所以我們要在npm run build的前后加入一些命令或者腳本，移動(dòng)文件到backend下的目錄。
移動(dòng)好后，項(xiàng)目結(jié)構(gòu)大致如下

WebSite
├──hello.py
├──frontend
│   └── ...
└──backend
    ├── __init__.py
    ├── main
    │   └── __init__.py
    ├── static
    │   └── build
    │       ├── asset-manifest.json
    │       ├── favicon.ico
    │       ├── manifest.json
    │       ├── service-worker.js
    │       └── static
    │           ├── css
    │           │   ├── main.c17080f1.css
    │           │   └── main.c17080f1.css.map
    │           ├── js
    │           │   ├── main.040641a3.js
    │           │   └── main.040641a3.js.map
    │           └── media
    │               ├── 1.0ebbf763.jpg
    │               └── logo.5d5d9eef.svg
    └── templates
        └── index.html

編輯package.json,在script中加入鉤子

"prebuild":"rm -rf ../backend/templates/index.html && rm -rf ../backend/static/build",
"postbuild": "mv build/index.html ../backend/templates/ &&  mv build ../backend/static/", 

作用分別為在build前后執(zhí)行一些shell命令
具體可以看一下Blog中的介紹
http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html
這樣。我們運(yùn)行npm run build后。生成的文件就已經(jīng)放入到了backend中。

但是此時(shí)運(yùn)行python hello.py會(huì)發(fā)現(xiàn)。打開的網(wǎng)頁(yè)是空白。查看templates下的index.html會(huì)發(fā)現(xiàn)，其中引用的文件的鏈接地址不正確

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="/build/manifest.json">
    <link rel="shortcut icon" href="/build/favicon.ico">
    <title>My Web</title>
    <link href="/build/static/css/main.c17080f1.css" rel="stylesheet">
</head>

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script type="text/javascript" src="/build/static/js/main.040641a3.js"></script>
</body>
</html>

基于我們上面服務(wù)器的配置，

app = Flask(__name__,template_folder="templates",static_folder="static",static_url_path="/backend/static")

我們staic文件的路徑應(yīng)該是/backend/static/...上面的js路徑應(yīng)該為
/backend/static/build/static/js/main.040641a3.js時(shí)，才能訪問到此文件。
我們可以在package.json中指定homepage參數(shù)來指定生成文件的主頁(yè)路徑。
在package.json中添加

  "homepage": "/backend/static/build"

此時(shí)的package.json如下

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "react-scripts": "1.1.4",
  },
  "scripts": {
    "start": "react-scripts start",
    "prebuild":"rm -rf ../backend/templates/index.html && rm -rf ../backend/static/build",
    "build": "react-scripts build",
    "postbuild": "mv build/index.html ../backend/templates/ &&  mv build ../backend/static/", 
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "homepage": "/backend/static/build"
}

然后重新npm run build。再運(yùn)行python hello.py頁(yè)面就可以正常顯示了。

實(shí)際上我們運(yùn)行npm run build的時(shí)候使用的是frontend/pubilc目錄下的文件做模板的。生成的index.html也是按照public下的index.html生成的。如果我們要改后端static文件下build文件的結(jié)構(gòu)。需要同時(shí)修改public中的index.html文件。使其生成的入口文件中的靜態(tài)文件地址能被找到。
修改favicon.icon 可以改變文件標(biāo)簽上的圖標(biāo)。
而manifest.json文件是控制將站點(diǎn)添加至主屏幕時(shí)的一些配置的。可以參照一下文章
https://lavas.baidu.com/mip/doc/engage-retain-users/add-to-home-screen/introduction

至此。react+flask 開發(fā)網(wǎng)頁(yè)的基本框架就完成了。