付費限定

[27] 用 Nginx 部署前端網站

更新 發佈閱讀 1 分鐘

打包網頁

在部署網站之前,我們要先來打包我們的網頁前端專案

為什麼要打包呢?什麼是打包呢?這有點像是編譯,如果你寫過 C 應該講到這裡就理解為什麼要這樣做了

在網頁開發中網頁內容最原始就是直接用 html 下去寫,但一個成熟的開發者會善用框架來開發,不論是用 vue 或 react,樣式的部分也會從最基本的 css 到 sass 等進階的樣式寫法,功能的部分現在都往 Typescript 開發,不再是只用 Javascript

但是瀏覽器這邊最後都必須翻譯成最原始 html, css, Javascript 才能使用,所以在 production 部署時,我們需要先編譯打包專案,免得瀏覽器每次開啟網頁都要慢慢的先編譯完才能使用

以行動支持創作者!付費即可解鎖
本篇內容共 1497 字、0 則留言,僅發佈於Vue+Django+MongoDB+Nginx 從網頁全端開發到架站一次教給你你目前無法檢視以下內容,可能因為尚未登入,或沒有該房間的查看權限。
留言
avatar-img
張哲嘉的沙龍
9會員
49內容數
比起詳細教學單一技能,網路上或者市面上整合多項技能的教學相對少很多,但要真的完成一項專案往往不是只靠一項技能便能做到。 而且教科書式的完整教學也比較枯燥乏味,因此我想以自身的經驗為例,以全端開發各項技能中最常用到的部分進行講解,讓讀者能夠快速上手掌握全端技能。
張哲嘉的沙龍的其他內容
2022/10/10
Obtain certificate 我們用之前提到的 Let’s Encript 來獲得憑證 在 nginx/sites-available 再增加一個網站設定,然後再做個連結到 nginx/sites-enabled,設定的內容就隨便寫個 server_name 和 listen 就好了 然後
Thumbnail
2022/10/10
Obtain certificate 我們用之前提到的 Let’s Encript 來獲得憑證 在 nginx/sites-available 再增加一個網站設定,然後再做個連結到 nginx/sites-enabled,設定的內容就隨便寫個 server_name 和 listen 就好了 然後
Thumbnail
2022/10/10
Block direct access by ip 一旦將網站對外,就要開始面對這個險惡的世界每天遭受一堆攻擊,雖然大部分都無關痛癢,幾乎都是機器人在 scan ip 然後在發一些無意義的請求,或者亂試 api,看能不能試出來...,最好是哪麼好試啦,而且加上我們之前在 JWT 篇章講到的 prot
Thumbnail
2022/10/10
Block direct access by ip 一旦將網站對外,就要開始面對這個險惡的世界每天遭受一堆攻擊,雖然大部分都無關痛癢,幾乎都是機器人在 scan ip 然後在發一些無意義的請求,或者亂試 api,看能不能試出來...,最好是哪麼好試啦,而且加上我們之前在 JWT 篇章講到的 prot
Thumbnail
2022/10/10
保護後端重要資訊 在 django 專案中我們會把設定都寫在 settings.py 內,包含了 SECRET_KEY 等機密資訊,通常專案都會做版本控制上 git,但把這些機密資訊也上 git 是很不好的一件事,畢竟 github 也是曾經被駭過的,所以最好是把這些不想讓別人知道的資訊寫在另外一個
Thumbnail
2022/10/10
保護後端重要資訊 在 django 專案中我們會把設定都寫在 settings.py 內,包含了 SECRET_KEY 等機密資訊,通常專案都會做版本控制上 git,但把這些機密資訊也上 git 是很不好的一件事,畢竟 github 也是曾經被駭過的,所以最好是把這些不想讓別人知道的資訊寫在另外一個
Thumbnail
看更多
你可能也想看
Thumbnail
債券投資,不只是高資產族群的遊戲 在傳統的投資觀念中,海外債券(Overseas Bonds)常被貼上「高資產族群專屬」的標籤。過去動輒 1 萬甚至 10 萬美元的最低申購門檻,讓許多想尋求穩定配息的小資族望而卻步。 然而,在股市波動劇烈的環境下,尋求穩定的美元現金流與被動收入成為許多投資人
Thumbnail
債券投資,不只是高資產族群的遊戲 在傳統的投資觀念中,海外債券(Overseas Bonds)常被貼上「高資產族群專屬」的標籤。過去動輒 1 萬甚至 10 萬美元的最低申購門檻,讓許多想尋求穩定配息的小資族望而卻步。 然而,在股市波動劇烈的環境下,尋求穩定的美元現金流與被動收入成為許多投資人
Thumbnail
透過川普的近期債券交易揭露,探討債券作為資產配置中「穩定磐石」的重要性。文章分析降息對債券的潛在影響,以及股神巴菲特的操作策略。並介紹玉山證券「小額債」平臺,如何讓小資族也能低門檻參與海外債券市場,實現「低門檻、低波動、固定收益」的務實投資方式。
Thumbnail
透過川普的近期債券交易揭露,探討債券作為資產配置中「穩定磐石」的重要性。文章分析降息對債券的潛在影響,以及股神巴菲特的操作策略。並介紹玉山證券「小額債」平臺,如何讓小資族也能低門檻參與海外債券市場,實現「低門檻、低波動、固定收益」的務實投資方式。
Thumbnail
解析「債券」如何成為資產配置中的穩定錨,提供低風險高回報的投資選項。 藉由玉山證券的低門檻債券服務,投資者可輕鬆入手,平衡風險並穩定財務。
Thumbnail
解析「債券」如何成為資產配置中的穩定錨,提供低風險高回報的投資選項。 藉由玉山證券的低門檻債券服務,投資者可輕鬆入手,平衡風險並穩定財務。
Thumbnail
相較於波動較大的股票,債券能提供固定現金流,而玉山證券推出的小額債,更以1000 美元的低門檻,讓學生與新手也能參與全球優質企業債投資。玉山E-Trader平台即時報價、條件式篩選與清楚的交易流程等特色,大幅降低投資難度,對於希望分散風險、建立穩定現金流的人來說,玉山小額債是一個值得嘗試的理財起點。
Thumbnail
相較於波動較大的股票,債券能提供固定現金流,而玉山證券推出的小額債,更以1000 美元的低門檻,讓學生與新手也能參與全球優質企業債投資。玉山E-Trader平台即時報價、條件式篩選與清楚的交易流程等特色,大幅降低投資難度,對於希望分散風險、建立穩定現金流的人來說,玉山小額債是一個值得嘗試的理財起點。
Thumbnail
ModSecurity 是普遍應用之 公開網頁程式防火牆 ( 可 搭配 OWASP (Open Web Application Security Project) 維護的免費核心規則集 Core Rule Set CRS 初始設計 為 Apache HTTP Server 之模組 後續發展成 htt
Thumbnail
ModSecurity 是普遍應用之 公開網頁程式防火牆 ( 可 搭配 OWASP (Open Web Application Security Project) 維護的免費核心規則集 Core Rule Set CRS 初始設計 為 Apache HTTP Server 之模組 後續發展成 htt
Thumbnail
不知道你是否有以下困擾呢? 「自己寫好的程式,若要呈現在網路上,該怎麼辦?」 「手上有個html的檔案,但是要如何分享給朋友們?」 「做一個網站要花主機的錢,如何有個免費託管主機的地方呢?」 以上問題,將由github pages來幫你解決喔!
Thumbnail
不知道你是否有以下困擾呢? 「自己寫好的程式,若要呈現在網路上,該怎麼辦?」 「手上有個html的檔案,但是要如何分享給朋友們?」 「做一個網站要花主機的錢,如何有個免費託管主機的地方呢?」 以上問題,將由github pages來幫你解決喔!
Thumbnail
Step1: 打開github登入 https://github.com/ 創立一個Repositories把網頁檔案丟上去 之後點我圈起來的地方 把你的網頁檔案放上去 要注意把檔案都正確上傳(通常會有29個檔案) 並點擊下面確認按鈕 Step2: 打開netlify登入 https://app.n
Thumbnail
Step1: 打開github登入 https://github.com/ 創立一個Repositories把網頁檔案丟上去 之後點我圈起來的地方 把你的網頁檔案放上去 要注意把檔案都正確上傳(通常會有29個檔案) 並點擊下面確認按鈕 Step2: 打開netlify登入 https://app.n
Thumbnail
保護後端重要資訊 在 django 專案中我們會把設定都寫在 settings.py 內,包含了 SECRET_KEY 等機密資訊,通常專案都會做版本控制上 git,但把這些機密資訊也上 git 是很不好的一件事,畢竟 github 也是曾經被駭過的,所以最好是把這些不想讓別人知道的資訊寫在另外一個
Thumbnail
保護後端重要資訊 在 django 專案中我們會把設定都寫在 settings.py 內,包含了 SECRET_KEY 等機密資訊,通常專案都會做版本控制上 git,但把這些機密資訊也上 git 是很不好的一件事,畢竟 github 也是曾經被駭過的,所以最好是把這些不想讓別人知道的資訊寫在另外一個
Thumbnail
打包網頁 在部署網站之前,我們要先來打包我們的網頁前端專案 為什麼要打包呢?什麼是打包呢?這有點像是編譯,如果你寫過 C 應該講到這裡就理解為什麼要這樣做了 在網頁開發中網頁內容最原始就是直接用 html 下去寫,但一個成熟的開發者會善用框架來開發,不論是用 vue 或 react,樣式的部分也會從
Thumbnail
打包網頁 在部署網站之前,我們要先來打包我們的網頁前端專案 為什麼要打包呢?什麼是打包呢?這有點像是編譯,如果你寫過 C 應該講到這裡就理解為什麼要這樣做了 在網頁開發中網頁內容最原始就是直接用 html 下去寫,但一個成熟的開發者會善用框架來開發,不論是用 vue 或 react,樣式的部分也會從
Thumbnail
Recently, I add some useful settings for my nginx web server. I would like to take a note of some basic and useful settings of nginx. http server
Thumbnail
Recently, I add some useful settings for my nginx web server. I would like to take a note of some basic and useful settings of nginx. http server
Thumbnail
I’m sure that I would forget it again after a few months, so let’s take note of it. Installation We need to use homebrew to install certbot. renew
Thumbnail
I’m sure that I would forget it again after a few months, so let’s take note of it. Installation We need to use homebrew to install certbot. renew
Thumbnail
Development environment of Laravel. Nginx, php, mysql and centos 7
Thumbnail
Development environment of Laravel. Nginx, php, mysql and centos 7
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News