Videos → Self-host Supabase & DirectAdmin

Event Supabase Meetup Bangkok 1.0
Speaker

Pornpat Paethong

Description

Learn how to seamlessly integrate a modern Supabase backend with a legacy system in this insightful talk by Pornpat, a software engineer from DevForward.tech. Discover a practical approach to leveraging Supabase's features like authentication and edge functions while maintaining the functionality of your existing infrastructure. This session explores a real-world project scenario, offering valuable techniques for bridging the gap between legacy systems and modern development practices. See how Docker, Docker Compose, DirectAdmin, and nginx play a key role in this integration strategy, allowing you to modernize your application architecture without disrupting existing workflows. Gain valuable insights into building a more efficient and scalable system by combining the power of Supabase with the reliability of your legacy components.

Chapters

  • Introduction and the Challenge of Integrating Legacy Systems 0:00
  • Why Supabase Might Be the Solution for Your Backend Needs 0:27
  • The Problem with Traditional Architectures for Legacy Integration 0:47
  • Merging Legacy Systems with Supabase: A Seamless Approach 1:53
  • How the Integrated Architecture Works with Supabase and DirectAdmin 2:13
  • Setting Up Docker and Docker Compose for Supabase on DirectAdmin 3:01
  • Accessing Supabase Features and the Role of DirectAdmin in Configuration 4:08
  • Leveraging DirectAdmin's Nginx Configuration for API Integration 4:54
  • The Big Picture: Connecting Supabase and Legacy Systems via DirectAdmin 5:57
  • Accessing Supabase with a Domain Name and Managing HTTPS with DirectAdmin 6:23
  • Using Edge Functions to Call the Legacy Report Generator through Supabase 7:10
  • How the Mobile Application Interacts with the Integrated System 8:24
  • Conclusion and Thank You 8:56

Transcript

คำบรรยายต่อไปนี้อาจไม่ถูกต้องทั้งหมด หากคุณพบข้อผิดพลาดใดๆ คุณสามารถช่วยแก้ไขข้อผิดพลาดได้บน GitHub

Introduction and the Challenge of Integrating Legacy Systems0:00

สวัสดีครับทุกคน ผมพรพัฒน์ จาก DevForward เป็น Software Engineer ครับ ขออภัยในความไม่สะดวกทางเทคนิคด้วยนะครับ โอเค สไลด์ต่อไปครับ ปกติแล้ว ถ้าคุณต้องการสร้างแอปพลิเคชันมือถือหรือเดสก์ท็อป คุณต้องมีส่วนนี้ใช่ไหมครับ ในกรณีนี้ เป็นโปรเจกต์จริง ในกรณีนี้ ผมใช้ Flutter

Why Supabase Might Be the Solution for Your Backend Needs0:27

สิ่งที่สองที่คุณต้องคิดคือ backend คุณต้องสร้าง API ดังนั้น Supabase อาจเป็นคำตอบ

ใช่ คุณเตรียมที่จะใช้ Supabase สิ่งที่คาดหวังคือ คุณต้องการดึงข้อมูลบางอย่างผ่าน API จาก database

The Problem with Traditional Architectures for Legacy Integration0:47

แต่ในกรณีนี้ คุณมีระบบเดิม ผมหมายถึง ระบบเดิม เช่น ระบบรายงาน

สไลด์ต่อไปครับ นี่เป็นเหมือนโมดูลแบบดั้งเดิม

มีคนในบริษัทสร้างมันขึ้นมาเมื่อนานมาแล้ว และมันยังคงมีประโยชน์อยู่ ดังนั้น ในกรณีนี้ โมดูลนี้มีอยู่แล้ว แต่โมดูลใหม่ยังไม่มี ดังนั้น ผมอยากจะใช้ Supabase ในกรณีนี้

ใช่ ใช่ ใช่ ในกรณีนี้ ใช่ บางคนคิดว่าคุณสามารถใช้สถาปัตยกรรมนี้ได้ ก็คือถ้าคุณต้องการ master data ก็ร้องขอผ่าน API แรก และถ้าคุณต้องการสร้างไฟล์รายงาน ก็เรียก API ที่สอง

คุณสามารถทำได้ แต่สำหรับการ authentication การกำหนดสิทธิ์ต่างๆ คุณต้องควบคุมสิ่งนี้

Merging Legacy Systems with Supabase: A Seamless Approach1:53

ในกรณีนี้ ผมพยายามรวมเข้าด้วยกัน ระบบนี้ทำงานบน DirectAdmin อยู่แล้ว มันเป็นระบบที่มีอยู่แล้ว ดังนั้น วิธีแก้ปัญหาของผมคือการรวมสองสิ่งเข้าด้วยกัน และตั้งค่าให้ทำงานร่วมกันอย่างราบรื่น นี่คือประเด็น ดังนั้น สไลด์ต่อไปครับ

How the Integrated Architecture Works with Supabase and DirectAdmin2:13

โอเค มาถึงรูปนี้ สำหรับแอปพลิเคชันมือถือ แอปพลิเคชันเดสก์ท็อป หรือแอปพลิเคชันใดๆ คุณสามารถรับ master data หรือสิ่งอื่นๆ ผ่าน Supabase และคุณยังสามารถสร้าง edge function และเรียก edge function ผ่าน Supabase ได้ และคุณสามารถใช้ฟีเจอร์ Supabase เช่น JWT authentication ได้อย่างที่คุณได้เรียนรู้ในหัวข้อก่อนหน้านี้

และคุณยังสามารถเก็บระบบเดิมไว้เบื้องหลังได้

ในการทำเช่นนี้ เราจะตั้งค่าเล็กน้อย

Setting Up Docker and Docker Compose for Supabase on DirectAdmin3:01

อย่างแรก เรามีเซิร์ฟเวอร์สำหรับ DirectAdmin อยู่แล้ว ดังนั้น สองสิ่งที่เราต้องทำคือ อย่างแรก ติดตั้ง Docker ลงในเซิร์ฟเวอร์ DirectAdmin และคุณใช้ Docker Compose เพื่อติดตั้ง Supabase มันง่ายถ้าคุณทำตามขั้นตอนบนเว็บไซต์ ต่อไปครับ ใช่ คุณต้องทำสองสิ่ง โอเค อันนี้ผมคัดลอกมาจากเอกสารประกอบของ Supabase ดังนั้น คุณเพียงแค่ทำตามนี้ อย่างแรก เพียงไปที่เซิร์ฟเวอร์ DirectAdmin ของคุณ ผมหมายถึง เซิร์ฟเวอร์ VM ของคุณ จากนั้นคุณ clone repo ของ Supabase ประการที่สอง คุณไปที่โฟลเดอร์ Docker คุณคัดลอกไฟล์ environment และทำตามคำแนะนำในเอกสารประกอบ ตัวอย่างเช่น private key

และสิ่งสุดท้าย เพียงแค่ Docker Compose pull และ Docker up โอเค ต่อไป

Accessing Supabase Features and the Role of DirectAdmin in Configuration4:08

จากจุดนี้ คุณจะได้รับทุกสิ่งที่ Supabase สามารถทำได้ผ่าน API นี้

dashboard คุณสามารถเข้าถึงได้ผ่าน IP ของคุณและพอร์ต 8000 คุณสามารถเข้าถึง dashboard ได้ และ API อื่นๆ ตัวอย่างเช่น REST API สำหรับการเชื่อมต่อกับ database การ authentication การจัดเก็บข้อมูล real-time และสุดท้ายคือ function ถ้าคุณเขียน edge function และใส่ไว้ใน volume ของ Supabase คุณสามารถเรียก local function ผ่าน Supabase API ได้เช่นกัน

Leveraging DirectAdmin's Nginx Configuration for API Integration4:54

โอเค และนี่คือจุดที่ DirectAdmin เข้ามาช่วย เพราะ DirectAdmin สามารถควบคุมไฟล์ config ได้ เพราะอันนี้มีอยู่แล้ว ดังนั้น ผมจึงใช้ DirectAdmin เพื่อแก้ไข nginx ที่เชื่อมต่อ Supabase API และ DirectAdmin API นี่คือสคริปต์ แต่มันง่ายมาก

คุณเพียงแค่ดูสองสิ่ง สิ่งแรก คุณเพียงแค่ map ตำแหน่งของแต่ละ API ของ Supabase แล้วคุณ forward ทุกอย่างไปที่ Kong Kong อยู่ที่นี่ มันอยู่บนพอร์ต 8000 ดังนั้น คุณทำเช่นนี้ ซึ่งหมายความว่าคุณสามารถเรียกทุกอย่างจาก Supabase API ได้แล้ว แต่อันนี้เป็นพิเศษสำหรับระบบเดิม คุณเพียงแค่ remap มันเล็กน้อย ใช่ ต่อไป

The Big Picture: Connecting Supabase and Legacy Systems via DirectAdmin5:57

โอเค ภาพรวมอยู่ที่นี่ ใช่ ปกติแล้ว DirectAdmin สามารถควบคุมอันนี้ได้ มันเป็นระบบเดิม แต่มันง่ายมากถ้าคุณต้องการสร้าง sub-website หรือ sub-system คุณจะทำเป็นเว็บโฮสติ้งด้วยวิธีแบบดั้งเดิมก็ได้

Accessing Supabase with a Domain Name and Managing HTTPS with DirectAdmin6:23

แต่อันนี้เป็นแบบใหม่ ที่เราเชื่อมต่อก่อนหน้านี้

ครับ โอเค ตอนนี้ คุณสามารถเชื่อมต่อกับ Supabase ด้วยชื่อโดเมนได้ เพราะโดยพื้นฐานแล้ว Supabase ให้เฉพาะที่อยู่ IP คุณสามารถเข้าถึงได้ผ่านที่อยู่ IP แต่เมื่อคุณกำหนดค่าด้วยวิธีนี้ คุณสามารถเชื่อมต่อ Supabase ผ่านโดเมนได้ เพราะ DirectAdmin จะจัดการโดเมน DNS และ HTTPS และยัง forward ทุกอย่างไปยัง container ของ Supabase ดังนั้น คุณสามารถเข้าถึงได้ และคุณสามารถเห็น dashboard ที่นี่ และต่อไป

Using Edge Functions to Call the Legacy Report Generator through Supabase7:10

นี่คือ edge function เพราะคุณต้องการเรียกตัวสร้างรายงาน มันเป็นไฟล์ PDF แต่ไฟล์ PDF ควรอยู่เบื้องหลัง Supabase API ดังนั้น ในอันนี้ เราเขียนสคริปต์ขนาดเล็กเพื่อรับคำขอผ่าน Supabase แล้วส่งต่อไปยังระบบเดิม

แบบนี้ นี่คือวิธีที่คุณเรียกระบบเดิมตามปกติ

แล้วคุณส่ง header authorization ไปยังระบบเดิม และถ้าการตอบสนองของระบบเดิมไม่ใช่ 200 — สไลด์ต่อไปครับ คุณเพียงแค่ส่งทุกอย่างกลับเป็นการตอบสนอง ด้วยวิธีนี้ คุณสามารถร้องขอไฟล์ PDF ผ่าน Supabase API ได้เช่นกัน ทุกอย่างดูเหมือนว่าจะเรียกใช้งานผ่าน Supabase คุณไม่สามารถเข้าถึง API เบื้องหลังได้ตรงๆ

How the Mobile Application Interacts with the Integrated System8:24

โอเค และนี่คือแอปพลิเคชัน หรือแอปพลิเคชันมือถือ ที่แสดงบนมือถือหรือแอปพลิเคชัน ใช่ พนักงานใช้มัน และนี่คือรายงาน ถ้าคุณเรียก API สำหรับแอปพลิเคชันมือถือ คุณจะได้รับไฟล์ PDF และคุณไม่จำเป็นต้องสนใจระบบเบื้องหลังที่เชื่อมต่อกับระบบเดิมนี้เลย คุณเพียงแค่ส่ง ID หรือข้อมูลที่จำเป็นให้มันก็พอ

Conclusion and Thank You8:56

ใช่ แค่นี้แหละ

ขอบคุณครับ

Edit metadata on GitHub