Men-deploy aplikasi web Python Flask ke lingkungan fleksibel App Engine

Ringkasan

Dalam codelab ini, Anda akan mempelajari cara men-deploy aplikasi web Python Flask ke lingkungan fleksibel App Engine. Aplikasi contoh memungkinkan pengguna mengupload foto wajah seseorang dan mempelajari kemungkinan bahwa orang tersebut puas. Aplikasi ini menggunakan Google Cloud API untuk Vision, Storage, dan Datastore.

Tentang App Engine

Aplikasi Google App Engine mudah dibuat, mudah dikelola, dan mudah diskalakan karena kebutuhan traffic data dan penyimpanan Anda berubah. Dengan App Engine, tidak ada server yang harus dikelola. Anda cukup mengupload aplikasi dan aplikasi siap digunakan.

Aplikasi App Engine melakukan penskalaan otomatis berdasarkan traffic masuk. Load balancing, microservice, otorisasi, database SQL dan NoSQL, pemisahan traffic, logging, penelusuran, pembuatan versi, peluncuran dan roll back, serta pemindaian keamanan, semuanya didukung secara native dan sangat mudah disesuaikan.

Lingkungan Fleksibel App Engine mendukung semua bahasa pemrograman berikut: C#, Go, Java, Node.js, PHP, Python, dan Ruby. App Engine Fleksibel menjalankan aplikasi Anda dalam container Docker yang berjalan pada mesin virtual Google Compute Engine. Lingkungan Standar App Engine adalah opsi alternatif untuk bahasa tertentu termasuk Python. App Engine Standard menjalankan aplikasi Anda di lingkungan sandbox yang lebih ketat. Baca Memilih Lingkungan App Engine untuk informasi selengkapnya.

Yang akan Anda pelajari

  • Cara men-deploy aplikasi web sederhana ke Lingkungan Fleksibel App Engine
  • Cara mengakses library klien Google Cloud untuk Vision, Storage, dan Datastore
  • Cara menggunakan Google Cloud Console dan Google Cloud SDK untuk mengelola berbagai resource cloud
  • Cara menggunakan Cloud Shell

Yang Anda butuhkan

  • Pemahaman tentang Python
  • Pemahaman tentang editor teks Linux standar, seperti Vim, Emacs, atau Nano

Pembuatan Project

Jika belum memiliki Akun Google (Gmail atau Google Apps), Anda harus membuatnya. Login ke Google Cloud Platform console (console.cloud.google.com) dan buat project baru:

Ingat project ID, nama unik di semua project Google Cloud (maaf, nama di atas telah digunakan dan tidak akan berfungsi untuk Anda!) Project ID tersebut selanjutnya akan dirujuk di codelab ini sebagai PROJECT_ID.

Penagihan

Selanjutnya, Anda harus mengaktifkan penagihan di Cloud Console untuk menggunakan resource Google Cloud.

Menjalankan melalui codelab ini tidak akan menghabiskan biaya lebih dari beberapa dolar, tetapi bisa lebih jika Anda memutuskan untuk menggunakan lebih banyak resource atau jika Anda membiarkannya tetap berjalan.

Pengguna baru Google Cloud Platform memenuhi syarat untuk mendapatkan uji coba gratis senilai $300.

Meskipun Google Cloud dapat dioperasikan dari jarak jauh dari laptop Anda, dalam codelab ini, kita akan menggunakan Google Cloud Shell, lingkungan command line yang berjalan di Cloud. Mesin virtual berbasis Debian ini memuat semua alat pengembangan yang akan Anda perlukan (gcloud, python, virtualenv, pip, dan sebagainya), menawarkan direktori home tetap sebesar 5 GB, serta berjalan di Google Cloud sehingga sangat meningkatkan performa dan autentikasi jaringan. Ini berarti bahwa semua yang Anda perlukan untuk codelab ini adalah browser (ya, ini berfungsi di Chromebook).

Untuk mengaktifkan Google Cloud Shell, dari konsol developer, cukup klik tombol di sisi kanan atas (hanya perlu waktu beberapa saat untuk penyediaan dan koneksi ke lingkungan):

Setelah terhubung ke Cloud Shell, Anda akan melihat bahwa Anda sudah diautentikasi dan project sudah ditetapkan ke PROJECT_ID:

gcloud auth list
Credentialed accounts:
- <myaccount>@<mydomain>.com (active)
gcloud config list project
[core]
Project = <PROJECT_ID>

Jika project belum ditetapkan karena beberapa alasan, cukup berikan perintah berikut:

gcloud config set project <PROJECT_ID>

Mencari PROJECT_ID Anda? Periksa Project ID yang Anda gunakan di langkah-langkah penyiapan atau cari di dasbor konsol:

Di Cloud Shell pada command line, jalankan perintah berikut untuk meng-clone repositori GitHub:

git clone https://github.com/GoogleCloudPlatform/python-docs-samples.git

Ubah direktori menjadi python-docs-samples/codelabs/flex_and_vision:

cd python-docs-samples/codelabs/flex_and_vision

Sebelum kami dapat mulai menggunakan Vision, Storage, dan Datastore API, Anda harus mengaktifkan API dengan perintah berikut:

gcloud services enable vision.googleapis.com
gcloud services enable storage-component.googleapis.com
gcloud services enable datastore.googleapis.com

Untuk membuat permintaan ke Vision, Storage, dan Datastore API, Anda memerlukan kredensial akun layanan. Kredensial akun layanan dari project Anda dapat dibuat menggunakan fitur gcloud.

Tetapkan variabel lingkungan untuk PROJECT_ID Anda, menggantikan [YOUR_PROJECT_ID] dengan project ID Anda sendiri:

export PROJECT_ID=[YOUR_PROJECT_ID]

Buat Akun Layanan untuk mengakses Google Cloud API saat menguji secara lokal:

gcloud iam service-accounts create codelab \
  --display-name "My Codelab Service Account"

Berikan izin yang sesuai untuk Akun Layanan yang baru Anda buat:

gcloud projects add-iam-policy-binding ${PROJECT_ID} \
--member serviceAccount:codelab@${PROJECT_ID}.iam.gserviceaccount.com \
--role roles/owner

Setelah membuat Akun Layanan, buat kunci Akun Layanan:

gcloud iam service-accounts keys create ~/key.json \
--iam-account codelab@${PROJECT_ID}.iam.gserviceaccount.com

Perintah ini membuat kunci akun layanan yang disimpan dalam file JSON bernama key.json di direktori utama Anda.

Dengan menggunakan jalur absolut kunci yang dihasilkan, tetapkan variabel lingkungan untuk kunci akun layanan Anda di Cloud Shell:

export GOOGLE_APPLICATION_CREDENTIALS="/home/${USER}/key.json"

Anda dapat membaca selengkapnya tentang mengautentikasi Vision API.

Memulai Lingkungan Virtual dan Menginstal Dependensi

Buat lingkungan Python 3 yang terisolasi bernama env dengan virtualenv:

virtualenv -p python3 env

Masukkan virtualenv yang baru Anda buat, bernama env:

source env/bin/activate

Gunakan pip untuk menginstal dependensi untuk project Anda dari file requirements.txt:

pip install -r requirements.txt

File requirements.txt adalah daftar dependensi paket yang diperlukan untuk project Anda. Perintah di atas mendownload semua dependensi paket yang tercantum ke virtualenv.

Membuat Aplikasi App Engine

Berikutnya, buat instance App Engine menggunakan:

gcloud app create

Membuat Bucket Storage

Pertama, tetapkan variabel lingkungan CLOUD_STORAGE_BUCKET sama dengan nama PROJECT_ID Anda. (Sebaiknya beri nama bucket Anda sama dengan PROJECT_ID untuk tujuan kenyamanan).

export CLOUD_STORAGE_BUCKET=${PROJECT_ID}

Aplikasi kita menggunakan bucket Cloud Storage, yang harus Anda buat dari Cloud Shell dengan alat yang disebut gsutil. Jalankan perintah berikut, yang akan membuat bucket dengan nama yang sama seperti PROJECT_ID Anda.

gsutil mb gs://${PROJECT_ID}

Menjalankan Aplikasi

python main.py

Setelah aplikasi dimulai, klik ikon Pratinjau Web di toolbar Cloud Shell dan pilih "Preview pada port 8080."

Tab di browser Anda akan terbuka dan terhubung ke server yang baru saja Anda mulai. Anda akan melihat sesuatu seperti ini:

Screenshot 23-02-2017 pukul 19.22.50.png

Coba upload foto yang berisi wajah manusia. Klik tombol Choose File, pilih gambar dari komputer, lalu klik Submit.

Setelah mengupload foto, Anda akan melihat sesuatu seperti ini:

Screenshot 23-02-2017 pukul 19.32.08.png

Tata Letak Kode Contoh

Contoh memiliki tata letak berikut:

templates/
  homepage.html   /* HTML template that uses Jinja2 */
app.yaml          /* App Engine application configuration file */
main.py           /* Python Flask web application */
requirements.txt  /* List of dependencies for the project */

main.py

File Python ini adalah aplikasi web Flask. Aplikasi ini memungkinkan pengguna mengirimkan foto (sebaiknya wajah), yang disimpan di Cloud Storage dan dianalisis menggunakan fitur deteksi wajah dari Cloud Vision API. Informasi penting tentang setiap foto disimpan di Datastore, database NoSQL Google Cloud Platform, tempat informasi tersebut diakses setiap kali pengguna mengunjungi situs.

Aplikasi ini menggunakan library klien Google Cloud Platform untuk Storage, Datastore, dan Vision. Library klien ini memudahkan untuk mengakses Cloud API dari bahasa pemrograman favorit Anda.

Mari kita lihat beberapa cuplikan penting kode tersebut.

Bagian impor di atas adalah tempat kita mengimpor berbagai paket yang diperlukan untuk kode kita. Berikut cara mengimpor library klien Google Cloud untuk Datastore, Storage, dan Vision:

from google.cloud import datastore
from google.cloud import storage
from google.cloud import vision

Berikut adalah kode untuk tindakan yang terjadi saat pengguna mengunjungi URL root situs. Kita membuat objek klien Datastore, yang digunakan untuk mengakses library klien Datastore. Selanjutnya, kita menjalankan kueri di Datastore untuk entitas jenis Faces. Terakhir, kita merender template HTML, meneruskan image_entities yang diekstrak dari Datastore sebagai variabel.

@app.route('/')
def homepage():
    # Create a Cloud Datastore client.
    datastore_client = datastore.Client()

    # Use the Cloud Datastore client to fetch information from Datastore about
    # each photo.
    query = datastore_client.query(kind='Faces')
    image_entities = list(query.fetch())

    # Return a Jinja2 HTML template and pass in image_entities as a parameter.
    return render_template('homepage.html', image_entities=image_entities)

Mari kita lihat cara entitas disimpan ke Datastore. Datastore adalah solusi database NoSQL Google Cloud. Data disimpan dalam objek yang disebut entitas. Setiap entity diberikan kunci pengidentifikasi yang unik, yang dapat dibuat menggunakan string jenis dan nama kunci. Jenis adalah bucket organisasi untuk jenis entitas. Misalnya, kita mungkin ingin menyiapkan jenis untuk Foto, Orang, dan Hewan.

Setiap entity dapat memiliki beberapa properti yang ditentukan developer, yang dapat memiliki nilai dari jumlah jenis, termasuk bilangan bulat, float, string, tanggal, atau data biner.

    # Create a Cloud Datastore client.
    datastore_client = datastore.Client()

    # Fetch the current date / time.
    current_datetime = datetime.now()

    # The kind for the new entity.
    kind = 'Faces'

    # The name/ID for the new entity.
    name = blob.name

    # Create the Cloud Datastore key for the new entity.
    key = datastore_client.key(kind, name)

    # Construct the new entity using the key. Set dictionary values for entity
    # keys blob_name, storage_public_url, timestamp, and joy.
    entity = datastore.Entity(key)
    entity['blob_name'] = blob.name
    entity['image_public_url'] = blob.public_url
    entity['timestamp'] = current_datetime
    entity['joy'] = face_joy

    # Save the new entity to Datastore.
    datastore_client.put(entity)

Library klien Storage and Vision dapat diakses secara terprogram dengan cara yang sama seperti Datastore. Anda dapat membuka file main.py sendiri menggunakan vim, emacs, atau nano untuk menjelajahi semua kode contoh.

Pelajari lebih lanjut Flask di http://flask.pocoo.org/.

Pelajari Library Klien lebih lanjut di https://googlecloudplatform.github.io/google-cloud-python/.

halaman beranda.html

Framework web Flask memanfaatkan Jinja2 sebagai mesin template. Hal ini memungkinkan kita meneruskan variabel dan ekspresi dari main.py ke homepage.html yang akan diganti dengan nilai setelah halaman dirender.

Pelajari lebih lanjut tentang Jinja2 di http://jinja.pocoo.org/docs/2.9/templates/.

Template HTML Jinja2 ini menampilkan formulir bagi pengguna untuk mengirim foto ke database. Fitur ini juga menampilkan setiap gambar yang dikirimkan sebelumnya beserta nama filenya, tanggal/waktu upload, dan kemungkinan wajah yang terdeteksi oleh Vision API akan puas.

halaman beranda.html

<h1>Google Cloud Platform - Face Detection Sample</h1>

<p>This Python Flask application demonstrates App Engine Flexible, Google Cloud
Storage, Datastore, and the Cloud Vision API.</p>

<br>

<html>
  <body>
    <form action="upload_photo" method="POST" enctype="multipart/form-data">
      Upload File: <input type="file" name="file"><br>
      <input type="submit" name="submit" value="Submit">
    </form>
    
  </body>
</html>

App Engine Flexible menggunakan file bernama app.yaml untuk mendeskripsikan konfigurasi deployment aplikasi. Jika file ini tidak ada, App Engine akan mencoba menebak konfigurasi deployment. Namun, sebaiknya Anda memberikan file ini.

Selanjutnya, Anda akan memodifikasi app.yaml menggunakan editor vim, nano, atau emacs pilihan Anda. Kita akan menggunakan editor nano:

nano app.yaml

app.yaml

runtime: python
env: flex
entrypoint: gunicorn -b :$PORT main:app

runtime_config:
    python_version: 3

env_variables:
    CLOUD_STORAGE_BUCKET: <your-cloud-storage-bucket>

Ini adalah konfigurasi dasar yang diperlukan untuk men-deploy aplikasi Flex App Engine Python 3. Anda dapat mempelajari lebih lanjut cara mengonfigurasi App Engine di sini.

Setelah membuka app.yaml, ganti < your-cloud-storage-bucket > dengan nama bucket Cloud Storage Anda. (Jika Anda lupa nama bucket Cloud Storage, salin ID Project GCP dari Qwiklabs yang sama). Bagian env_variables menyiapkan variabel lingkungan yang akan digunakan di main.py setelah aplikasi di-deploy.

Anda sekarang dapat menutup penyimpanan dan menutup file di nano menggunakan (Ctrl + x), yang akan meminta:

Tangkapan Layar 17-02-2017 pukul 16.47.12.png

Ketik huruf y lalu tekan tombol ENTER sekali lagi untuk mengonfirmasi nama file untuk perintah berikut:

Tangkapan Layar 24-02-2017 pukul 16.18.23.png

Deploy aplikasi Anda di App Engine dengan menggunakan gcloud:

gcloud app deploy

Setelah aplikasi di-deploy, Anda dapat membukanya dengan membuka URL https://< PROJECT_ID >.appspot.com di browser web Anda.

Ringkasan

Pada langkah ini, Anda menyiapkan aplikasi web Python dan men-deploy-nya ke lingkungan App Engine Flexible.

Anda telah mempelajari cara menulis dan men-deploy aplikasi web Fleksibel App Engine pertama Anda.

Pembersihan

Agar tidak menimbulkan biaya pada akun Google Cloud Platform Anda untuk resource yang digunakan di panduan memulai ini:

  • Buka Cloud Platform Console.
  • Pilih project yang ingin Anda nonaktifkan, lalu klik ‘Delete' di bagian atas: tindakan ini akan menjadwalkan penghapusan project.

Pelajari Lebih Lanjut

Lisensi

Karya ini dilisensikan berdasarkan Lisensi Umum Creative Commons Attribution 2.0.