發表文章

【Host】十分鐘內五個步驟,將你的React免費部署在Render上吧(附範例)

圖片
【前言】 上一篇 說到用Render部屬Laravel,今天來教學把React部署上去 真的很簡單,不用一行程式or指令 部署結果 【主題】 一、註冊Render 進入 Render 註冊 二、建立 註冊後就可以到後台的部分,點上面New並選擇Static site 三、在github中選擇你要部署的專案 透過github或gitlab選擇要部署的專案,如果沒有專案的話也不用擔心, 官方 或 我這邊 有範例,只需要fork出來就可以了, 進入github選擇專案,Save就準備好囉 四、調整參數 參數照圖片上面設定即可 按下Create 五、喝杯咖啡,等待部署完成 等待部署完成就會出現下面的畫面,網址就可以點進去看有沒有成功囉 備註: 如果有使用到react-router這類客戶端router需再添加rewrite rule,設定如下 儲存之後會再跑一次部署流程,之後只要有commit到選擇的分支上就會自動部署,是不是很方便呢? 【後記】 用Render部署React、Vue這類Static的專案,好處相較於Laravel是不會有睡眠時間(免費的話), 而且也相對簡單許多,當然如果要資料傳遞、介接時還是需要API。 參考:  Deploy a Create React App Static Site

【Host】利用Render搭配Dockerfile部署Laravel專案吧!(類似Heroku的服務商推薦!)

圖片
【Why】 你的Side Project只有在本地測試?太low了吧,這樣要怎麼展示自己酷酷的作品 如果使用第三方API的Call Back(如 Line Login or Webhook、第三方金流) 該怎麼辦? 要有部署主機、主機要安裝環境、ssl、DNS、url 都要時間、金錢 【How】 Render 的運作流程: 準備好你的專案 也可以直接fork render提供的laravel範例 建立資料庫 在render連動github 製作Dockerfile (不懂Docker? Render提供多種Docker的Deploy Example) 這邊筆者Ryan會小小講解一下下 至於Docker的介紹 我們會下次會專門寫一篇XD 設定參數..等等 【What】 Render 是一間雲平台即服務的品牌,相信有接觸網頁開發的觀眾應該都聽過Heroku, 甚麼?沒有嗎? 像是GCP、AWS這類的雲端服務提供商就不可能沒聽過了吧 筆者Ryan在工作時有接觸GCP、AWS,自己之前有用過Heroku架設 個人網站 這次偶然碰到這間,試了一下從開始到部署完一個GO的 網站 ,大概十分鐘左右 甚至都不需要打到一行Code、下到一行Command 【優點】 輕鬆達到CI/CD 不需要繁瑣的部署環境 免費:D 【缺點】 免費方案的限制,如同Heroku,免費的部署若一段時間會自動休眠,等同於過一段時間後開啟網頁會需要一段時間, 詳情 ,而且和Heroku相比,Render的休眠常常會5XX(Server Error) 若和Heroku相比,Heroku應該不需要用到Docker(太久以前用的,不太記得了),入門門檻相對高一些。 收費方式比較複雜,筆者Ryan目前還使用免費方案,目前還不太清楚它的分服務(主機、資料庫)收費,還是一次性月費,個人覺得前者機率比較大 使用PostgreSQL需要注意,免費方案一段時間會 刪除資料 。 相對於GCP、AWS,所提供的服務就沒有那麼多樣化,如:開設一台虛擬機,在上面裝你想裝的任何軟體,可以把所有服務通通開在一台。這個問題會回到,你的專案的部署方式,是否需要分不同主機、是否需要快速建成(這其實是關係到Docker,跟服務商無關) 【示範】 登入後進入Render 後台 ,點選右上角的New並點選Web Service 這是 Rende

【前端設計】簡易筆記:chart.js plugin 在圓餅圖、甜甜圈圖上的每片顯示資料

圖片
前言: 極短篇 需求: 主題: 滑鼠移到上面會顯示資料的chartjs有內建了 現在需求是能在每一片上預設資料全部顯示 看了看官方好像沒有提供這個功能,找到了一個插件 GitHub 這個插件是為了圓餅圖和甜甜圈的 GitHub上有demo和詳細的文件 有機會再補程式碼 參考: How to Display both count and percentage (%) in chart js pie chart GitHub: chartjs-plugin-labels

【Laravel】部屬Laravel前的筆記-總匯篇:伺服器、資料庫、優化、注意事項(未完待更新)

前言: 部屬Laravel其實有很多細節,包括你要部屬在甚麼伺服器、資料庫,還有優化、注意事項等等,這篇不是萬用的,是給自己的筆記,也希望能幫助到一些人。 主題: 伺服器: 通常會分成有沒有錢, 有錢可以選擇有專門為Laravel部屬的, 官網提供了 Vapor 和 Forge ,小弟沒錢所以沒試過, 還有萬用的AWS和GCP就不多說了。 若很不幸你的團隊沒有經費、個人使用的話, Heroku是可以考量的,不過資料庫會是一個癥結點(我看免費的好像只有postgresql),Heroku可以連接Github以達到自動部屬。 另外可以考慮免費的V-host(用FTP上傳檔案的那種),有資料庫,但除了網址很醜之外,部屬會需要更多的功力,我在 這篇 有提供一些小撇步,另外我是用byethost。 題外話:php 在 MacOs vs Win10的表現 資料庫: 優化: 優化的問題也很多,SQL優化、PHP優化、Laravel優化、前端優化、程式碼優化...太多了,優化又會考量到空間換時間(時間複雜度和空間複雜度),這邊我找了一些資料放,詳細可以請專業的考量優化的CP值挑選,雖然本人不是專業的優化工程師,要我來優化的話也是把網路上寫的攻略試試看,前後測試比對一下執行速率(苦笑,簡單來說,優化是一件很吃經驗的。 SQL優化: 20條Tips:高性能SQL查詢,優化取數速度方案 高手詳解SQL效能優化十條經驗 PHP優化: Improving PHP Performance for Web Applications 裡面提到比較個人常會使用到的 使用mecache暫存減少伺服器負擔(有機會再介紹mecache) 使用isset()取代count(), strlen(), 和 sizeof() 減少對資料庫的存取次數(簡單來說能用一段sql語法取得,就不要使用for、foreach來存取資料) 使用 單引號 取代 雙引號,特殊情況以外再使用雙引號 使用 === 會快於 ==,猜測是因為===是強型別的判斷 Laravel優化: https://learnku.com/laravel/t/24559 前端優化: 這裡的優化代表執行速度上的優化,而不是介面上的優化。 Google有提供網站優化的評估和建議的 網站 (繞口令XD 這裡 有一些介紹。 -- 個人的小建議是,laravel的