1 of 47

Prototype Deployment

การส่งออกโปรเจคไปใช้งานจริง ฉบับง่ายมากกกก!

by Uncle Engineer

2 of 47

AGENDA

Topic 1: มารู้จัก streamlit กันก่อนเลย

​

Topic 2: Deployโปรเจค ฉบับ ‘ฉีกซอง พร้อมปรุง กิน!’ ด้วย Streamlit Cloud

​

What We’ll Learn Today

Topic 3: Deployโปรเจค ฉบับ ‘มือโปรผ่าน AWS EC2’

​

Topic 4: Deployโปรเจค ฉบับ ‘cloud สาย dev’ ของ DigitalOcean

​

Topic 5: จดโดเมนเนมเปิดเป็นเว็บไซต์ให้บริการแก่สาธารณชน

3 of 47

Topic 1: มารู้จัก streamlit กันก่อนเลย

​

4 of 47

Steamlit คือ?

steamlit คือ ไลบรารี python ที่ใช้สร้าง Web application สาย Data ได้รวดเร็วที่สุด

​

  • ไม่ต้องเขียนเว็บไซต์เป็น
  • ไม่ต้องเขียน html, css
  • ไม่ต้องเขียน Javascript

​

เพียงแค่เขียน Python เป็น

ก็เพียงพอสำหรับการสร้าง

โปรเจค Streamlit แล้ว! ลุย..

5 of 47

ติดตั้ง steamlit + สร้างไฟล์ app.py

  • ติดตั้ง streamlit เพียงแค่เปิด cmd / terminal

​

pip install streamlit

​

  • สร้างไฟล์ app.py ในโฟลเดอร์โปรเจค

​

​

​

​

*** ในบทที่ 8 แนะนำให้ใช้ Python official แทนการใช้ผ่าน Jupyter เพราะตอน deploy ขึ้น Server จะไม่มี Jupyter ให้ใช้งาน

6 of 47

เริ่มเขียนโปรแกรม app.py

  • ทดลองสร้างตารางอย่างง่าย
  • สร้าง DataFrame
  • st.write(‘ข้อความ’)
  • st.write(df) #สร้างตาราง

import streamlit as st

​

import pandas as pd

df = pd.DataFrame({

'first column': [1, 2, 3, 4],

'second column': [10, 20, 30, 40]

})

​

st.write("Here's our first table:")

st.write(df)

7 of 47

run app.py

  • เปิด cmd / git bash / terminal
  • cd เข้าไปยังโฟลเดอร์โปรเจค
  • คำสั่งที่ใช้รัน streamlit คือ…

​

python -m streamlit run app.py

​

หรือ

​

streamlit run app.py

8 of 47

โปรเจค streamlit แรกพร้อมใช้งาน!

  • streamlit จะเปิดเว็บบราวเซอร์ให้อัตโนมัติ
  • Local URL : เปิดในเว็บบราวเซอร์ได้เลย
  • Network URL: ใช้คอมฯ หรือมือถือที่อยู่ใน network เดียวกัน เปิดดูได้เลย

9 of 47

พล็อตกราฟเส้นด้วย line_chart

  • st.line_chart() ใช้สำหรับพล็อตกราฟ

import streamlit as st

import numpy as np

import pandas as pd

​

chart_data = pd.DataFrame(

np.random.randn(20, 3),

columns=['a', 'b', 'c'])

​

st.line_chart(chart_data)

​

10 of 47

ผลลัพธ์ line_chart

  • กราฟเป็นแบบ interactive graph
  • ขขายด้วย scroll mouse
  • บันทึกภาพ SVG / PNG
  • ขยายกราฟ Fullscreen ได้

11 of 47

สร้าง app เกี่ยวกับแผนที่

  • ใช้ st.map ในการพล็อตแผนที่ได้
  • พิกัด กทม. 13.76514, 100.53829

import streamlit as st

import numpy as np

import pandas as pd

​

map_data = pd.DataFrame(

np.random.randn(1000, 2) / [50, 50] + [13.76514, 100.53829],

columns=['lat', 'lon'])

​

st.map(map_data)

12 of 47

สร้าง app เกี่ยวกับแผนที่

  • ใช้ st.map ในการพล็อตแผนที่ได้

13 of 47

Topic 2: Deployโปรเจค ฉบับ ‘ฉีกซอง พร้อมปรุง กิน!’ ด้วย Streamlit Cloud

​

14 of 47

อัพโหลดไฟล์ขึ้น github

  • สร้าง repository ใหม่
  • upload file: app.py ขึ้น github

15 of 47

เตรียมพร้อมไฟล์ app.py

  • เตรียมพร้อม repository
  • อัพโหลดไฟล์ app.py ให้เรียบร้อย

16 of 47

Sign in ด้วย google / github

  • เปิดเว็บ https://share.streamlit.io/
  • Sign in ด้วย google

​

17 of 47

จำเป็นต้อง Authorize ด้วย github

  • หากต้องการใช้ streamlit cloud จำเป็นต้องมี github และต้อง Authorize ให้ streamlit สามารถเข้าถึงโปรเจคได้

​

18 of 47

สร้างแอพใหม่

สร้าง App ใหม่เพื่อเริ่มต้นโปรเจค

​

> New app

> Connect to Github

19 of 47

กรอกรายละเอียด

  • พิมพ์ชื่อ Repository
    • ชื่อuser/ชื่อrepo
  • Branch : main
  • Main file path
    • app.py
  • จากนั้นกด Deploy!

20 of 47

รอสักครู่

  • ระหว่างนี้ streamlit

จะดำเนินการเองอัตโนมัติ

​

​

21 of 47

สำเร็จ!

  • เรียบร้อย ตอนนี้โปรเจคถูกอัพโหลดเรียบร้อยแล้ว
  • กดปุ่ม Share ด้านขวาบน

​

22 of 47

ตั้งค่าการแชร์

  • เลือก Make this app public
  • จากนั้น Copy link เผยแพร่ได้ทันที

23 of 47

Topic 3: Deployโปรเจค ฉบับ ‘มือโปรผ่าน AWS EC2’

24 of 47

EC2 คือ?

AWS EC2 คือ Elastic Compute Cloud หรือ Virtual Server ที่รันอยู่บนคลาวด์ สามารถปรับเปลี่ยนสเปคได้ตลอดเวลา

​

อธิบายให้เห็นภาพชัดๆ คือ EC2 เหมือน Server ทั่วไป ที่สามารถติดตั้ง OS สำหรับให้บริการเว็บไซต์หรือใช้รันโปรแกรมได้ เพียงแค่เช่าใช้บริการตามที่เราใช้งาน Pay โดยไม่ต้องลงทุนซื้อ Hardware เองเหมือน Server

25 of 47

การใช้งาน EC2

1 - ลงทะเบียน aws.amazon.com

2- สร้าง EC2 Instance

3- ใช้ซอฟแวร์ SSH (Secure Shell) เช่น PuTTY หรือ คำสั่ง ssh ของ mac ในการพิมพ์คำสั่งควบคุม EC2

4- ใช้ซอฟแวร์ประเภท FTP ในการอัพโหลด/ดาวโหลดไฟล์ขึ้น EC2

​

*** การเข้าถึง EC2 จะใช้ private key ในการเข้าถึง

26 of 47

1 . ลงทะเบียน aws.amazon.com

  • เข้าเว็บไซต์ aws.amazon.com
  • กดเลือก complete sign up
  • กรอก email และ username
  • ทำตามขั้นตอนการสมัครปกติ
  • verify email

​

** ก่อนเริ่มต้นใช้งาน EC2 ต้องผูกบัตรเครดิตเพื่อชำระค่าบริการด้วย

27 of 47

2- สร้าง EC2 Instance

  • sign in เข้าเว็บไซต์ aws.amazon.com
  • เลือก Service > Compute > EC2
  • เลือก Launch instance

28 of 47

2.1 ตั้งค่าโปรเจค เลือก OS Image

  • พิมพ์ชื่อ Project
  • เลือก OS Image
    • แนะนำเลือกเป็น Ubuntu
    • Ubuntu Server 20.04 LTS

29 of 47

2.2 ตั้งค่าสเป็ค Cloud Server

  • เลือก Instance type
    • t2.micro 1 vCPU 1 GiB Memory
    • ค่าใช้จ่าย 0.0146 USD per Hour ( ประมาณ $11 / เดือน)

​

*** สเปค Cloud Server สามารถปรับเปลี่ยนได้ตลอด นี่คือคุณสมบัติหนึ่งที่ Cloud Server ต่างจาก Server ทั่วไปที่ต้องเปลี่ยนฮาร์ดแวร์

30 of 47

2.3 สร้าง private key เพื่อใช้เข้าถึง EC2

  • กดเลือก Create new key pair
    • เว็บจะสร้าง private key

​

  • พิมพ์ชื่อ Key เลือก type: RSA , format: .ppk

*** mac ให้เลือก .pem

ดูคลิปนี้เพิ่มเติม https://www.youtube.com/watch?v=eVqWVGE-LcQ

​

  • กด Create key pair เว็บจะดาวโหลด key ให้อัตโนมัติ
  • นำ key ไปใช้งานในขั้นตอนถัดไป
  • กด Launch instance เพื่อสร้างได้เลย

31 of 47

2.4 เตรียม IPv4 address ในการเข้าถึง EC2

  • เลือก View all instance
  • เตรียม IPv4 address สำหรับใช้ในขั้นตอนถัดไป

32 of 47

3- ใช้ซอฟแวร์ SSH (Secure Shell) ใน

การพิมพ์คำสั่งควบคุม EC2

​

  • ดาวโหลดโปรแกรม PuTTY https://www.putty.org/
  • เตรียม private key
  • เปิดโปรแกรม PuTTY
  • กรอก IP ตรง Host Name
  • ตั้งชื่อ Saved Sessions
  • Connection > Data
    • username: ubuntu

33 of 47

3- ใช้ซอฟแวร์ SSH (Secure Shell) ใน

การพิมพ์คำสั่งควบคุม EC2

​

  • Connection > SSH > Auth >
    • เลือก private key
  • Session > กด Save > Open
  • กด Accept เมื่อมีหน้าต่าง pop up

34 of 47

4- คำสั่ง linux

  • sudo apt-get update && apt-get upgrade
  • sudo apt-get install ufw
  • sudo ufw default allow outgoing
  • sudo ufw default deny incoming
  • sudo ufw allow 22
  • sudo ufw allow 80
  • sudo ufw enable
  • sudo ufw status
  • sudo apt-get install python3-pip
  • sudo apt-get install python3-venv
  • sudo python3 -m venv venv
  • source ./venv/bin/activate
  • sudo chown -R 777 'venv'
  • sudo chmod -R 777 'venv'
  • pip3 install streamlit
  • pip3 install -r requirements.txt
  • sudo python3 -m streamlit run app.py --server.port 80

​

  • อัพเดตและอัพเกรด software
  • ติดตั้ง firewall
  • ตั้งค่า firewall
  • ตั้งค่า firewall
  • เปิด port 22 สำหรับ ssh
  • เปิด port 80 สำหรับเว็บไซต์
  • เปิด firewall
  • ตรวจสอบสถานะ firewall
  • ติดตั้ง pip ของ python3
  • ติดตั้ง virtual environment
  • สร้าง virtual environment
  • activate venv
  • ตั้งค่า permission
  • ตั้งค่า permission
  • ติดตั้ง streamlit
  • ติดตั้ง package ผ่านไฟล์ requirements.txt
  • คำสั่งรัน streamlit

​

35 of 47

Topic 4: Deployโปรเจค ฉบับ ‘cloud สาย dev’ ของ DigitalOcean

​

​

36 of 47

Topic 5: จดโดเมนเนมเปิดเป็นเว็บไซต์ให้บริการแก่สาธารณชน

​

​

37 of 47

1- ค้นหา Domain name ที่ต้องการ

​

  • ซื้อ domain name ราคาถูกได้ใน namecheap.com
  • ค้นหาชื่อ domain name ที่ต้องการได้เลย
  • กดเพิ่มใส่ตระกร้า

38 of 47

2- confirm order & pay

​

  • กด check out ตามขั้นตอนได้เลย

39 of 47

3- Manage Domain name

​

  • กด Manage

40 of 47

4- AWS : ค้นหา Service: Route 53

  • คลิก Create hosted zone
  • พิมพ์ชื่อ Domain name

41 of 47

5- เตรียม Nameservers

  • นำ DNS URL ไปกรอกใน Nameservers ของ Namechaep.com

42 of 47

6- Namecheap.com: กรอก Nameservers

  • ตรง Nameservers เลือก Custom DNS
  • นำ DNS URL ไปกรอกใน Nameservers ของ Namechaep.com

43 of 47

7- create record เพื่อลิ้งค์กับ Instance

  • create record เพื่อตั้งค่า domain name

44 of 47

7.1 สร้าง record เว็บไซต์

  • record name ไม่ต้องกรอกข้อมูล
  • กรอก ip address ตรง value
  • กด create record

45 of 47

7.2 สร้าง record เว็บไซต์ www

​

  • record name กรอก : www
  • กรอก ip address ตรง value
  • กด create record

46 of 47

เว็บไซต์ถูกอัพโหลดพร้อมใช้งานเรียบร้อยแล้ว

  • ทดลองได้เลย
  • http://www.aibuilders-deploy.com/

​

​

​

47 of 47

THANK YOU