自動化部署 - 資訊之芽 2023 Python 語法班

--- type: slide tags: presentation title: 自動化部署 - 資訊之芽 2023 Python 語法班 description: Sean 韋詠祥 / 2023-07-02 --- # 自動化部署資訊之芽 2023 Python 語法班 Author: Sean 韋詠祥 Note: 14:00 發密碼、安裝 SSH client 14:05 開始講課、部署理由 14:10 Linux 指令介紹 14:20 介紹 Git 14:25 VS Code Git 操作 14:30 註冊 GitHub 帳號 14:35 建立 Repo、add remote 14:40 遠端 clone、安裝環境 14:50 介紹 CI/CD 14:55 安裝 GitHub Actions 15:05 嘗試觸發部署 15:15 指令列 Git 操作 (緩衝用) 15:25 下課 ---- ## 課前準備 - 用 VS Code 開啟 Discord Bot 專案 - 在自己的筆電安裝 SSH 用戶端 - 拿到密碼紙，連上遠端伺服器 ---- ## 為何安排這堂課未來展望？ ---- ## 現況回顧 - 寫完 Discord Bot 了 - 在筆電上運行 - 收起電腦之後呢？ - 修改記錄不易追蹤 ---- ## 今天目標 - 暸解版本控制概念、用法 - 學會「部署」到遠端伺服器 - 建立自動化流程 ---- ## 課堂綱要 - 前言 - Linux 指令教學 - Git / GitHub 簡介 - CI/CD 自動化部署 - 補充：指令列 Git 操作 --- # Linux 指令教學基本 Bash 指令 ---- ## Part 1 ```bash cd example # 進入資料夾 cd .. # 回到前一層目錄 cd # 不加參數，代表回到家目錄 ``` ```bash pwd # 顯示當前目錄 ``` <br> ```bash ls # 列出目前目錄下的檔案 ls -l # 顯示詳細資訊 ls -a # 包含隱藏檔案 ls -al # 我全都要！ ``` ---- ## Part 2 ```bash cat slides.md # 印出檔案內容 ``` ```bash less /etc/passwd # 慢慢查看檔案內容 ``` <br> ```bash echo Hello echo Hello World echo Hello World echo "Hello World" ``` <br> ```bash echo "Hey there" > myfile echo "Hey there" >> myfile ``` ---- ## Part 3 ```bash touch myfile # 建立空檔案 ``` ```bash mkdir mycode # 建立資料夾 ``` <br> ```bash mv myfile file1 # 移動檔案 ``` ```bash cp file1 file2 # 複製檔案 ``` <br> ```bash rm file1 # 刪除檔案 ``` ```bash rmdir mycode # 刪除空資料夾 ``` --- # 版本控制簡介 Git 核心邏輯 ---- ## 你有沒有看過... ![課程簡報複製最終版完稿](https://i.imgur.com/uZArLj9.png) ---- ## 什麼是版本控制？ ![git lg graph](https://i.imgur.com/HqNNopD.png) ---- ## 傳統中央控管型 ![Central VCS Server -> Computer A B](https://i.imgur.com/cT78gbx.png) ---- ## 分散式版本控制系統 ![Version Database](https://i.imgur.com/OkbeF6I.png) ---- ## Git 核心使用概念 ![Working Staging .git](https://i.imgur.com/x5r0Y34.png) ---- ## VS Code 實際操作使用 Git 擴充套件 --- # 註冊 GitHub 帳號 ![GitHub Homepage](https://hackmd.io/_uploads/B1haGdA_2.png) 網站：https://github.com/ ---- ## 填寫帳號資料 ![CAPTCHA](https://hackmd.io/_uploads/SyYn7_A_h.png) 驗證碼：選出相同物品 ---- ## 收驗證信 ![confirm code](https://hackmd.io/_uploads/SyvGE_ROn.png) ---- ## 個人分析資料 ![Welcome](https://i.imgur.com/cTHU9Se.png) 可點擊下方 Skip 跳過 ---- ## 建立 Repo ![](https://hackmd.io/_uploads/SyK1HuRO2.png) ---- ## 上傳程式碼 - 透過 VS Code 連結 GitHub 帳號 - 選擇對應 Repo - 上傳（Push）程式碼 --- # 設定遠端伺服器抓取程式碼、安裝環境 ---- ## 抓取程式碼使用 git clone 指令 ```bash git clone https://github.com/Sean-Py2023/dc-bot.git cd dc-bot ls ``` ---- ## 安裝環境已安裝 python3.11 及 pip 程式請自行安裝需要的 pip 套件 ```bash pip install discord pip install python-dotenv pip install .... ``` ---- ## 執行 Discord Bot 跟筆電上方式類似 ```bash python3 bot.py ``` <br> 記得把 `.env` 也帶過去 ```bash nano .env # 編輯檔案 ``` --- ## CI/CD 自動化部署 Continuous Integration Continuous Delivery Continuous Deployment ---- ## Continuous Integration 持續整合 - Build 程式建置 - Unit Test 單元測試 - Integration Test 整合測試 - Merge 合併至主幹 ---- ## Continuous Delivery 持續交付 - 編譯、產生執行檔 - 產生 Docker 映像檔 ---- ## Continuous Deployment 持續部署 - Dev -> Staging -> Production - 自動監控系統健康度 --- # GitHub Actions 由 GitHub 提供的 CI/CD 服務 ---- ## 設定 SSH 金鑰 ssh-keygen -t ed25519 cat .ssh/id_ed25519.pub >> .ssh/authorized_keys ---- ## 設定 GitHub Actions ![](https://hackmd.io/_uploads/ByTYMqC_3.png) 設定檔：[GitHub Gist](https://gist.github.com/Sea-n/5c324c52ea9f9ef4798631036731f57e) ---- ## 嘗試觸發部署 --- # 指令列 Git 操作補充教材 ---- ## 建立本地 Repo Git Repository ```bash cd ~ mkdir my-project # 建立資料夾 cd my-project git init # 初始化 git ``` ```bash touch main.py # 建立 main.py 或 main.cpp 檔案 git add main.py # 把檔案從 working area 加入 staging area ``` ```bash git commit # 在編輯器中輸入 commit 訊息：init ``` ```bash # 完成！ ``` ---- ## 稍微改點東西先用編輯器打開 `main.py` 檔案 ```bash nano main.py ``` 用 `for` 跟 `range()` 讓他輸出 0 到 4 這五個數字，每次換行完成後用 git 保存版本紀錄 ```bash git status # 有誰被改到了 git add main.py git commit ``` Note: 先講 status 下頁講 diff 再來是 show ---- ## 需求變更輸入：一個正整數 N 輸出：從 0 到 N-1 的數字，每次換行 ```bash git diff # 我們改了什麼 git add -p main.py git commit ``` Hint：用 `int(input())` 接收輸入 Note: 剛講 status 現在是 diff 下頁講 show ---- ## 再次修改輸入：一個正整數 N 輸出：從 1 到 N 的數字，每次換行 ```bash git add -p . git commit -m '<commit message>' ``` 試著查看歷史紀錄 ```bash git show # 預設為 HEAD git show HEAD~1 # 往前 1 筆 ``` Note: 講完 status、diff 這頁講 show ---- ## 歷史回顧試試這個指令吧 ```bash git log ``` <br> 幫大家設定好更漂亮的版本了： ```bash git lg ``` --- # Thanks 投影片連結：https://hackmd.io/@Sean64/cicd-sprout2023  <br> [![CC-BY](https://mirrors.creativecommons.org/presskit/buttons/88x31/png/by.png)](https://creativecommons.org/licenses/by/4.0/deed.zh_TW) ###### 這份投影片以 [創用 CC - 姓名標示](https://creativecommons.org/licenses/by/4.0/deed.zh_TW) 授權公眾使用，原始碼及講稿請見 [此連結](https://hackmd.io/@Sean64/cicd-sprout2023/edit)。 <style> .reveal pre.wrap-code code { white-space: pre-wrap; } </style>

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.