React 佈署 – 將應用程式放到 Server 來 Demo 吧

Introduction

好不容易寫出了第一隻 React 應用程式,以往只知道將簡單的 HTML、CSS、JS 透過 FTP 工具丟到 server 上,然後打上網址就可以輕鬆 demo,但如果像是 React 這樣經過 webpack 打包後的應用程式,總不可能將整包 node_modules 放上去吧!
今天以 SiteGround 這個虛擬空間 server 為例,讓我們來學學 React build & deploy

React Application

為了 demo 用途,我們新建立一個 React 應用程式,並使用 create-react-app 這個 project

npm install create-react-app
create-react-app myApp
cd myApp

Build

npm run build (yarn run build)

Deployment

這個步驟其實就只是將 myApp/build/ 資料夾內的東西,上傳到自己的 hosting server 而已,如果很清楚這個步驟其實可以自己動手囉~

  1. 登入 SiteGround 網頁
  2. 進入 CPanel
  3. Files > File Manager
  4. 勾選 Web Root (public_html/www) 後進入
  5. New Folder 建立一個 demo 資料夾
  6. 進入 demo 資料夾並點選 Upload 上傳
  7. 將 myApp/build/ 裡面的所有檔案上傳
  8. (檔案太多可以先壓縮成壓縮檔上傳,接著解壓縮可得到一樣的結果)
  9. URL 輸入: (你的個人網域)/demo,大功告成

或者使用 FTP 可以更容易完成以上的步驟,需要先到 SiteGround 設定 FTP 帳號,之後就不需要再為了上傳檔案跑來登入網頁,可以直接透過 FTP 工具(如 FileZilla)將你的檔案丟上去,詳細可以參考這篇文章

  1. 登入 SiteGround 網頁
  2. 進入 CPanel
  3. Files > FTP Accounts
  4. 在 Add FTP Account 區塊建立一組帳號密碼, Directory 這一欄請輸入 public_html
  5. 下方 FTP Accounts 區塊出現剛建立的帳號,最右方點選 Configure FTP Client ,即可下載各種 FTP 工具的 configure file
  6. 下載成功後,打開 FTP 工具並使用 匯入 功能,即可將設定匯入
  7. 透過 FTP 連線成功後,可參考上方那個區塊的步驟 5

Troubleshooting

Q: 應用程式成功放到 hosting server 了,但是連線上去發現程式沒有正常執行,打開開發人員工具發現有 console 錯誤,有一些 css 或 js 無法正確讀入
A: 將 build 目錄下的 index.html 打開,針對找不到路徑的檔案檢查一遍,需注意路徑最前方不能夠是”/”,否則會從網域根目錄開始算起哦

Reference

stackoverflow
FTP instructions

留個言吧!