付費限定

[27] 用 Nginx 部署前端網站

更新於 2024/10/10閱讀時間約 3 分鐘

打包網頁

在部署網站之前,我們要先來打包我們的網頁前端專案
為什麼要打包呢?什麼是打包呢?這有點像是編譯,如果你寫過 C 應該講到這裡就理解為什麼要這樣做了
在網頁開發中網頁內容最原始就是直接用 html 下去寫,但一個成熟的開發者會善用框架來開發,不論是用 vue 或 react,樣式的部分也會從最基本的 css 到 sass 等進階的樣式寫法,功能的部分現在都往 Typescript 開發,不再是只用 Javascript
但是瀏覽器這邊最後都必須翻譯成最原始 html, css, Javascript 才能使用,所以在 production 部署時,我們需要先編譯打包專案,免得瀏覽器每次開啟網頁都要慢慢的先編譯完才能使用
以行動支持創作者!付費即可解鎖
本篇內容共 1497 字、0 則留言,僅發佈於Vue+Django+MongoDB+Nginx 從網頁全端開發到架站一次教給你你目前無法檢視以下內容,可能因為尚未登入,或沒有該房間的查看權限。
avatar-img
9會員
49內容數
比起詳細教學單一技能,網路上或者市面上整合多項技能的教學相對少很多,但要真的完成一項專案往往不是只靠一項技能便能做到。 而且教科書式的完整教學也比較枯燥乏味,因此我想以自身的經驗為例,以全端開發各項技能中最常用到的部分進行講解,讓讀者能夠快速上手掌握全端技能。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
張哲嘉的沙龍 的其他內容
歷經千辛萬苦,終於要來架站啦!首先先來介紹我們的架站工具 Nginx,最常用的架站工具主要有兩個,Apache 和 Nginx Apache 的歷史悠久,使用的人數也最多,之前在選擇架站工具時,考量的點是 Apache 比較肥,設定也比較難寫,所以最後選擇 Nginx 作為我的架站工具 Nginx
資料庫複制、身份驗證都有了,還能做什麼讓我們的資料更加安全呢?喔對了,還可以備份我們的資料!接下來來講匯出整個資料庫的資料來做備份 安裝 MongoDB Database Tools MongoDB 這邊有一個指令叫 mongodump 是用來匯出資料庫的資料,你可以匯出整個資料庫,也可以選擇匯出部
資料庫複製 不知道大家有沒有聽過負載均衡或者水平擴展呢?在網站佈署中我們會透過這些技術把網站架在多台 server 上,以避免萬一某台 server 掛掉,讓網頁服務仍能維持運作,或者去分擔負載 MongoDB 這邊有一個叫資料庫複製的技術,建立多個相同的 MongoDB service 在不同的
在上一篇文章中,我們講解了 MongoDB 的基本操作,接下來想講講如何更有效率的查詢想要找的資料 模糊查詢 就是查詢的條件只要部分符合就可以找到了,不用查找的關鍵字完全正確,我們直接來舉個例子比較好理解 先假設有以下這些資料 模糊查詢,查找的資料 item 值內有包含 book 就返回 這樣就會找
Connect database 因爲我們後端是用 django,所以我們要用 python 來操作 MongoDB,MongoDB 官方推薦的 python driver 是 pymongo,首先來安裝 在想使用的檔案內加入 myclient = pymongo.MongoClient("mong
上一篇有提到 MongoDB Compass,而且也已經裝好了,那就來介紹一下吧 MongoDB Compass 是官方做的圖形介面工具用來操作架好的 MongoDB service,這樣就不用什麼事情都辛苦的用 mongo shell 操作了 New connection 輸入想要連接的 Mong
歷經千辛萬苦,終於要來架站啦!首先先來介紹我們的架站工具 Nginx,最常用的架站工具主要有兩個,Apache 和 Nginx Apache 的歷史悠久,使用的人數也最多,之前在選擇架站工具時,考量的點是 Apache 比較肥,設定也比較難寫,所以最後選擇 Nginx 作為我的架站工具 Nginx
資料庫複制、身份驗證都有了,還能做什麼讓我們的資料更加安全呢?喔對了,還可以備份我們的資料!接下來來講匯出整個資料庫的資料來做備份 安裝 MongoDB Database Tools MongoDB 這邊有一個指令叫 mongodump 是用來匯出資料庫的資料,你可以匯出整個資料庫,也可以選擇匯出部
資料庫複製 不知道大家有沒有聽過負載均衡或者水平擴展呢?在網站佈署中我們會透過這些技術把網站架在多台 server 上,以避免萬一某台 server 掛掉,讓網頁服務仍能維持運作,或者去分擔負載 MongoDB 這邊有一個叫資料庫複製的技術,建立多個相同的 MongoDB service 在不同的
在上一篇文章中,我們講解了 MongoDB 的基本操作,接下來想講講如何更有效率的查詢想要找的資料 模糊查詢 就是查詢的條件只要部分符合就可以找到了,不用查找的關鍵字完全正確,我們直接來舉個例子比較好理解 先假設有以下這些資料 模糊查詢,查找的資料 item 值內有包含 book 就返回 這樣就會找
Connect database 因爲我們後端是用 django,所以我們要用 python 來操作 MongoDB,MongoDB 官方推薦的 python driver 是 pymongo,首先來安裝 在想使用的檔案內加入 myclient = pymongo.MongoClient("mong
上一篇有提到 MongoDB Compass,而且也已經裝好了,那就來介紹一下吧 MongoDB Compass 是官方做的圖形介面工具用來操作架好的 MongoDB service,這樣就不用什麼事情都辛苦的用 mongo shell 操作了 New connection 輸入想要連接的 Mong
你可能也想看
Google News 追蹤
Thumbnail
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
Thumbnail
2024.05.02 今天沒什麼事,是非常平淡的一天。 想想總是拍情勒仔的臉,不如接下來來拍各式各樣的特寫吧? 老實說蟲蟲覺得情勒仔的腳腳超可愛,有點像放大版的老鼠腳(什麼譬喻 所以經常沒事就騷擾他的腳(變態 他本貓也挺煩被摸腳的,但是就可愛咩(´・ω・`) 是辣
Thumbnail
來跟大家分享一個加拿大退貨的故事,我買了一台 Dell 的 SE2722H 27 吋螢幕,但是搭配我的 Mac 卻出現解析度太低的狀況,所以就決定要退貨,不得不說加拿大 Dell 退貨的機制還是相當完善,只要在 Dell 網站上按一按,就可以完成退貨。
Thumbnail
Simmpo 是臺灣製造的葉黃素保護貼,通過德國萊茵TÜV認證。這款護眼霧面簡單貼不僅可以抵禦有害藍光,還具備專利設計的零失誤精準對位貼,讓使用者能享受3C產品帶來的便利同時保護視力。Simmpo在保護貼上使用了德國萊茵RPF30認證材料,色溫差保持在493k,擁有全臺最多醫師推薦及眼科診所販售。
Thumbnail
AI 對於這個世界絕對是全新的幫助,也有明確的商業模式 你再也不需要請人寫文案,照片和影像可以即時產出 對於語言和世界的理銞也會變得快速 這一切都在快速地改變世界當中 但其危險的是,隱隱約約有著要泡沬化的步調
Thumbnail
雖然表面是一道移除元素的題目,但實際上考的還是搬移。 題目要求的是把val目標值移除,等價於 把非目標值的搬到前面,並且回傳這些剩下來的元素個數(也就是 陣列裡面,非目標值的元素總數​)。 請看下方範例,會更好理解。
Thumbnail
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
Thumbnail
2024.05.02 今天沒什麼事,是非常平淡的一天。 想想總是拍情勒仔的臉,不如接下來來拍各式各樣的特寫吧? 老實說蟲蟲覺得情勒仔的腳腳超可愛,有點像放大版的老鼠腳(什麼譬喻 所以經常沒事就騷擾他的腳(變態 他本貓也挺煩被摸腳的,但是就可愛咩(´・ω・`) 是辣
Thumbnail
來跟大家分享一個加拿大退貨的故事,我買了一台 Dell 的 SE2722H 27 吋螢幕,但是搭配我的 Mac 卻出現解析度太低的狀況,所以就決定要退貨,不得不說加拿大 Dell 退貨的機制還是相當完善,只要在 Dell 網站上按一按,就可以完成退貨。
Thumbnail
Simmpo 是臺灣製造的葉黃素保護貼,通過德國萊茵TÜV認證。這款護眼霧面簡單貼不僅可以抵禦有害藍光,還具備專利設計的零失誤精準對位貼,讓使用者能享受3C產品帶來的便利同時保護視力。Simmpo在保護貼上使用了德國萊茵RPF30認證材料,色溫差保持在493k,擁有全臺最多醫師推薦及眼科診所販售。
Thumbnail
AI 對於這個世界絕對是全新的幫助,也有明確的商業模式 你再也不需要請人寫文案,照片和影像可以即時產出 對於語言和世界的理銞也會變得快速 這一切都在快速地改變世界當中 但其危險的是,隱隱約約有著要泡沬化的步調
Thumbnail
雖然表面是一道移除元素的題目,但實際上考的還是搬移。 題目要求的是把val目標值移除,等價於 把非目標值的搬到前面,並且回傳這些剩下來的元素個數(也就是 陣列裡面,非目標值的元素總數​)。 請看下方範例,會更好理解。