Enlace Patrocinado
Enlace Patrocinado
Flask es un marco muy poderoso. Puede construir una gran variedad de sistemas desde una aplicación web muy básica hasta una gran plataforma utilizando un matraz. React es una biblioteca JavaScript de desarrollo front-end muy popular, fácil de usar y muy potente. Docker es una plataforma abierta para que los desarrolladores y administradores de sistemas creen, envíen y ejecuten aplicaciones distribuidas, ya sea en computadoras portátiles, máquinas virtuales de centros de datos o en la nube.
A lo largo de esta serie de tutoriales, leerá sobre la creación de una aplicación web de pila completa usando frasco + react + acoplador:
- Parte I: Configuración de un servidor de matraz básico y despliegue de acoplador
- Parte II: Conexión de operaciones MongoDB y CRUD en la base de datos
- Parte III: Autenticación usando tokens web JSON
En esta serie de tutoriales, crearemos una aplicación de tareas pendientes con inicio de sesión de usuario y actualización en vivo de los datos. Usaremos react como nuestra biblioteca de JavaScript front-end y MongoDB como nuestra base de datos.
Este tutorial, Parte I, se trata de configurar un servidor de matraz básico y probarlo con Docker. Dentro de los próximos 20 a 30 minutos, tendrá un simple servidor de matraz en funcionamiento que servirá una página HTML muy básica como esta.
Comencemos con la configuración del entorno. Primero tendremos que configurar la ventana acoplable. Todo lo demás, estaremos ejecutando y probando dentro de un contenedor acoplable. Puede seguir este tutorial para instalar docker y esto para instalar docker-compose. O si está ejecutando Ubuntu 14.04 / 16.04, puede descargar directamente este script y ejecutarlo utilizando los siguientes comandos para instalarlo en su sistema.
$ chmod + x docker_setup.sh
$ ./docker_setup.sh
Ahora que ha configurado su entorno, hagamos un directorio para trabajar. A continuación se muestra la estructura de directorios que seguiremos a lo largo de esta serie de tutoriales.
Entenderemos brevemente cuál es el requisito de cada archivo y carpeta.
- index.py : este es el punto de entrada de nuestro matraz servidor web.
- requirements.txt : Este archivo contiene todos los módulos de Python requeridos.
- Dockerfile : este archivo es para construir el contenedor docker. (Aprenderemos sobre esto en detalle)
- docker-compose.yml & docker-compose.prod.yml : configuración de implementación para entornos de desarrollo y producción.
- módulos : este directorio contendrá todos los módulos que estaremos escribiendo, incluyendo aplicaciones, registradores, etc.
- aplicación : este directorio contendrá todos los controladores relacionados y otras rutas útiles para nuestra aplicación web.
- dist : este directorio contendrá nuestros archivos estáticos front-end como index.html y otros archivos JavaScript.
- registrador : este es un módulo contenedor sobre el módulo de registro de Python.
Comencemos con el módulo “aplicación”.
” ‘aplicación matraz con mongo’ ” importar os importar json fecha y hora de importación desde el matraz de importación Frasco # crea el objeto matraz aplicación = Frasco ( __nombre__ ) Esto creará el objeto de aplicación de Flask. index.py contendrá el código que realmente ejecutará el servidor de matraz.
| “” “archivo de índice para las API REST que usan” “Flask | |
| importar os | |
| importación sys | |
| solicitudes de importación | |
| desde frasco import jsonify , request , make_response , send_from_directory | |
| ROOT_PATH = os . trayectoria . dirname ( os . ruta . realpath ( __file__ )) | |
| os . Environ . actualización ({ ‘ROOT_PATH’ : ROOT_PATH }) | |
| sys . trayectoria . append ( os . ruta . join ( ROOT_PATH , ‘modules’ )) | |
| registrador de importación | |
| desde la aplicación de importación de aplicaciones | |
| # Crear un objeto de registro para registrar la información y depurar | |
| LOG = registrador . get_root_logger ( os . environmental . get ( | |
| ‘ROOT_LOGGER’ , ‘root’ ), filename = os . trayectoria . unirse ( ROOT_PATH , ‘output.log’ )) | |
| # Variable de puerto para ejecutar el servidor. | |
| PUERTO = os . Environ . obtener ( ‘PUERTO’ ) | |
| @ app . manipulador de errores ( 404 ) | |
| def not_found ( error ): | |
| “” “controlador de errores” “” | |
| REGISTRO . error ( error ) | |
| return make_response ( jsonify ({ ‘error’ : ‘No encontrado’ }), 404 ) | |
| @ app . ruta ( ‘/’ ) | |
| índice def (): | |
| “” “los archivos estáticos sirven” “” | |
| return send_from_directory ( ‘dist’ , ‘index.html’ ) | |
| @ app . ruta ( ‘/ <ruta: ruta>’ ) | |
| def static_proxy ( ruta ): | |
| “” “carpeta estática servir” “” | |
| nombre_archivo = ruta . split ( ‘/’ ) [ – 1 ] | |
| nombre_directo = os . trayectoria . join ( ‘dist’ , ‘/’ . join ( ruta . split ( ‘/’ ) [: – 1 ])) | |
| return send_from_directory ( nombre_directorio , nombre_archivo ) | |
| if __name__ == ‘__main__’ : | |
| REGISTRO . info ( ‘entorno de ejecución:% s’ , OS . Environ . obtener ( ‘ENV’ )) | |
| aplicación . config [ ‘DEBUG’ ] = os . Environ . get ( ‘ENV’ ) == ‘desarrollo’ # Modo de depuración si desarrollo env | |
| aplicación . run ( host = ‘0.0.0.0’ , port = int ( PORT )) # Ejecuta la aplicación |
La línea 9 en realidad agrega la ruta de “módulos” en sys. Para que podamos importar directamente todos los módulos de ese directorio. Hay algunas variables de entorno como PORT & ENV que se definirán en el archivo docker-compose.yml . Actualmente solo hay 3 rutas. ‘/’ para cargar index.html & ‘ / <ruta: ruta>’ para cargar todos los demás archivos estáticos. Una más es manejar el error 404 .
Archivo del módulo registrador.
‘modules / logger / __ init__.py’
de .logger import *
‘modules / logger / logger.py’
” ‘envoltorio alrededor del módulo de registro’ ”importar os registro de importación def get_root_logger ( logger_name , filename = None ): ” ‘obtener el objeto logger’ ” registrador = registro . getLogger ( logger_name ) depuración = os . Environ . get ( ‘ENV’ , ‘development’ ) == ‘desarrollo’ registrador . setLevel ( inicio de sesión . DEPURACIÓN si la depuración de lo contrario inicia sesión . INFO ) formateador = registro . Formateador ( ‘% (asctime) s -% (nombre) s -% (nombre de nivel) s -% (mensaje) s’ ) ch = registro . StreamHandler () ch . setFormatter ( formateador ) registrador . addHandler ( ch ) si nombre de archivo : fh = registro . FileHandler ( nombre de archivo ) fh . setFormatter ( formateador ) registrador . addHandler ( fh ) registrador de retorno def get_child_logger ( root_logger , nombre ): registro de retorno . getLogger ( ‘.’ . join ([ root_logger , name ]))
a
requerimientos.txt:
Frasco == 0.12.2
solicitudes == 2.18.1
Dockerfile :
DESDE python: 2.7
AGREGAR . / app
WORKDIR / app
EXPOSE 4000
RUN pip install -r
require.txt ENTRYPOINT ["python", "index.py"]
Este archivo tiene algunos comandos cuya referencia se puede encontrar aquí . Pero, brevemente, este archivo toma la imagen de Python como base, instala los módulos de Python necesarios y crea un contenedor acoplable.
docker-compose.yml :
versión: servicios '3.5'
:
web_dev:
build:.
puertos:
- "4000: 4000"
volúmenes:
-.: /
entorno de aplicación :
- ENV = desarrollo
- PUERTO = 4000
- DB = mongodb: // mongodb: 27017 / todoDevredes:
predeterminado:
nombre: web_dev
Este archivo define algunas de las variables de entorno y el nombre de los servicios y nombres de red.
index.html y 404.html
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset=”utf-8“> | |
| <title>flask-react</title> | |
| <meta name=”description” content=”Basic web app using flask + react“> | |
| <meta name=”author” content=”Riken Mehta“> | |
| <meta name=”viewport” content=”width=device-width , initial-scale=1, shrink-to-fit=no“> | |
| <link href=”https://fonts.googleapis.com/icon?family=Material+Icons” rel=”stylesheet“> | |
| </head> | |
| <body> | |
| <h1>Welcome to full-stack tutorial using flask & react</h1> | |
| </body> | |
| </html> |
Archivo
| <! DOCTYPE html > | |
| < html lang = ” en ” > | |
| < cabeza > | |
| < meta charset = ” utf-8 ” > | |
| < título > Página no encontrada 🙁 </ título > | |
| </ cabeza > | |
| < cuerpo > | |
| < h1 > No encontrado | |
| < span > 🙁 </ span > | |
| </ h1 > | |
| < p > Lo sentimos, pero la página que intentaba ver no existe. </ p > | |
| < p > Parece que este fue el resultado de: </ p > | |
| < ul > | |
| < li > una dirección mal escrita </ li > | |
| < li > un enlace desactualizado </ li > | |
| </ ul > | |
| </ cuerpo > | |
| </ html > |
Ponga estos archivos en ‘modules / app / dist /’ . Ahora nuestra aplicación web mínima mínima con servidor de matraz y despliegue de acoplador está lista. Al ejecutar los siguientes comandos, podremos iniciar el servidor.
$ docker-compose --build
Debería obtener el resultado de esta manera:
Construyendo web_dev
Paso 1/6: DESDE python: 2.7
---> 2863c80c418c
Paso 2/6: AGREGAR. / app
---> Usando caché
---> 33352b6d855f
Paso 3/6: WORKDIR / app
---> Usando caché
---> 24b5bc8d0b64
Paso 4/6: EXPOSE 4000
---> Usando caché
---> d880187326eb
Paso 5/6: EJECUTAR pip install -r
require.txt ---> Ejecutando en 77329798090f
Recopilación de frasco == 0.12.2 (desde -r require.txt (línea 1))
Descargando Flask-0.12.2-py2.py3- none-any.whl (83kB)
.
.
.
.
Paso 6/6: ENTRYPOINT ["python", "index.py"]
---> Ejecutando en c5ce8be1c83d
Construido con éxito 6b3552b6c7fc
Etiquetado correctamente pythonflask_web_dev: último
Creando pythonflask_web_dev_1 ... hecho
Adjuntando a pythonflask_web_dev_1
web_dev_1 | 2018-04-13 15: 58: 12,066 - root - INFO - entorno de ejecución: desarrollo
web_dev_1 | * Se ejecuta en http://0.0.0.0:4000/ (
presione CTRL + C para salir) web_dev_1 | * Reinicio con stat
web_dev_1 | 2018-04-13 15: 58: 12,425 - root - INFO - entorno de ejecución: desarrollo
web_dev_1 | * El depurador está activo!
web_dev_1 | * PIN del depurador: 170-374-745
En la Parte II, conectaremos esta aplicación con mongoDB usando flask_PyMongo. También crearemos una base de datos de usuarios y agregaremos un par de rutas para crear, leer, actualizar y eliminar usuarios. Eventualmente, desarrollaremos una aplicación de tareas completa con funciones de guardado automático y actualización en vivo usando flask_socketIO .
Si tiene problemas para que la aplicación funcione, no dude en agregar los comentarios.