iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 27
1
Modern Web

從零開始的Angular前端開發系列 第 27

# DAY 27 部署 & 執行

我們開發 Angular 到現在,都是用 Angular-CLI 提供的 ng serve 來開測試伺服器。那麼當網站寫好後,要發布到遠端的 server 或是 repository,通常會進行部署,那我們今天來示範怎麼部署,並把網站放到 server 裡。

安裝 XAMPP

請到這裡下載並安裝 XAMPP。XAMPP 整合了 Apache、MySQL、FTP...等等的伺服器功能,我們等等會將檔案放到 XAMPP 裡執行。

安裝好後找到 XAMPP 的資料夾:

裡面有很多檔案,我們等等要把網站放在 htdocs 中,裡面目前有一些範例的頁面,全部刪掉即可。

在同一層資料夾找到 xampp-control.exe,點兩下執行,在 Apache 那欄點 Start 就可以開啟網頁伺服器了。


部署 Angular

回到 Angular,來準備我們要放在網站上的檔案,透過 Angular-CLI下指令:

ng build --prod

這邊的 --prod 是開啟 production Mode,在很久以前的文章有提過,production Mode 除了幫我們編譯程式碼、打包,也會將程式碼壓縮,這樣在網頁載入上,效能會比較好。

執行完 ng build --prod 後,我們的專案資料夾底下會多一個 dist 資料夾:

裡面就是放我們剛剛打包好的程式碼:

可以看到我們寫的 ComponentService,都已經被打包在幾個 js 檔裡。

接下來把這些檔案,全部複製到 xampp\htdocs 底下:

確認 Apache 已經被啟動:

然後打開瀏覽器,輸入 localhost127.0.0.1,應該就能成功開啟網站。



上一篇
# DAY 26 整合架構
下一篇
# DAY 28 RxJS
系列文
從零開始的Angular前端開發30

尚未有邦友留言

立即登入留言