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

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)) Yelp 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)

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 *

• Installez gcloud localement (doc)
• Activer la facturation GCR

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

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!

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

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 *.

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

• Les magasins de ramen à New York proposent une grande variété de menus. N'est-il pas culturellement approprié de simplement faire des ramen?
• C'est ennuyeux que le SVG d'udon tourne, il y a des avantages et des inconvénients

référence

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