張哲嘉的沙龍
付費限定

[27] 用 Nginx 部署前端網站

張哲嘉-avatar-img
張哲嘉
發佈於Vue+Django+MongoDB+Nginx 從網頁全端開發到架站一次教給你
更新於 發佈於 閱讀時間約 1 分鐘

打包網頁

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

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

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

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

以行動支持創作者！付費即可解鎖
本篇內容共 1497 字、0 則留言，僅發佈於Vue+Django+MongoDB+Nginx 從網頁全端開發到架站一次教給你你目前無法檢視以下內容，可能因為尚未登入，或沒有該房間的查看權限。
張哲嘉的沙龍Vue+Django+MongoDB+Nginx 從網頁全端開發到架站一次教給你
留言
avatar-img
留言分享你的想法！
avatar-img
張哲嘉的沙龍
9會員
49內容數
比起詳細教學單一技能，網路上或者市面上整合多項技能的教學相對少很多，但要真的完成一項專案往往不是只靠一項技能便能做到。 而且教科書式的完整教學也比較枯燥乏味，因此我想以自身的經驗為例，以全端開發各項技能中最常用到的部分進行講解，讓讀者能夠快速上手掌握全端技能。
張哲嘉的沙龍的其他內容
2022/10/10
[30] TLS/SSL for MongoDB
Obtain certificate 我們用之前提到的 Let’s Encript 來獲得憑證 在 nginx/sites-available 再增加一個網站設定，然後再做個連結到 nginx/sites-enabled，設定的內容就隨便寫個 server_name 和 listen 就好了 然後
Thumbnail
2022/10/10
[30] TLS/SSL for MongoDB
Obtain certificate 我們用之前提到的 Let’s Encript 來獲得憑證 在 nginx/sites-available 再增加一個網站設定，然後再做個連結到 nginx/sites-enabled，設定的內容就隨便寫個 server_name 和 listen 就好了 然後
Thumbnail
2022/10/10
[29] 讓網站更安全，不准直接連我的網站 IP
Block direct access by ip 一旦將網站對外，就要開始面對這個險惡的世界每天遭受一堆攻擊，雖然大部分都無關痛癢，幾乎都是機器人在 scan ip 然後在發一些無意義的請求，或者亂試 api，看能不能試出來...，最好是哪麼好試啦，而且加上我們之前在 JWT 篇章講到的 prot
Thumbnail
2022/10/10
[29] 讓網站更安全，不准直接連我的網站 IP
Block direct access by ip 一旦將網站對外，就要開始面對這個險惡的世界每天遭受一堆攻擊，雖然大部分都無關痛癢，幾乎都是機器人在 scan ip 然後在發一些無意義的請求，或者亂試 api，看能不能試出來...，最好是哪麼好試啦，而且加上我們之前在 JWT 篇章講到的 prot
Thumbnail
2022/10/10
[28] 用 Nginx 部署 production back-end server
保護後端重要資訊 在 django 專案中我們會把設定都寫在 settings.py 內，包含了 SECRET_KEY 等機密資訊，通常專案都會做版本控制上 git，但把這些機密資訊也上 git 是很不好的一件事，畢竟 github 也是曾經被駭過的，所以最好是把這些不想讓別人知道的資訊寫在另外一個
Thumbnail
2022/10/10
[28] 用 Nginx 部署 production back-end server
保護後端重要資訊 在 django 專案中我們會把設定都寫在 settings.py 內，包含了 SECRET_KEY 等機密資訊，通常專案都會做版本控制上 git，但把這些機密資訊也上 git 是很不好的一件事，畢竟 github 也是曾經被駭過的，所以最好是把這些不想讓別人知道的資訊寫在另外一個
Thumbnail
看更多
你可能也想看
Thumbnail
avatar-avatar
方格子 vocus 官方沙龍
2025 下半場，蝦皮分潤計畫 x vocus 陪你回顧上半年的美好開箱！
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》，我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物；這次活動不僅送出了許多獎勵，也反映了「內容有價」——創作不只是分享、紀錄，也能用各種不同形式變現、帶來實際收入。
#vocusforBusiness#蝦皮#蝦皮分潤
Thumbnail
avatar-avatar
方格子 vocus 官方沙龍
2025 下半場，蝦皮分潤計畫 x vocus 陪你回顧上半年的美好開箱！
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》，我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物；這次活動不僅送出了許多獎勵，也反映了「內容有價」——創作不只是分享、紀錄，也能用各種不同形式變現、帶來實際收入。
#vocusforBusiness#蝦皮#蝦皮分潤
Thumbnail
avatar-avatar
方格子 vocus 官方沙龍
徵才：社群與內容行銷專員 (Community & Marketing Specialist)
嗨！歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台，並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈！「創作至上」是我們的核心價值，我們致力於透過平台功能與服務，賦予創作者更多的可能。 vocus 平台匯聚了
#vocus#徵才#社群行銷
Thumbnail
avatar-avatar
方格子 vocus 官方沙龍
徵才：社群與內容行銷專員 (Community & Marketing Specialist)
嗨！歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台，並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈！「創作至上」是我們的核心價值，我們致力於透過平台功能與服務，賦予創作者更多的可能。 vocus 平台匯聚了
#vocus#徵才#社群行銷
Thumbnail
avatar-avatar
Daniel 的沙龍
[NGINX] ModSecurity #1 如何在CentOS裡 加入Nginx ModSecurity
ModSecurity 是普遍應用之 公開網頁程式防火牆 ( 可 搭配 OWASP (Open Web Application Security Project) 維護的免費核心規則集 Core Rule Set CRS 初始設計 為 Apache HTTP Server 之模組 後續發展成 htt
#Modsecurity#nginx#centos
Thumbnail
avatar-avatar
Daniel 的沙龍
[NGINX] ModSecurity #1 如何在CentOS裡 加入Nginx ModSecurity
ModSecurity 是普遍應用之 公開網頁程式防火牆 ( 可 搭配 OWASP (Open Web Application Security Project) 維護的免費核心規則集 Core Rule Set CRS 初始設計 為 Apache HTTP Server 之模組 後續發展成 htt
#Modsecurity#nginx#centos
Thumbnail
avatar-avatar
袋鼠Kangaroo's Blog
快速教你使用github部署你的網站
不知道你是否有以下困擾呢？ 「自己寫好的程式，若要呈現在網路上，該怎麼辦？」 「手上有個html的檔案，但是要如何分享給朋友們？」 「做一個網站要花主機的錢，如何有個免費託管主機的地方呢？」 以上問題，將由github pages來幫你解決喔！
#資訊科技#GitHub#教育
Thumbnail
avatar-avatar
袋鼠Kangaroo's Blog
快速教你使用github部署你的網站
不知道你是否有以下困擾呢？ 「自己寫好的程式，若要呈現在網路上，該怎麼辦？」 「手上有個html的檔案，但是要如何分享給朋友們？」 「做一個網站要花主機的錢，如何有個免費託管主機的地方呢？」 以上問題，將由github pages來幫你解決喔！
#資訊科技#GitHub#教育
Thumbnail
avatar-avatar
Gouzi5 | ASC的沙龍
智能合約web3(4)-將網站上線部屬
Step1: 打開github登入 https://github.com/ 創立一個Repositories把網頁檔案丟上去 之後點我圈起來的地方 把你的網頁檔案放上去 要注意把檔案都正確上傳(通常會有29個檔案) 並點擊下面確認按鈕 Step2: 打開netlify登入 https://app.n
#檔案#合約#網站
Thumbnail
avatar-avatar
Gouzi5 | ASC的沙龍
智能合約web3(4)-將網站上線部屬
Step1: 打開github登入 https://github.com/ 創立一個Repositories把網頁檔案丟上去 之後點我圈起來的地方 把你的網頁檔案放上去 要注意把檔案都正確上傳(通常會有29個檔案) 並點擊下面確認按鈕 Step2: 打開netlify登入 https://app.n
#檔案#合約#網站
Thumbnail
avatar-avatar
張哲嘉的沙龍
[28] 用 Nginx 部署 production back-end server
保護後端重要資訊 在 django 專案中我們會把設定都寫在 settings.py 內，包含了 SECRET_KEY 等機密資訊，通常專案都會做版本控制上 git，但把這些機密資訊也上 git 是很不好的一件事，畢竟 github 也是曾經被駭過的，所以最好是把這些不想讓別人知道的資訊寫在另外一個
#部署#網站
Thumbnail
avatar-avatar
張哲嘉的沙龍
[28] 用 Nginx 部署 production back-end server
保護後端重要資訊 在 django 專案中我們會把設定都寫在 settings.py 內，包含了 SECRET_KEY 等機密資訊，通常專案都會做版本控制上 git，但把這些機密資訊也上 git 是很不好的一件事，畢竟 github 也是曾經被駭過的，所以最好是把這些不想讓別人知道的資訊寫在另外一個
#部署#網站
Thumbnail
avatar-avatar
張哲嘉的沙龍
[27] 用 Nginx 部署前端網站
打包網頁 在部署網站之前，我們要先來打包我們的網頁前端專案 為什麼要打包呢？什麼是打包呢？這有點像是編譯，如果你寫過 C 應該講到這裡就理解為什麼要這樣做了 在網頁開發中網頁內容最原始就是直接用 html 下去寫，但一個成熟的開發者會善用框架來開發，不論是用 vue 或 react，樣式的部分也會從
#網頁#網站#部署
Thumbnail
avatar-avatar
張哲嘉的沙龍
[27] 用 Nginx 部署前端網站
打包網頁 在部署網站之前，我們要先來打包我們的網頁前端專案 為什麼要打包呢？什麼是打包呢？這有點像是編譯，如果你寫過 C 應該講到這裡就理解為什麼要這樣做了 在網頁開發中網頁內容最原始就是直接用 html 下去寫，但一個成熟的開發者會善用框架來開發，不論是用 vue 或 react，樣式的部分也會從
#網頁#網站#部署
Thumbnail
avatar-avatar
張哲嘉的沙龍
Basic settings of Nginx
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
#Nginx#devops
Thumbnail
avatar-avatar
張哲嘉的沙龍
Basic settings of Nginx
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
#Nginx#devops
Thumbnail
avatar-avatar
張哲嘉的沙龍
Let’s Encrypt in Nginx
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
#Nginx#devops#letsencript
Thumbnail
avatar-avatar
張哲嘉的沙龍
Let’s Encrypt in Nginx
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
#Nginx#devops#letsencript
Thumbnail
avatar-avatar
yuanchin的沙龍
搭建一個 Laravel 開發環境（Linux, Nginx, MySQL and PHP）
Development environment of Laravel. Nginx, php, mysql and centos 7
#Laravel#Nginx#MySQL
Thumbnail
avatar-avatar
yuanchin的沙龍
搭建一個 Laravel 開發環境（Linux, Nginx, MySQL and PHP）
Development environment of Laravel. Nginx, php, mysql and centos 7
#Laravel#Nginx#MySQL
Thumbnail
avatar-avatar
Vic Lin的沙龍
React Hello World
接續上一篇，這邊要來寫一個React hello world app，最後安裝webpack-dev-server來提升開發效率。 使用npm安裝react, react-dom: $ npm install react react-dom --save dependencies下紀錄的是生產環境會
#React
Thumbnail
avatar-avatar
Vic Lin的沙龍
React Hello World
接續上一篇，這邊要來寫一個React hello world app，最後安裝webpack-dev-server來提升開發效率。 使用npm安裝react, react-dom: $ npm install react react-dom --save dependencies下紀錄的是生產環境會
#React
Thumbnail
avatar-avatar
Vic Lin的沙龍
CentOS 8 安裝 LEMP
本筆記紀錄如何在Linux(CentOS 8)安裝Nginx, MySQL, PHP環境。...
#CentOS#CentOS8#LEMP
Thumbnail
avatar-avatar
Vic Lin的沙龍
CentOS 8 安裝 LEMP
本筆記紀錄如何在Linux(CentOS 8)安裝Nginx, MySQL, PHP環境。...
#CentOS#CentOS8#LEMP
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News