React and Flask to GCP

Créez un site de test piloté à l'aide de l'API Yelp que vous souhaitez utiliser GCP

Je voulais créer un serveur de test d'API avec GCP Langue: React, Flask Screen Shot 2020-03-22 at 1.12.36.png

Je pensais que je devrais le dessiner avec une API de quelque part, mais c'est ennuyeux (liens ** Learn Udon ** pour parler d'udon wiki % E3% 81% 86% E3% 81% A9% E3% 82% 93)) image.pngYelp API使ってこんな感じにした

Yelp api J'ai utilisé l'api de yelp parce que tout le monde connaît les sites de cuisine japonaise et je pense que c'est une bonne idée de jeter un coup d'œil à l'étranger.

Obtenir une clé API est facile. Si vous allez sur yelp développeurs et que vous vous inscrivez avec votre compte google ou facebook, il sera publié immédiatement.

Flask

Structure du répertoire

app
├── config.py
└── run.py
# run.py

from flask import Flask, request
from flask_cors import CORS
import requests

import config

app = Flask(__name__)
CORS(app)

URL = "https://api.yelp.com/v3/businesses/search"
headers = {'Authorization': f"Bearer {config.API_KEY}"}


@app.route('/')
def ramen_yelp():
    payload = {
        "term": request.args.get("term", "ramen"),
        "location": request.args.get("location", "ny")
    }
    response = requests.request("GET", URL, headers=headers, params=payload)
    return response.json()


if __name__ == "__main__":
    app.run(host="0.0.0.0", port=config.PORT, debug=config.DEBUG_MODE)

Dans le cas de root ('/'), le classement des ramen à New York est défini par défaut.

réglages pour flask et gunicorn dans la config L'important est de le mettre dans la variable env

# config.py

from os import environ
import multiprocessing

PORT = int(environ.get("PORT", 8080))
DEBUG_MODE = int(environ.get("DEBUG_MODE", 1))
API_KEY = environ.get("API_KEY")

bind = ":" + str(PORT)
workers = multiprocessing.cpu_count() * 2 + 1
threads = multiprocessing.cpu_count() * 2

Lorsque vous saisissez ** 0.0.0.0:8080 ** depuis votre navigateur (Firefox ou Chrome) json_screen_shot.png

Le résultat est maintenant craché avec json

Enregistré avec GCR (Google Container Registry)

Convertir flask en docker et télécharger vers GCR

Le Dockerfile ressemble à ceci

# pull official base image
FROM python:3.8.1-alpine

# set environment variables
ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHONUNBUFFERED 1

# install dependencies
RUN pip install --upgrade pip
COPY requirements.txt requirements.txt
RUN pip install -r requirements.txt

# set work directory
WORKDIR /usr/src/app

# copy project
COPY ./app .

ENV PORT 80
ENV API_KEY YOUR_API_KEY

CMD ["gunicorn", "run:app", "--config=config.py"]
# requirements.txt
Flask==1.1.1
gunicorn==20.0.4
requests==2.23.0
Flask-Cors==3.0.8

** En production, utilisez API_KEY dotenv pour l'assembler dans config.py *

Ensuite, vous pouvez facilement vous inscrire en tapant la commande suivante

#!/bin/sh
docker build -t flask-test-gcr 
docker tag flask-test-gcr [HOSTNAME]/[PROJECT-ID]/flask-test-gcr
docker push [HOSTNAME]/[PROJECT-ID]/flask-test-gcr
gcloud container images list-tags [HOSTNAME]/[PROJECT-ID]/flask-test-gcr

Comme ça Screen Shot 2020-03-22 at 14.08.08.png

GCE(Google Compute Engine) Créer une instance à partir de l'écran de la console gcp

Puisque la spécification de la machine est un test, faisons-en la plus faible et la plus faible! image.png

Si vous souhaitez déployer immédiatement à partir du conteneur à l'aide de docker, n'oubliez pas de vérifier les éléments suivants et l'image du conteneur image.png

Le même résultat peut être obtenu en définissant l'adresse IP externe de l'écran de l'instance de VM GCE sur * http: [IP] *! Si vous n'avez pas de certificat SSL, vous devez définir l'adresse IP externe sur * http * au lieu de * https *. image.png

Notez cette adresse IP car elle sera appelée depuis React

Le front est React

Facile avec une belle plaque chauffante appelée create-react-app

# app-nom est votre nom préféré
npx create-react-app app-name

App.js est principalement un modèle, avec la différence entre l'appel d'images, de liens et de composants Yelp.js.

// App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';

import Yelp from './Yelp' //← Ce

function App() {
  return (
    <div className="main">
      <Yelp />
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="Udon logo" />
          <a
            className="App-link"
            href="https://ja.wikipedia.org/wiki/%E3%81%86%E3%81%A9%E3%82%93"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn Udon
        </a>
        </header>
      </div>
    </div>
  );
}

export default App;
// Yelp.js

import React, { useEffect, useState } from 'react'
import './Yelp.css'

const Yelp = () => {
  const [error, setError] = useState(null)
  const [yelpData, setYelpData] = useState({})

  useEffect(() => {
    const API_URL = 'http://IP externe que j'ai noté plus tôt/'
    fetch(API_URL)
      .then(res => res.json())
      .then(
        result => {
          setYelpData(result)
        })
      .catch(e => {
        setError(e)
      })
  }, [])

  if (error) {
    return (
      <div className="Yelp">error</div>
    )
  } else if (yelpData.businesses) {
    const images = yelpData.businesses.map(item => {
      return (
        < a key={item.id} href={item.url} target="_blank" rel="noopener noreferrer" >
          < img
            height="150" width="150" crop="fill" radius="20"
            src={item.image_url} alt="ramen"
          />
        </a >
      )
    })
    return (
      <div className="Yelp">
        {images}
      </div>
    )
  } else {
    return (
      <div className="Yelp"></div>
    )
  }
}

export default Yelp

Après cela, si vous le démarrez localement, une image de ramen sortira

#Commencez
yarn start

Cliquez sur votre image préférée pour accéder au lien Yelp pour plus de détails ラーメン

référence

Exécutez une image Docker enregistrée dans Container Registry (GCR) sur GCE

Recommended Posts

React and Flask to GCP
Je souhaite créer une application Web en utilisant React et Python flask
Installez Python et Flask (Windows 10)
Ajouts clés aux pandas 1.1.0 et 1.0.0
L'authentification Twitter utilisant Flask et React est très agressive avec WebSocket
Envoi et réception d'images Flask
La route pour installer Python et Flask sur un PC hors ligne
Python 3.6 sous Windows ... et vers Xamarin.
[Introduction à Python3 Jour 1] Programmation et Python
Préparation à l'exécution de Flask sur EC2
Réutilisation du flacon Comment écrire du HTML
Scraping, prétraitement et écriture dans postgreSQL
Authentification de base, authentification Digest avec Flask
GCP: fonctions de lien et Pub / Sub
Comment installer et configurer Blackbird
Comment utiliser .bash_profile et .bashrc
Comment installer et utiliser Graphviz
Connexion SSH de Windows à GCP
Journalisation Python et vidage vers json
Sélénium et python pour ouvrir Google
Connectez-vous à MySQL à l'aide de Flask SQL Alchemy
La façon la plus simple de faire un flacon
Résoudre des puzzles et 15 puzzles
Enveloppez la lecture et l'écriture de GCP dans Secret Manager avec les sous-commandes google
Déployez Django + React à partir de zéro vers GKE (4) Créez un cluster et un conteneur PUSH