付費限定

[27] 用 Nginx 部署前端網站

更新於 發佈於 閱讀時間約 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
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
在現代網站中,HTTPS(HTTP Secure)已成為保護用戶資料和確保網站安全的重要標準。使用 Let's Encrypt 免費的 SSL 憑證,結合 Nginx 網頁伺服器,我們可以快速將網站配置為 HTTPS,並自動將 HTTP 流量重定向到 HTTPS。本教程將介紹如何安裝 Nginx
安裝官方 nginx 先在/etc/yum.repos.d新增一個nginx.repo的檔案 並加入以下內容 [nginx] name=nginx repo baseurl=http://nginx.org/packages/centos/$releasever/$basearch/ gpgc
架設第一個網站是一個令人興奮且具有挑戰性的過程。這篇文章將詳細介紹如何從零開始,逐步完成一個基本的網站,並且涵蓋所需的主要步驟。 1. 計劃與構思 在開始技術工作之前,首先要明確網站的目的和目標受眾。問問自己以下問題: 這個網站的主要目的是什么?(例如,博客、電子商務、個人作品集等) 目標受
首先開啓終端機 切換成su帳號 sudo -i 安裝Apache dnf install httpd 新增Apache配置檔 vim /etc/httpd/conf.d/nextcloud.conf 將以下內容貼上後存檔(:wq) <VirtualHost *:80> Docu
Thumbnail
Vite 是由 Vue 開發者 Evan You 所開發出來,用來加快、優化程式碼打包的工具,在這裡我們不免會需要提到大部分前端開發者可能都會聽過、使用過的前端工具:Webpack。 在那之前,我們先來聊聊為什麼前端會需要所謂的打包工具呢?
Thumbnail
這篇文章將會提供在伺服器上安裝憑證的步驟,包括下載憑證,設定php.ini以及重新啟動Web Server等。
Thumbnail
env 環境變數的設定,通常是為為了 server 而設定的,能快速的切換狀態,但現在的網頁開始,前端的範圍逐漸往後端靠近,所以在設定,也會有 client 的變數會想要在 .env 的情況。此篇就是以 nuxt 為實作,分享此內容 前端架構 最常見的 front 架構,就是把專案 buil
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
在現代網站中,HTTPS(HTTP Secure)已成為保護用戶資料和確保網站安全的重要標準。使用 Let's Encrypt 免費的 SSL 憑證,結合 Nginx 網頁伺服器,我們可以快速將網站配置為 HTTPS,並自動將 HTTP 流量重定向到 HTTPS。本教程將介紹如何安裝 Nginx
安裝官方 nginx 先在/etc/yum.repos.d新增一個nginx.repo的檔案 並加入以下內容 [nginx] name=nginx repo baseurl=http://nginx.org/packages/centos/$releasever/$basearch/ gpgc
架設第一個網站是一個令人興奮且具有挑戰性的過程。這篇文章將詳細介紹如何從零開始,逐步完成一個基本的網站,並且涵蓋所需的主要步驟。 1. 計劃與構思 在開始技術工作之前,首先要明確網站的目的和目標受眾。問問自己以下問題: 這個網站的主要目的是什么?(例如,博客、電子商務、個人作品集等) 目標受
首先開啓終端機 切換成su帳號 sudo -i 安裝Apache dnf install httpd 新增Apache配置檔 vim /etc/httpd/conf.d/nextcloud.conf 將以下內容貼上後存檔(:wq) <VirtualHost *:80> Docu
Thumbnail
Vite 是由 Vue 開發者 Evan You 所開發出來,用來加快、優化程式碼打包的工具,在這裡我們不免會需要提到大部分前端開發者可能都會聽過、使用過的前端工具:Webpack。 在那之前,我們先來聊聊為什麼前端會需要所謂的打包工具呢?
Thumbnail
這篇文章將會提供在伺服器上安裝憑證的步驟,包括下載憑證,設定php.ini以及重新啟動Web Server等。
Thumbnail
env 環境變數的設定,通常是為為了 server 而設定的,能快速的切換狀態,但現在的網頁開始,前端的範圍逐漸往後端靠近,所以在設定,也會有 client 的變數會想要在 .env 的情況。此篇就是以 nuxt 為實作,分享此內容 前端架構 最常見的 front 架構,就是把專案 buil