• flask+react1.搭建后台安装flask安装virtualenv创建后台文件2.搭建前台1.init在Flask后台中运行前台程序1.build目录2.配置到服务器 1.搭建后台 安装flask pip3 install flask 安装virtualenv virtualenv是一个...


    1.搭建后台

    安装flask

    pip3 install flask

    安装virtualenv

    virtualenv是一个用于创建虚拟环境的脚本。可以让不同的项目使用自己的一套环境,避免项目间的冲突或者与本地环境的冲突。
    使用
    pip3 install virtualenv
    然后创建虚拟环境
    cd /var/www/WebSite
    virtualenv venv #创建虚拟环境
    source venv/bin/activate #运行虚拟环境
    此时命令提示符变了,有个(venv)前缀,表示当前环境是一个名为venv的Python环境
    然后正常安装各种包,在venv环境下,用pip安装的包都被安装到venv这个环境下,系统Python环境不受任何影响。
    使用deactivate命令可以退出当前环境。
    在venv环境下,可以使用pip3 freeze > requirements.txt导出当前venv环境中所用到的python第三方库。
    在部署到服务器的过程中,在服务器端运行pip3 install -r requirements.txt,可以直接安装项目所需库。

    创建后台文件

    创建一个python文件hello.py作为项目的入口文件

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

    然后创建一个目录为backend做为项目后台
    backend中创建一个__init__.py

    from flask import Flask,render_template,g,session
    def creat_app():
        app = Flask(__name__,template_folder="templates",static_folder="static",static_url_path="/backend/static")
        #注册蓝图
        from . import main
        app.register_blueprint(main.main)
        app.config['SECRET_KEY'] = '...自己生成的秘钥'
        app.debug = True
        db.init_app(app)
        return app
    

    然后创建templates和static目录用于存放渲染模板和其他静态文件。
    创建一个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')
    

    此时项目的目录如下

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

    2.搭建前台

    1.init

    创建React项目时。使用Facebook 提供的 creat react app 库进行创建。这个库为我们封装好了打包还有开发时要用到的基本库。

    npm install -g create-react-app

    create-react-app frontend

    创建后目录结构如下

    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中的内容

    {
      "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"
      }
    }
    

    发现package.json中没有webpack这样的打包工具。

    其实webpack已经安装在node_modules中,打包的工作现在全都通过scripts中build来完成。webpack配置文件在 node_modules中的react-scripts库内。已经帮我们完成了封装。
    package.json中的许多应用库都已经封装在了react-scripts库中。如果要查看,可以运行npm run eject来还原到package.json中。但是注意这个步揍是不可逆的。正常条件下帮我们封装的程序就足够我们打包调试和正常的开发。

    可以通过 npm run +scripts中的指令来运行scrips中的脚本。
    npm run start会运行一个本地的server用于调试代码。

    在Flask后台中运行前台程序

    1.build目录

    npm run build会在frontend目录下创建一个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
    

    浏览器中,如果文件名不发生变化,可能会导致不更新此文件而是使用本地的缓存文件。react-script的build脚本帮助我们解决了这个问题。
    static目录下的文件后面都有一串hash值。这个值是通过对文件进行md5后取了其中一段作为文件名字的。这样做只要文件发生变化。hash值也会发生变化。这样保证了文件有所更新后。build出来的文件的名字也会变化。

    2.配置到服务器

    虽然build文件已经生成。但是生成的路径是在frontend目录下。而要Flask后台上运行,需要把build中的入口文件index.html移动到backend的template目录下。而其他的js、css、图片等则要移动到backend中的static目录下方便外部访问。
    所以我们要在npm run build的前后加入一些命令或者脚本,移动文件到backend下的目录。
    移动好后,项目结构大致如下

    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/”,

    在widnows下写成

    “prebuild”: “del …\backend\templates\index.html & rd /s/q …\backend\static\build”,
    “postbuild”: “move build\index.html …\backend\templates\ & move build …\backend\static\”,

    作用分别为在build前后执行一些shell命令。

    这样。我们运行npm run build后。生成的文件就已经放入到了backend中。

    但是此时运行python hello.py会发现。打开的网页是空白。查看templates下的index.html会发现,其中引用的文件的链接地址不正确

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

    我们staic文件的路径应该是/backend/static/...上面的js路径应该为
    /backend/static/build/static/js/main.040641a3.js时,才能访问到此文件。
    我们可以在package.json中指定homepage参数来指定生成文件的主页路径。
    在package.json中添加

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

    此时的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。再运行python hello.py页面就可以正常显示了。实际上我们运行npm run build的时候使用的是frontend/pubilc目录下的文件做模板的。生成的index.html也是按照public下的index.html生成的。如果我们要改后端static文件下build文件的结构。需要同时修改public中的index.html文件。使其生成的入口文件中的静态文件地址能被找到。

    修改favicon.icon 可以改变文件标签上的图标。

    而manifest.json文件是控制将站点添加至主屏幕时的一些配置的。

    展开全文
  • 而我们选择使用React作为开发框架的时候,往往会选择Webpack+Babel+React来开始我们的项目。之前也讲过其他的前端框架,如 gulp+webpack,准确的说这不是一个框架,只是项目组织的形式而已。Webpack+Babel+React环境...

    前言

    我们知道前端的框架纷繁复杂,各有各的优点。而我们选择使用React作为开发框架的时候,往往会选择Webpack+Babel+React来开始我们的项目。之前也讲过其他的前端框架,如 gulp+webpack,准确的说这不是一个框架,只是项目组织的形式而已。

    Webpack+Babel+React环境搭建

    安装Webpack

    关于Webpack的介绍这里不讲解,大家可以看之前的讲解webpack介绍

    npm install webpack -g

    创建一个项目

    创建一个名叫learn-webpack项目,并进去项目目录。

    mkdir learn-webpack 
    cd learn-webpack

    这里写图片描述
    接下来我们来创建2个文件:app.js和index.html,我们在也没上输出一个”Hello World”,
    app.js:

    document.querySelector('#app').innerHTML = 'Hello World!';

    index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Learn-webpack</title>
    </head>
    <body>
      <div id="app"></div>
      <script src="dist/bundle.js"></script>
    </body>
    </html>

    然后在终端执行如下命令:

    webpack ./app.js ./dist/bundle.js

    最后执行启动本地的http服务,我们这里用python:

    python -m SimpleHTTPServer

    然后我们访问:http://localhost:8000就可以看到效果了。

    webpack文件配置

    实际上每个项目下都应该包含一个webpack.config.js,用来告诉Webpack需要做些什么,这个我们之前文章也说过。

    module.exports = {
      entry: "app.js",
      output: {
        path: __dirname+"/dist",
        filename: "bundle.js"
      }
    }

    接下来我们在终端运行命令,看看是不是和之前输入 webpack ./app.js ./dist/bundle.js 的打包编译结果一样呢,答案是肯定的。

    webpack

    注:
    entry:指定打包的入口文件

    • 单个文件打包为单个输出文件,直接写该文件的名字,例如:entry:”main.js”
    • 多个文件打包为单个输出文件,将文件名放进一个数组,例如:entry:[‘main.js’,’xx.js’]
    • 多个文件打包为多个输出文件,将文件名放入一个键字对,例如:entry: {a:’main.js’,b:’xx.js’}
      output:配置打包结果
      path为定义输出文件夹,filename为打包结果文件的名称,如果指定打包入口文件为上面的1、2种情况,filename里面直接跟你想输出的文件名。若为第3种情况filename里面需写成[name].文件名.js,filename里面的[name]为entry中的键。

    监听变化自动打包

    当我们在不停的对代码进行变动的时候,为了不修改一次然后又手动去进行打包一次,可以使用webpack的watch功能。这也算是webpack的一个黑科技,以前做后端的时候必须重新部署,这个是很蛋疼的。

    webpack --watch 或者 webpack -w

    或者我们可以直接在配置代码里面把watch设置为true。

    module.exports = {
      entry: "app.js",
      output: {
        path: __dirname+"/dist",
        filename: "bundle.js"
      },
      watch: true
    }

    Babel配置

    Babel 是一个 JavaScript 编译器。使用它可以将ES6的语法转换为ES5的语法,以便在现在有的环境执行之前的代码。
    首先安装basel。

    npm install webpack babel-loader babel-core babel-preset-es2015 --save-dev

    执行安装完成后需要将之前的webpack.config.js修改为:

    module.exports = {
      entry: "./app.js",
      output: {
        path: __dirname+"/dist",
        filename: "bundle.js"
      },
      module: {
        loaders: [
          {
            test: /\.jsx?$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
              presets: ['es2015']
            }
          }
        ]
      },
      resolve: {
        extensions: ['','.coffee','.js']
      }
    }

    现在就能在文件里面以ES6的语法进行代码编写,如在app.js加入:

    var func = str => {
      console.log(str);
    };
    func('Hello Babel!');

    我们再次运行,如果看到输出,就说明配置成功了。这里有关Loader的知识和配置就不讲究了,大家可以网上补补。

    与React结合

    终端输入以下代码对react和react-dom进行安装:

    npm install react react-dom --save

    安装Babel针对React的预设插件:

    npm install babel-preset-react --save-dev

    由于我们增加了react的预设插件,所以需要对webpack.config.js进行修改。将module -> loaders下面的query修改如下:

    query: {
        presets: ['es2015','react']
    }

    接下来我们创建一个hello.js.

    import React from "react";
    
    class Hello extends React.Component{
      render() {
        return (
          <div>
              Hello, World!
          </div>
        )
      }
    }
    
    export default Hello;

    在app.js做一下配置:

    import React from "react";
    import ReactDOM from "react-dom";
    import Hello from "./hello";
    
    ReactDOM.render(
      <Hello />,
      document.querySelector('#app')
    );

    哈哈哈,这里如果大家做过React Native的,这里是不是感觉很亲切,只不过React Native还是用的npm在做管理。我们同样启动服务在看看,如果看到Hello World!就说明环境配置成功。

    展开全文
  • 上两个礼拜在学习Python和React,完成了一个demo,前端使用React+Redux实现,参考并借鉴了网上代码,后端采用Python的Flask框架,在数据存储方面,简单的利用了Redis进行缓存。 项目包括以下几块内容: 登录功能,...

    上两个礼拜在学习Python和React,完成了一个demo,前端使用React+Redux实现,参考并借鉴了网上代码,后端采用Python的Flask框架,在数据存储方面,简单的利用了Redis进行缓存。
    项目包括以下几块内容:

    • 登录功能,不允许重复用户名密码
    • 对在线人数进行过滤搜索
    • 每5s更新一次在线聊天人数
    • 登录时获取近一段时间的聊天室聊天数据
    • 聊天数据以localStorage存在本地,再次刷新数据不会丢失

    技术栈:

    • Python Flask作为后端代码实现
    • Redis作为数据存储
    • 基于React+Redux前端框架作为实现

    下面是效果图:

    这里写图片描述

    下面是前端的代码结构:

    这里写图片描述

    Python端代码结构:

    这里写图片描述

    有需要的同学可以从我的github上clone:
    Python_Websocket_flask_chat

    运行本项目

    安装Node.js

    安装Nodejs:

    sudo apt-get install nodejs
    

    安装npm:

    sudo apt-get install npm
    

    配置cnpm:

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

    安装Python

    安装python:

    sudo apt-get install python2.7 python2.7-dev
    

    安装pip:

    sudo apt-get install python-pip
    

    安装Redis

    下载redis:

    wget http://download.redis.io/releases/redis-4.0.2.tar.gz
    tar xzf redis-4.0.2.tar.gz
    cd redis-4.0.2
    make
    

    ###运行前端代码
    进入**/Python_Websocket_flask_chat/app/static**
    分别执行:

    npm install
    

    运行开发环境:

    npm run dev
    

    接着访问:http://localhost:8085/
    即可看到主页。

    运行Redis

    进入Redis根目录
    执行:

    ./redis-server
    

    运行python服务器

    下载所需依赖:

    pip install -r /Python_Websocket_flask_chat/requirements/requirements.txt
    

    运行服务器:

    python /Python_Websocket_flask_chat/manage.py
    

    觉得博主写的有用,不妨关注博主公众号: 六点A君。
    在这里插入图片描述

    展开全文
  • 1. 部署工具:XshellNavicat for MySql阿里云EC(操作系统ubuntu16.04)Xftp:(可选,我主要用来看目录结构的)登录网页版阿里云控制台安全组,开启入8000端口,80,3306,出3306参考资料:...


    1.   部署工具:

    Xshell

    Navicat for MySql

    阿里云EC(操作系统ubuntu16.04

    Xftp:(可选,我主要用来看目录结构的)

    登录网页版阿里云控制台安全组,开启入8000端口,80,3306,出3306

    参考资料:https://zhuanlan.zhihu.com/p/33039984

    2.   开始

    1. 使用xshell连接阿里云ecs服务器

    改名,为了好看而已

    root@iZ96cs5sygkesjZ:~# hostname  H
    root@iZ96cs5sygkesjZ:~# su

    2.       升级系统软件

    root@H:~# sudo apt-get update
    
    root@H:~# sudo apt-get upgrade

    按提示输个y,等待即可

    3.  安装MySql,并配置使其能被远程连接

    root@H:~# sudo apt-get install mysql-server mysql-client

    中途输入2次数据库密码,用户名是root,直接回车则密码为空

    安装完检测

    root@H:~# sudo netstat -tap | grep  mysql

    登录数据库,输入密码

    root@H:~# mysql -u root -p

    输入命令

    show databases;

    表示成功,然后退出来exit;

    exit;

    安装完mysql改下ip,注释掉这一行

    root@H:~# vim  /etc/mysql/mysql.conf.d/mysqld.cnf


    保存退出来  :wq

    重启mysql

    root@H:~# service mysql restart

    再进入mysql

    授予任意ip(%)用root用户,密码登录更改等权限

    mysql> grant all privileges on*.* to '用户名(root)'@'%' identified by '密码' with grant option;

    刷新权限

    mysql> flush privileges;

    这就可以了,测试一下

    好了,可以退出数据库了

    4.  准备创建虚拟环境

    先进要做虚拟目录的根目录,我用的/srv,你们也可选opt,var/www

    安装python3-venv

    root@H:/srv# apt-get install  python3-venv

    安装git,nginx以及python3安装mysqlclient需要安装的依赖包

    root@H:/srv# sudo apt-get install  git nginx libmysqlclient-dev python3-dev

    5.  创建虚拟环境env

    root@H:/srv# python3 -m venv env

    进入虚拟环境(启动文件在虚拟目录下bin文件夹叫activate)

    root@H:/srv# source env/bin/activate

    成功

    安装django框架

    (env) root@H:/srv# pip install Django

    创建项目

    (env) root@H:/srv# django-admin.py startproject dolphun

    (图中提示我pip可以升级,我就顺便升了下,这个无所谓)

    生成requirements.txt文件并安装
    (env) root@H:/srv# pip freeze > requirements.txt
    (env) root@H:/srv# pip install -r requirements.txt

    进入项目目录dolphun

    数据库转移

    (env) root@H:/srv/dolphun# python3  manage.py migrate

    测试下安装情况,用所有浏览器访问

    (env) root@H:/srv/dolphun# python  manage.py runserver 0.0.0.0:8000

    嗯哼,静态文件没刷新,没关系,改一下退出测试Ctrl+C

    打开文件加上公网ip

    ^C(env) root@H:/srv/dolphun# vidolphun/settings.py

    保存退出,再测试下,OK了

    6.  安装uwsgi

    (env) root@H:/srv# pip install uwsgi

    测试

    ^C(env) root@H:/srv# uwsgi --http:8000 --module dolphun.wsgi

    7.  配置文件

    首先保证自己在项目前目录,也就是/srv下

    新建文件夹script并进入

    ^C(env) root@H:/srv# mkdir script(env) 


    创建新文件uwsgi.ini

    (env) root@H:/srv/script# vi uwsgi.ini

    具体内容如下

    [uwsgi]
    
    # 项目目录
    
    chdir=/srv/dolphun/
    
    # 启动uwsgi的用户名和用户组
    
    uid=root
    
    gid=root
    
    # 指定项目的application
    
    module=dolphun.wsgi:application
    
    # 指定sock的文件路径
    
    socket=/srv/script/uwsgi.sock
    
    # 启用主进程
    
    master=true
    
    # 进程个数
    
    workers=10
    
    pidfile=/srv/script/uwsgi.pid
    
    # 自动移除unix Socket和pid文件当服务停止的时候
    
    vacuum=true
    
    #环境
    
    virtualenv = /srv/env
    
    # 序列化接受的内容,如果可能的话
    
    thunder-lock=true
    
    # 启用线程
    
    enable-threads=true
    
    # 设置自中断时间
    
    harakiri=30
    
    # 设置缓冲
    
    post-buffering=1028
    
    # 设置日志目录
    
    daemonize=/srv/script/uwsgi.log

    写好保存退出

    (env) root@H:/srv/script# uwsgi--ini uwsgi.ini
    
    (env) root@H:/srv/script# ps -ef|grep -i uwsgi

    8. 添加nginx配置文件

    cd /etc/nginx/conf.d/
    添加新文件dolphun.conf
    (env) root@H:/srv/script# cd /etc/nginx/conf.d/
    (env) root@H:/etc/nginx/conf.d# vi dolphun.conf
    具体内容如下,更改中文解释的部分
    server {
    
           # 监听 就是你启动的端口
    
           listen 80;
    
           # server_name后面跟你的公网ip,域名。然后下面的不管它
    
           server_name 39.105.37.17 dolphun.cn   www.dolphun.cn;
    
           charset  utf-8;
    
           gzip on;
    
           gzip_types text/plain application/x-javascript text/css text/javascriptapplication/x-httpd-php application/json text/json image/jpeg image/gifimage/png application/octet-stream;
    
     
    
           error_page  404           /404.html;
    
           error_page   500 502 503 504  /50x.html;
    
           # 指定项目路径uwsgi
    
           
    
           location / {
    
                    include uwsgi_params;
    
                    uwsgi_connect_timeout 30;
    
                    # socket路径要与uwsgi的socket路径一致
    
                    uwsgi_passunix:/srv/script/uwsgi.sock;
    
           }
    
           # 指定静态文件路径
    
           location /media  {
    
                    alias  /srv/dolphun/media;
    
           }
    
           location /static/ {
    
                    alias  /srv/dolphun/static_all/;
    
                    index  index.html index.htm;
    
           }
    
     
    
    }

    保存退出

    9.  停掉uwsgi和nginx

    (env) root@H:/etc/nginx/conf.d# cd  /srv/script/

    10. 收集静态文件

    (env) root@H:/srv/script# cd  ../dolphun/dolphun/
    
    (env) root@H:/srv/dolphun/dolphun# vi  settings.py

    在最后加

    STATIC_ROOT = os.path.join(BASE_DIR, "static_all")

    保存退出开始收集

    (env) root@H:/srv/dolphun# cd ..
    
    (env) root@H:/srv/dolphun# python  manage.py collectstatic

    重启uwsgi和nginx

    (env) root@H:/srv/dolphun# cd ../script/
    
    (env) root@H:/srv/script# uwsgi --ini  uwsgi.ini
    
    (env) root@H:/srv/script# /etc/init.d/nginx  start

    完成!

     


    展开全文
  • 刚刚在本地测试环境写完项目,目前本地测试是一切...后端Python3.6 + Django1.10.1 脚手架用的是create-react-app所以我们无需 用webpack来编译 1: 前端打包: 项目用的是yarn,所以我们编译的话直接执行yarn bui...

    刚刚在本地测试环境写完项目,目前本地测试是一切顺利,未发现异常,准备打包到生产环境服务器上.

    1. 前端React + antd + React-Router + axios
    2. 后端Python3.6 + Django1.10.1
    3. 脚手架用的是create-react-app所以我们无需 用webpack来编译

    #####1: 前端打包:
    这里写图片描述
    项目用的是yarn,所以我们编译的话直接执行yarn build 这个命令在我们的package.json的文件里面定义的
    这里写图片描述
    执行之后如下:
    这里写图片描述
    ###注意:
    1:大家用过Django的都知道普遍的模式是mtvhtml css js文件也是在后端中,当用了前端之后,前端的文件会独立出来,也就是我刚刚编译之后的内容 ⇒ build目录 ,这个目录非常重要,我们需要把这个目录拷贝到生产服务器上,他用做我们最终的前端配置文件

    #####2: 后端打包:
    到我们后端项目Backend目录中,将数据库里面的数据统一倒入到.json文件中:
    这里写图片描述
    除了json文件命名无所谓以外,其他格式是严格要求这个写法(除了python版本)

    然后将后端目录拷贝到生产服务器上

    #####3: uwsgi:
    服务器上的一些包什么的这里就不一一说了,大家肯定有缺少的,少什么就pip装什么,推荐pip国内镜像:

    mkdir ~/.pip
    touch ~/.pip/pip.conf
    vim ~/.pip/pip.conf
    
    [global]
    timeout = 6000
    index-url = http://pypi.douban.com/simple/
    [install]
    use-mirrors = true
    mirrors = http://pypi.douban.com/simple/
    trusted-host = pypi.douban.com
    

    然后将开发环境打包的.json文件倒入到本地数据库中:
    这里写图片描述
    安装uwsgi:

    pip3.6 install uwsgi
    

    安装之后我们现在本地创建一个脚本文件进行uwsgi测试 :

    vim /root/test.py
    
    def application(env, start_response):
            start_response('200 OK',[('Content-Type', 'text/html')])
            #return ['Hello world'] # Python2
            return [b'Hello world'] # Python3
    执行测试: uwsgi --http 127.0.0.1:9090 --wsgi-file test.py #返回200即OK
    

    然后我们进入后端目录的settings.py的同级目录下创建uwsgi.ini文件 (本地是以配置文件形式,以sock文件形式输出)

    [uwsgi]
    socket = 127.0.0.1:8000  				"这部分是uwsgi开启的端口号,注意不能和nginx占用同一个端口,同时也是nginx 代理的地址"
    chdir =  /src/Backend/   				"后端项目目录"
    wsgi-file = /src/Backend/back/wsgi.py 	"后端项目的wsgi.py 位置都是一样的"
    master = True							"启动一个master进程来管理其他进程"
    processes = 2							"同时启动uwsgi进程的个数"			
    daemonize = wsgi.log					"uwsgi的日志输出文件"
    threads = 4								"同时启动的线程个数"
    pidfile = uwsgi.pid						"uwsgi的pid文件"
    buffer-size  = 30000					"此处可不写,我这buffer较高,所以我设置了"
    

    启动uwsgi

    uwsgi --ini uwsgi.ini 
    

    查看日志输出是否正常:
    这里写图片描述
    一般看到我画箭头的那块就差不多成功启动了

    #####4: nginx:
    现在我们需要做的就是ngixn的配置了,首先需要将你的前端编译过的目录build放到nginx根目录下:
    这里写图片描述
    编辑nginx配置文件随便命名.conf结尾

    cd conf/conf.d/
    vim api.conf
    
    前端配置server
    server {
    	listen 80;
    	server_name www.project.com; "对外访问的加速域名,不可与uwsgi端口冲突"
    
    	location / {
    		"一些跨域头"
    		add_header 'Access-Control-Allow-Origin' '*'; 
    		add_header 'Access-Control-Allow-Credentials' 'true';
    		add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    		add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
    		root build; "这里就要指定你的前端目录文件了,也就是刚刚放进nginx根目录的文件夹"
    		index html index.html; "build 目录下默认有index.html 指定默认文件"
    		try_files $uri /index.html; "这块分重要,曾经不加尝试过,当我访问login路径时,他不会自动跳转,具体自行百度"
    	}
    }
    后端配置server
    server {
    	"这部分是我前端axios 请求的时候的地址也就是每次前端异步请求是http://www.igolang.cn:9000"
    	listen 9000;
    	server_name www.igolang.cn; 
    	
    	"项目app 叫api,也就是匹配到api路径,加载uwsgi模块 代理到本地地址"
    	location  ~ /api/ {
    		include uwsgi_params;
    		uwsgi_pass 127.0.0.1:8000; "这里就是uwsgi.ini配置文件中的地址"
    	}
    }
    

    有问题欢迎前来咨询:
    QQ:1301927919
    QQ群: 340164542

    个人博客: https://igolang.cn

    展开全文
  • 最近还没找到工作,就在学校磨练下自己的...因为之前在的公司是用react在做项目,所以打算用react+django搭建一个前后分离的博客。 这样各玩各的,互相的干扰做到最小,只有之间数据的连接。 这个blog的项目在这htt
  • 这两天在研究flask和antd,想把这俩个东西结合来使用,单独学antd的时候用的是dva来配置,但是发现这样与flask结合的话需要启动两个服务,作为flask只是作为数据的接口,并没用用到其强大的模板渲染功能,所以最后...
  • 一 ...5、安装 python 环境 RN需要2.x版本的python 安装时勾选自动配置环境变量 安装完成,执行 python 命令,检查是否安装成功 6、配置 Android 环境 安装 Android,并配置环境变量 二 1、使用np
  • 在定位元素过程中,总会遇到这样那样的问题,下面就最近遇到的4大类问题,得到的解决方法,来做个总结。 1. xpath描述错误的 这个是因为在描述路径的时候没有按照xpath的规则来写 造成找不到元素的情况出现 ...
  • 描述了从零开始创建react+Django项目的过程,附有详细步骤及成品项目地址。
  • 此文主要是为了测试一款 django 的模板,名为 django-react-template,包括了前端和后端 首先,安装环境如下 系统: centos7 python==2.7.5 django==1.9.4 postgreSQL9.6.17 第一步,在 postgreSQL 新建...
  • 本文重点是建立restframework提供REST的DRF项目,并且完成与REACT的前端交互(加上必要的中间插件) 1、后端的搭建 1、按照官方教程安装相关依赖 http://www.django-rest-framework.org/ sudo pip3 i...
  • 原本想用虚拟机重新演示,但超薄本...建议安装Anaconda,里面有很多python库,这样以后用起来方便,并且有jupyter工具,以后用得到。 安装anaconda3即可,我把Anaconda3-5.0.0-Windows-x86_64.exe传到群里了,python...
  • 在自己做的案例中,我提供了200个网站链接,然后进行网络抓取,每抓取一个网站就保存一个值,但是最后总有一个网站没有存值,我的分析可能是因为这个网站一直处于链接状态, 有没有什么方法可以判断链接网站的时候,如果...
  • 记录一下最近项目所用到的技术React + Dva + Antd + umi ,以免忘记。之前没有用过它们其中一个,也是慢慢摸索,了解数据整个流程。 先了解下概念 React 不多说,3大框架之一; Dva 是由阿里架构师 sorrycc 带领 ...
  • gitlab+jenkins+docker自动化部署脚本,采用shell与python开发,其中python部分均为封装成型的逻辑,只接受shell传参就能完成项目构建
  • 前言最近心血来潮,想要做一个全栈的App玩玩,在网上查阅一下现在的主流的技术栈,考虑的自身能力及开发成本,准备做一个node.js+koa2+react-native的app。目前个人的状态是node.js会一点点点点,koa2不会,react-...
  • 笔者目前在使用Electron开发跨平台桌面应用,基于原生的GUI库的支持有限,需要使用React辅助开发,之前未开发过前端项目,这次踩的坑也很多,现将对应部署过程记录,以供后来才考。 开发环境 笔者通常在MacOS/...
  • Cordova+React+OnsenUI+Redux新闻App开发实战视频培训课程以真实的案例讲解Cordova开发的流程设计,React+Redux的架构理念设计新闻App的数据流管理,整体的技术栈包括混合应用技术架构、cordova平台实战(视频教程)...
1 2 3 4 5 ... 20
收藏数 20,527
精华内容 8,210
热门标签
关键字:

+ python react