01204223/deployment

หน้านี้เป็นส่วนหนึ่งของ 01204223

เราจะฝึกการนำแอพที่เราสร้างไปติดตั้งในระบบเพื่อใช้งานจริง ถ้าเราไม่ได้มีเซิร์ฟเวอร์เอง การใช้บริการ cloud deployment ก็เป็นอีกทางเลือกที่มีประโยชน์ หลายครั้งยังทำให้ระบบที่เราทำขึ้นรองรับโหลดได้หลากหลาย โดยแทบไม่ต้องปรับแก้

วิธีการที่มาตรฐานที่สุดคือการใช้ container แต่ในวิชานี้เราไม่มีเวลาศึกษาเรื่องดังกล่าว เราจึงจะใช้การติดตั้งแบบอัตโนมัติที่มีการสร้าง container ถ้าเราใช้โครงสร้าง project ตามรูปแบบมาตรฐาน

เนื่องจากแอพของเรามีสองส่วน backend (ที่จะต้องทำงานบนเซิร์ฟเวอร์) และ frontend (ที่เมื่อ react build เสร็จแล้ว จะเป็นไฟล์ static ที่ส่งให้บราวเซอร์ได้เลย) จึงมีสองแนวทางในการ deploy คือการ deploy สองส่วนแยกกัน หรือจะรวมสองส่วนเข้าด้วยกันเพื่อ deploy ไปด้วยกัน เพื่อความง่ายเราจะใช้แบบที่สอง

Deploy ไปยัง Google cloud run

ปรับโค้ด

เราต้องปรับโค้ดของเราให้พร้อมที่จะนำไป deploy บน Google cloud run เสียก่อน โดยเครื่องมือที่เราใช้จะ copy โค้ดทั้งหมดของเราไปที่ระบบของ google และสร้าง container image โดยติดตั้ง package ตาม requirements.txt และเรียกให้ไฟล์ main.py ทำงาน ดังนี้เราต้องจัดการดังนี้

• ทำให้การติดตั้ง package ทำงานได้สมบูรณ์ (ปรับ requirements.txt)
• ทำให้ main.py ทำงานได้ (พร้อมกับ config ต่าง ๆ)
• รวมโค้ด frontend จาก react ที่ปรับ api url แล้ว, และเพิ่มโค้ดให้ flask server เป็นคนแจกจ่าย frontend code

ขั้นตอนข้างต้นมีรายละเอียดคร่าว ๆ ดังนี้

• โปรแกรมหลักที่จะถูกเรียกทำงานคือ main.py เราต้องปรับให้โปรแกรมดังกล่าวทำงานได้เลย (แทนที่เดิมเราเคยเรียก flask run)
• เดิมเราใช้ package mysqlclient ในการเชื่อมต่อกับ MySQL แต่การติดตั้ง package ดังกล่าวมีการคอมไพล์โค้ดภาษาซีซึ่งใน container ไม่ได้มีมาด้วย เราจะต้องเปลี่ยนไปใช้ package PyMySQL ที่เป็นไลบรารี python ล้วนในการเชื่อมต่อ
  • เราต้องติดตั้ง PyMySQL
  • แก้ requirements.txt
  • ปรับ URI ของ database
• ต้องเปลี่ยนการจัดการ config ให้โหลดจากไฟล์ local_config.py
  • อย่าลืมปรับ .gitignore
• เราต้อง build โค้ดส่วน frontend และนำมาใส่ไดเร็กทอรี backend
  • ต้องปรับ URL endpoint ด้วย
• เพิ่มโค้ดใน Flask ให้ serve ไฟล์ frontend ด้วย

เราจะทำไปทีละขั้น

1. ปรับ main.py ให้ทำงานได้ และโหลด config จากไฟล์

if __name__ == "__main__":
    app.run(debug=True, host="0.0.0.0", port=int(os.environ.get("PORT", 8080)))

CONFIG_DB_URI = "mysql+pymysql://USERNAME:PASSWORD@p1.secondtrain.org/DBNAME"
CONFIG_JWT_SECRET = 'fdslkfjsdlkufewhjroiewurewrew'

try:
    from local_config import CONFIG_DB_URI, CONFIG_JWT_SECRET
except:
    CONFIG_DB_URI = 'sqlite:///todos.db'
    CONFIG_JWT_SECRET = 'fdslkfjsdlkufewhjroiewurewrew'

app.config['SQLALCHEMY_DATABASE_URI'] = os.getenv('SQLALCHEMY_DATABASE_URI', CONFIG_DB_URI)
app.config['JWT_SECRET_KEY'] = os.getenv('JWT_SECRET_KEY', CONFIG_JWT_SECRET)

2. แก้ react API URL และตั้งค่าการ build

export default defineConfig({
  // ...
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000/',
        changeOrigin: true,
      },
    },
  },
  build: {
    outDir: '../backend/frontend-static',
    emptyOutDir: true,
  },
})

function App() {
  const TODOLIST_API_URL = '/api/todos/';
  const TODOLIST_LOGIN_URL = '/api/login/';
  //...
}

3. ปรับให้ flask แจกจ่ายไฟล์ของ react

from flask import send_from_directory

# Catch-all route: if the requested file exists in frontend-static, serve it;
# otherwise fall back to serving the React app's index.html.
@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def serve_frontend(path):
    static_dir = os.path.join(app.root_path, 'frontend-static')
    # If a specific file is requested and exists, serve it
    if path and os.path.isfile(os.path.join(static_dir, path)):
        return send_from_directory('frontend-static', path)
    # Otherwise serve the app entrypoint
    return send_from_directory('frontend-static', 'index.html')

Deploy

gcloud run deploy --source .

Service name (backend):  practicum68-backend
Please specify a region:
 ...
 [8] asia-south2
 [9] asia-southeast1
 [10] asia-southeast2
 [11] asia-southeast3
 [12] australia-southeast1
 [13] australia-southeast2
 ...
Please enter numeric choice or text value (must exactly match list item): 11

Building using Buildpacks and deploying container to Cloud Run service [practicum68-backend] in project [practicum-68] region [asia-southeast3]
✓ Building and deploying... Done.                                                                                   
  ✓ Validating configuration...                                                                                     
  ✓ Uploading sources...                                                                                            
  ✓ Building Container... Logs are available at [https://console.cloud.google.com/cloud-build/builds;region=asia-sou
theast1/xxxxxxxx?project=yyyyyyyyyyyy].                                               
  ✓ Creating Revision...                                                                                            
  ✓ Routing traffic...                                                                                              
Done.                                                                                                               
Service [practicum68-backend] revision [practicum68-backend-00007-cx2] has been deployed and is serving 100 percent of traffic.
Service URL: https://practicum68-backend-XXXXXXXXX.asia-southeast3.run.app

Deploy ไปยัง Microsoft Azure

สมัคร Azure

ก่อนอื่นไปสมัครสมาชิก Microsoft azure ก่อน ที่ https://azure.microsoft.com/en-us/products/app-service/web จากที่ทดลอง ไม่สามารถใช้บัญชี @live.ku.th ได้

ระบบจะให้สมัครสมาชิก ให้เลือก free trial

ต้องกรอกข้อมูลให้เรียบร้อย ให้เลือก Free trial (อย่าเลือก Pay-as-you-go) ต้องใส่ข้อมูลบัตรเครดิตไว้ก่อนด้วย ถ้าทำเสร็จเรียบร้อยจะได้หน้าจอประมาณนี้

= ติดตั้งเครื่องมือ CLI: az

จากนั้นในการ deploy เราสามารถใช้ web interface ก็ได้ แต่เราจะใช้ cli แทน โดยให้ติดตั้ง Azure CLI โดยไปที่ https://learn.microsoft.com/en-us/cli/azure/?view=azure-cli-latest แล้วดำเนินการตามส่วน Installation

ถ้าติดตั้งเรียบร้อยจะสามารถเรียก cli ชื่อ az ได้

az