# flask-react

**Repository Path**: zhangguolin333/flask-react

## Basic Information

- **Project Name**: flask-react
- **Description**: flask react MongoDB
- **Primary Language**: Python
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2022-11-02
- **Last Updated**: 2024-12-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#先安装node.js
#使用npm命令安装cnpm

npm install cnpm -g --registry=https://registry.npm.taobao.org

#使用cnmp 安装webpack

#初始化npm

C:\Users\HX\PycharmProjects\flask-react\static\js>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (js) index
version: (1.0.0)
description:
entry point: (webpack.config.js) index.js
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to C:\Users\HX\PycharmProjects\flask-react\static\js\package.json:

{
  "name": "index",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

#然后安装React
cnpm install react --save

#安装jsx-loader
cnpm install jsx-loader --save-dev

#启动MongoDB
cd C:\Program Files\MongoDB\Server\3.2\bin

C:\Program Files\MongoDB\Server\3.2\bin>mongod.exe --dbpath C:\mongodb\data\db

#Flask-SocketIO
http://flask-socketio.readthedocs.io/en/latest/
pip install flask-socketio


# users = set()

# @sockets.route('/echo/<device_id>')
# def echo_socket(ws, device_id):
#     users.add(ws)
#     while not ws.closed:
#         msg = ws.receive()
#         if msg is not None:
#             for u in users:
#                 print(type(u))
#                 u.send(msg)
#                 print(u, msg)
#         else:
#             break
#
#         # print(device_id)
#         # message = ws.receive()
#         # print("ws.receive: "+message)
#         # ws.send(message)

安装mongodb

sudo apt-get install mongodb-server

# nginx 配置
server {
	listen 80;
	location /static {
		alias /home/ubuntu/flask-react/static;
	}
	location / {
		proxy_pass http://127.0.0.1:5000;
	}
}

map $http_upgrade $connection_upgrade {
    default upgrade;
    '' close;
}
upstream websocket {
    server 127.0.0.1:5000;
}
server {
    listen 8080;
    location / {
        proxy_pass http://websocket;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
    }
}
# supervisor配置
ubuntu@ip-172-31-9-255:~$ cat /etc/supervisor/conf.d/app.conf
[program:flask-react]
command = /home/ubuntu/flask-react/py3env/bin/gunicorn -k flask_sockets.worker -b 127.0.0.1:5000 app:app
directory = /home/ubuntu/flask-react



#client
pip install websocket websocket-client
echo 203 > /sys/class/gpio/export
echo out > /sys/class/gpio/gpio203/direction
echo 0 > /sys/class/gpio/gpio203/value


部署：
安装nginx服务器
apt-get install nginx
cat /etc/nginx/sites-available/flask-app
/etc/nginx/sites-enabled
ln -s ../sites-available/flask-app flask-app

server {
	listen 80;
	location /static {
		alias /home/ubuntu/flask-react/static;
	}
	location / {
		proxy_pass http://127.0.0.1:5000;
	}
}

map $http_upgrade $connection_upgrade {
    default upgrade;
    '' close;
}
upstream websocket {
    server 127.0.0.1:5000;
}
server {
    listen 8080;
    location / {
        proxy_pass http://websocket;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
    }
}
配置 supervisor：
ubuntu@ip-172-31-9-255:/etc/supervisor/conf.d$ ls
app.conf
ubuntu@ip-172-31-9-255:/etc/supervisor/conf.d$ cat app.conf
[program:flask-react]
command = /home/ubuntu/flask-react/py3env/bin/gunicorn -k flask_sockets.worker -b 127.0.0.1:5000 app:app
directory = /home/ubuntu/flask-react

获取源码：
git clone https://git.oschina.net/hifiwifi/flask-react.git

安装pip：
apt-get install python-pip

# virtualenv 的安装
pip install virtualenv
virtualenv -p /usr/bin/python3 py3env
激活：source py3env/bin/activate
退出：deactivate
pip install -r requirements.txt
sudo apt-get install mongodb-server
MongoDB 创建数据库的语法格式如下：
use DATABASE_NAME
例如：use mleaf
向数据库中添加用户：
请求接口：127.0.0.1:5000/adduser  使用post方法
添加表单：
username:mleaf
password:rain
email:mleaf90@gmail.com
description:admin


git clone https://git.oschina.net/hifiwifi/gevent-websocket.git
python setup.py install

(py3env) root@MyCloudServer:~/www/flask-react# cat requirements.txt
flask
flask-wtf
flask-script
pymongo
flask-mongoengine
gunicorn
flask-login
gevent-websocket
flask_sockets

Nginx 403 Forbidden错误的解决方法
是在nginx.conf配置文件中，配置user=root，然后reload nginx，就解决了
root@MyCloudServer:~/www/flask-react/static# vi /etc/nginx/nginx.conf
user root;