【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。








留言

張貼留言

其他人都在看...

【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
閱讀更多..

【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的
閱讀更多..