Hi I’m Shiun

(原本沒打算寫那麼多，結果每個故事的前因後果，一個連結一個，就越寫越多了) 最近我從第六屆 AWS Educate 雲端大使計劃畢業了！第六屆大使計劃任職期間真的非常充實且充滿挑戰，我也在這段旅程中成長了非常非常多。 這篇文章會從我踏上資訊科技之路開始說起，一直到我加入 AWS Educate 雲端大使計劃，再一一回顧我在第六屆 AWS Educate 雲端大使中的一些成就和重要活動，最後也會分享一些我在這段旅程中的收穫和成長，以及我的近期未來規劃。 我和 AWS 的淵源，我又是怎麼一路成為 AWS Educate 雲端大使 「我覺得我很幸運，我算是在很早期就對於職涯目標很明確，而且到越後期越明確。」 講到這個，回憶起高中時，學校為了我們選組還有選大學科系有做了兩次興趣測驗，我只知道測驗結果顯示我的興趣鑑別度很明確，而且我在資訊管理學系超級高分，重測一次的結果也是一樣，也因此我很早的志願就是「資訊管理學系」，所以學測完申請學校時，每個學校都填資訊管理學系。後來就進入了輔仁大學讀資管系，現在回頭看，真的沒選錯路，完完全全選對路。 2022 踏入職場後與 AWS 的第一次接觸 我是從大二開始進入職場實習的，這間公司叫做 eGroupAI，主要產品有兩個，分別是人臉辨識系統和 SaaS 企業管理平台，當時我就是以一個菜鳥實習生身份進入，也是第一次見證到真正業界的開發流程，當時的公司主要使用 Spring Boot，如果要加入公司的正式開發的行列，需要歷經一個實習生考試，沒有考過就是直接掰掰，所以當時白天實習，晚上回到家要瘋狂讀課程和寫作業，還好最後考過了。 加入正式開發的行列後，第一件事情就是要配置好開發環境，光是裝 IDE, JDK, 配置一堆有的沒的就可以用掉一整個工作天，我當時跟 AWS 的第一次接觸，就是主管叫我去安裝 AWS CLI，配給我一個 IAM User 的 Access Key ID 和 Secret Access Key (簡稱 AKSK)，然後輸入一些指令，當時我其實也不知道那是什麼，問了主管這個是什麼東西，他說因為開發會有一段會經過雲，後端有用到 DynamoDB，這樣你在本地開發時才有權限去處理那邊的東西。 而也隨著我在學習的過程，我開始對整個軟體的運作流程以及架構逐漸明朗，也因此我與雲端的淵源越來越深，認識的也越來越多。2022 年的某天，我參加了 AWS Educate 舉辦的工作坊，而且是辦在 AWS 辦公室裡面，正好可以去參觀一下。當時在工作坊尾聲時，有一個最大獎，只要回答出今天講的服務的一個實際應用案例，就可以拿走，正好我當時開發時就有處理過 S3 相關的東西，所以我腦海馬上蹦出我在開發上的實踐，最後這個大獎就被我拿走了，當時這個小小成就感影響我蠻大的，讓我有繼續探索雲端技術的動力。 不夠自信讓我差點卻步申請 AWS Educate 雲端大使計劃 隨後就是我迷上了雲端技術，當時 AWS 大大小小的活動我都一定會參加，但是 AWS 的活動都舉辦在平日，為了參加活動我都必須翹課，而且排班時都要避開 AWS 活動日，而當時我對容器化很感興趣，所以每個活動的下午分場議程我都專挑一些 Modernization 或是 Container 相關的主題，那時候有一個 Solutions Architect (SA) 他叫做 Kerrigan ，我特別喜歡他的演講風格，而且他演講的主題多半都和我感興趣技術有關，那時候我剛開始經營 LinkedIn，當時我認為建立關係是一個很謹慎且重大的事，很怕一個菜雞學生跟大神建立關係會被拒絕，某次演講結束後我就寫了一段訊息然後鼓起勇氣去建立關係，這是我第一次跟原本不認識的人建立關係，而沒多久後我看到被接受邀請的通知就超開心，而且 Kerrigan 也有給予我一些正面回應。現在回頭看，雖然好像只是簡單的建立關係，但對當時的我來說是相當大的鼓舞，這是能讓我繼續往雲端技術探索動力來源之一。...

最近正在準備 AWS ANS 證照剛好學到 AWS Site-to-Site VPN，也因此實作練習對我來說很重要所以打算寫這篇文章，一方面記錄實作過程一方面留著可以作為教學文章供他人參考 這篇文章將教學如何在 AWS 上建立 Site-to-Site VPN，我們會使用 Libreswan 來配置 VPN Server，這樣就可以在 AWS VPC 和 Data Center (本文示範會在 N. Virginia Region 中建立 VPC 來模擬 Data Center) 之間建立一個安全的 VPN Tunnel，讓兩者可以互相通信 一、創建 VPC (Oregon Region) 首先我們先創建架構圖右邊 AWS 的 VPC，因此我切換到 Oregon Region，並且依照下圖配置 VPC 以及 Subnet 二、配置 Route Table (Oregon Region) 然後創建 Route Table，並和上一步創建的 Subnet 建立 Association 我們要修改 Subnet 的 Association，確保該子網與我們剛才創建的路由表關聯在一起 如下圖配置 Route Table association 三、創建 EC2 Instance (Oregon Region) 接著進入 EC2 Console 頁面，現在要在剛才的 Subnet 啟動一台 EC2 Instance，若沒提到的地方可以保持預設...

因為我最近在開發寄信系統，因此理解電子郵件寄送的流程和原理是很重要的，為了方便理解，所以我會用真實世界中我們去郵局寄信來比喻電子郵件的寄送流程，這麼做是為了幫助理解，所以比喻那部分很難做到 100% 完全和技術細節對齊 用真實世界在郵局寄信，理解電子郵件寄送的流程 圖片取自: 維基百科 為了更好地理解電子郵件的寄送過程，我們可以把它比作郵局寄信的過程。假設 Alice 給 Bob 寫了一封感謝信，然後她將信件帶到郵局處理寄信手續。接下來，我們來看看具體過程: 創建信件 郵局寄信: Alice 寫好感謝信，裝進信封，寫上寄件人和收件人的地址，貼上郵票。 電子郵件: 你在郵件客戶端 (例如: Outlook、Gmail) 或透過 API 建立一封郵件，內容包含寄件人 (例如: alice@example.tw) 、收件人 (例如: bob@demodomain.tw) 、主題、內文及其他可能的附件。 信件寄送 郵局寄信: Alice 把信帶到郵局，然後找郵局的櫃台人員。 電子郵件: 當你點擊「寄送」後，郵件客戶端會將這封郵件交給寄件人的郵件伺服器，稱為 SMTP 伺服器 (Simple Mail Transfer Protocol) 。 SMTP 伺服器處理 郵局寄信: 郵局的櫃台人員會檢查地址是否正確，然後進行分類。 電子郵件: 寄件人的 SMTP 伺服器會驗證寄件人的身份，檢查信件格式是否正確，並根據收件人的域名 (例如: demodomain.tw) 查找相應的 MX 記錄 (Mail Exchange) 來確定收件人的郵件伺服器位置。 像如果對方沒有設定 MX Record，寄信過去就會出現以下 ERROR，找不到對應的 MX Record DNS 查詢 郵局寄信: 郵局櫃台人員會根據地址查找對應郵遞區號。 電子郵件: 寄件人的 SMTP 伺服器會透過 DNS (Domain Name System) 查詢收件人域名的 MX 記錄，以獲取負責接收郵件的伺服器的 IP 位址。 信件傳輸...

我遇到了什麼問題 最近我用 SES, S3, Lambda 開發了轉寄信件的功能，簡單介紹一下這功能： 假設我就職於公司的開發部門，我們對外有一個信箱是 dev@example.com 當客戶遇到軟體開發上的問題時寄信到 dev@example.com，開發部門的所有同仁就會在自己的信箱收到此客戶寄來的電子郵件，重點是開發部門的同仁們都可以用自己的帳號回覆該客戶 而開發好這功能後，我遇到一個問題 — 轉寄出去的信件沒辦法正確顯示內嵌圖片 關於轉寄信件的程式碼我放在 GitHub 上囉 (連結)，之後有時間會寫一篇 Forward Email 的完整教學，或是也可以關注我的 Notion，我每天都會寫筆記記錄自己的學習過程 讓我們直接看例子 首先，我登入私人帳號模擬我是客戶，寄信給 test@aws-educate.tw，下圖是當時寄出去的內容: 寄給 test@aws-educate.tw 後，SES 會收到信，然後根據我配置的 Receipt rule，原始郵件檔案會被儲存至我指定的 S3 Bucket 延續 用 SES, S3, Lambda 實現轉寄信件功能 ，當我嘗試在轉寄出去的信件中內嵌圖片，最後收到轉寄來的信，都會出現下圖的現象：圖片沒辦法內嵌在裡面，倒是跑去附件了 寫文章時，已經把原本轉寄過來的信件刪了，所以下圖信件主旨跟前一張圖片不一樣不要介意，下圖信件已經詮釋我想表達的現象了 XD 我起初嘗試的解法 後來下面這篇 Stack Overflow，裡面有人提到 Gmail 還不支援顯示 base64 編碼的圖片 (有待確認，希望有人可以告訴我正確答案) As of January 2020, Gmail still does not support base64 encoded images. Source: Add embedded image in emails in AWS SES service...

程式碼在這邊的 feature/preload 分支: https://github.com/sh1un/Nextjs-Musive-app 此專案是一個 Next.js 專案，原作者為 Ansh Rathod，我已經過作者本人授權使用，因此 Fork 過來稍微改了一下。 我本身不是一名專精於前端技術的開發者，所以我所修改的 Code 都是由 ChatGPT-4 產生的。我今天這樣做的主要目的是想實驗 preload 是否能做到效能優化，以此來做一個簡單的 PoC。 補充一下，這篇文章的內容本來是要放在 「2024 AWS Educate 陪跑計畫的獎勵課程 - 雲端串流挑戰：復刻 Spotify 的技術旅程」中教學，此工作坊旨在教學如何利用 CloudFront 優化速度與降低延遲，但礙於當天工作坊的內容太滿已經塞不下了，所以當天工作坊就沒有講到 Preload，如果看到這篇文章，想要學學 CloudFront 歡迎參觀我們當天的教材 (連結) 什麼是 Preload? Preload 是一種網頁性能優化技術，讓瀏覽器在頁面加載時預先加載指定的資源，這樣在使用這些資源時可以更快地顯示或播放。這可以減少等待時間，提升用戶體驗。 你可以想成：原本你是要“按下去播放按鈕”才會開始下載音樂，現在我們提前幫你下載，你之後“按下去播放按鈕”就會立即播放。 舉例 如果你在網頁上有一段影片或音樂，你可以用 preload 告訴瀏覽器提前下載這些文件，這樣當用戶點擊播放按鈕時，影片或音樂就會立即播放，而不是先等待下載。 基本用法： 在 HTML 中，你可以在 <link> 標籤中使用 rel="preload" 來預加載資源。例如： <link rel="preload" href="path/to/your/file.mp3" as="audio"> 這樣，瀏覽器會在頁面加載時預先下載 file.mp3，提高用戶播放音樂的速度。 動態 Preload 的實現思路 每個用戶的歌單都不一樣，所以我們當然不希望把 preload 的 href 寫死成一個 URL。 解決方案 我們可以通過以下幾個步驟來實現動態的 preload： API 獲取歌單： 伺服器端提供一個 API，根據用戶的請求返回該用戶的歌單。這個 API 返回一個 JSON 結構，其中包含了音樂檔案的 URL 列表。 JavaScript 動態生成 Preload 標籤： 使用 JavaScript 在頁面加載後動態地從 API 獲取歌單，並為每個音樂文件創建 preload 標籤，將其添加到頁面的 <head> 中。 具體實現 注意⚠️ 我的寫法並非添加 preload 到頁面的 <head>，而是直接用 React 和 JS 本身提供的內建物件來達到同樣效果，詳見本段說明。...