[PYTHON] Reagieren und Kolben zu GCP

Erstellen Sie mithilfe der Yelp-API, für die Sie GCP verwenden möchten, eine gesteuerte Testsite

Ich wollte einen API-Testserver mit GCP erstellen Sprache: Reagieren, Flasche

Ich dachte, ich sollte es mit einer API von irgendwoher zeichnen, aber es ist langweilig (** Udon lernen ** Links, um über udon [wiki] zu sprechen (https://ja.wikipedia.org/wiki/) % E3% 81% 86% E3% 81% A9% E3% 82% 93)) Yelp API使ってこんな感じにした

Yelp api Ich habe Yelp API verwendet, weil jeder japanische Restaurants kennt und ich denke, es ist eine gute Idee, einen Blick nach Übersee zu werfen.

Einen API-Schlüssel zu bekommen ist einfach. Wenn Sie zu Yelp-Entwicklern gehen und sich bei Ihrem Google- oder Facebook-Konto registrieren, wird es sofort ausgestellt.

Flask

Verzeichnisaufbau

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)

Im Fall von root ('/') ist das Ramen-Ranking in New York standardmäßig festgelegt.

Einstellungen für Kolben und Gunicorn in config Das Wichtigste ist, es in die env-Variable zu setzen

# 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

Wenn Sie ** 0.0.0.0:8080 ** über Ihren Browser eingeben (Firefox oder Chrome)

Das Ergebnis wird jetzt mit json ausgespuckt

Registriert bei GCR (Google Container Registry)

Kolben in Docker konvertieren und in GCR hochladen

Das Dockerfile sieht so aus

# 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

** Verwenden Sie in der Produktion API_KEY dotenv, um es in config.py zusammenzustellen. *

• Installieren Sie gcloud lokal (doc)
• Aktivieren Sie die GCR-Abrechnung

Als nächstes können Sie sich einfach registrieren, indem Sie den folgenden Befehl eingeben

#!/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

So was

GCE(Google Compute Engine) Erstellen Sie eine Instanz auf dem Bildschirm der GCP-Konsole

Da die Maschinenspezifikation ein Test ist, machen wir sie zur schwächsten und zur schwächsten!

Wenn Sie mit Docker sofort vom Container aus bereitstellen möchten, vergessen Sie nicht, Folgendes und das Container-Image zu überprüfen

Das gleiche Ergebnis erhalten Sie, indem Sie die externe IP des GCE VM-Instanzbildschirms auf * http: [IP] * setzen! Wenn Sie kein SSL-Zertifikat haben, müssen Sie die externe IP auf * http * anstelle von * https * setzen.

Notieren Sie sich diese IP-Adresse, wie sie von React aufgerufen wird

Vorderseite ist Reagieren

Einfach mit einer schönen Kesselplatte namens create-react-app

# app-Name ist dein Lieblingsname
npx create-react-app app-name

App.js ist meistens eine Vorlage, der Unterschied zwischen dem Aufrufen von Bildern, Links und Yelp.js-Komponenten

// App.js

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

import Yelp from './Yelp' //← das

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://Externe IP, die ich zuvor notiert habe/'
    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

Wenn Sie es anschließend lokal starten, wird ein Ramen-Bild angezeigt

#Anlaufen
yarn start

Klicken Sie auf Ihr Lieblingsbild, um zum Yelp-Link zu gelangen und weitere Details zu erhalten

• Ramen-Läden in New York bieten eine große Auswahl an Menüs. Ist es kulturell nicht angemessen, nur Ramen zu machen?
• Es ist ärgerlich, dass sich die SVG von Udon dreht, es gibt Vor- und Nachteile

Referenz

Führen Sie ein Docker-Image aus, das in der Container Registry (GCR) auf GCE registriert ist