鑒于很多人問過我這個(gè)問題，為此特意寫這篇文章。
通常，因?yàn)闆]有后臺(tái)基礎(chǔ)，往往項(xiàng)目部署對(duì)于很多前端工程師來講既神秘，又難以捉摸。
本文以我的開源博客sinn為例，為你梳理一個(gè)web應(yīng)用是如何跑起來的。
一，跑起一個(gè)web應(yīng)用需要哪些準(zhǔn)備
要跑起一個(gè)web應(yīng)用，它通常需要以下幾樣?xùn)|西：
- 服務(wù)器
- 編程語言環(huán)境
- 應(yīng)用程序
- 應(yīng)用依賴的工具
下面來說說它們各自的作用。
** 1，首先說說web服務(wù)器 **
任何應(yīng)用程序都是基于操作系統(tǒng)運(yùn)行起來的，web應(yīng)用也不例外。
服務(wù)器通常包含了操作系統(tǒng)以及相關(guān)的服務(wù)，如網(wǎng)絡(luò)服務(wù)，IP服務(wù)等等。對(duì)于web應(yīng)用來說，web服務(wù)器的主要作用在于為web應(yīng)用程序的運(yùn)行提供操作系統(tǒng)環(huán)境以及服務(wù)。
目前服務(wù)器按操作系統(tǒng)可分為兩大類，一類是window服務(wù)器，二是linux服務(wù)器。很顯然，window服務(wù)器自帶了window操作系統(tǒng)，linux服務(wù)器自帶了linxu操作系統(tǒng)。
其中l(wèi)inux服務(wù)器應(yīng)用最為廣泛，而linux服務(wù)器的操作系統(tǒng)有好幾種，主要有RHEL、CentOS、Debian、Ubuntu、Suse。其中用的最多的莫過于ubuntu和centos系統(tǒng)。
而window服務(wù)器則由于其糟糕的生態(tài)等原因而越來越不受歡迎。通常部署應(yīng)用首推linux服務(wù)器。
因此，首先你需要一個(gè)linux服務(wù)器為應(yīng)用程序提供操作系統(tǒng)運(yùn)行環(huán)境和服務(wù)。
** 2，其次，編程語言環(huán)境 **
所謂編程語言環(huán)境，也就是nodejs, java, php等編程語言的運(yùn)行環(huán)境。
應(yīng)用程序是使用編程語言開發(fā)的，因此，應(yīng)用程序的運(yùn)行需要依賴于編程語言環(huán)境。
舉個(gè)例子，要運(yùn)行一個(gè)nodejs后臺(tái)應(yīng)用，就需要有nodejs運(yùn)行環(huán)境。運(yùn)行一個(gè)java后臺(tái)應(yīng)用，就需要有java運(yùn)行環(huán)境。
有必須說明的是，一個(gè)網(wǎng)站的前臺(tái)和后臺(tái)的運(yùn)行環(huán)境是不一樣的。
前臺(tái)的編程語言環(huán)境在客戶端(瀏覽器)，后臺(tái)的編程語言環(huán)境在服務(wù)器端。
** 前臺(tái) **
前臺(tái)主要是在客戶端運(yùn)行的，也就是在瀏覽器渲染的。前臺(tái)的編程語言環(huán)境就是瀏覽器環(huán)境，這是因?yàn)榍芭_(tái)的編程語言主要是html,css和js，而瀏覽器本身內(nèi)置了對(duì)html,css和js的解析。也就是說，前臺(tái)應(yīng)用并不需要在服務(wù)器搭建編程語言環(huán)境。** 后臺(tái) **
后臺(tái)則不同，后臺(tái)應(yīng)用是在服務(wù)器端運(yùn)行，但服務(wù)器通常不會(huì)集成編程語言環(huán)境，因此后臺(tái)應(yīng)用往往需要在服務(wù)器搭建自己的編程語言環(huán)境。如果是nodejs應(yīng)用，就搭建nodejs運(yùn)行環(huán)境，如果是php應(yīng)用，就需要搭建php運(yùn)行環(huán)境，等等。
因此，有了服務(wù)器之后，你就可以在服務(wù)器上搭建你的后臺(tái)編程語言環(huán)境。
** 3，應(yīng)用程序 **
有了服務(wù)器和編程語言環(huán)境后，就等于有了應(yīng)用程序的運(yùn)行基礎(chǔ)。
這里所指的應(yīng)用程序，是你基于某種編程語言開發(fā)出來的應(yīng)用。比如一個(gè)基于nodejs開發(fā)的node后臺(tái)應(yīng)用。
** 4，依賴的工具 **
有了應(yīng)用程序之后，還需要搭建一些這個(gè)應(yīng)用程序所依賴的工具。
比如說，后臺(tái)應(yīng)用往往需要數(shù)據(jù)庫來存儲(chǔ)應(yīng)用數(shù)據(jù)，比如mongodb,mysql等等。
而前臺(tái)應(yīng)用往往需要nginx來做靜態(tài)資源服務(wù)，nginx也可用于做代理和接口轉(zhuǎn)發(fā)。
這些都是應(yīng)用程序運(yùn)行所依賴的工具。
至此，服務(wù)器，編程語言環(huán)境，應(yīng)用程序，依賴的工具都具備了，可以著手部署應(yīng)用了。
二，前臺(tái)部署與后臺(tái)部署的不同
這里主要講兩點(diǎn)不同。
1，部署的方式不同。
** 前臺(tái) **
首先，前臺(tái)所用的編程語言主要有html,css,js，前臺(tái)代碼主要生成一些靜態(tài)資源文件，比如html文件，css文件，js文件等靜態(tài)資源文件。
因此，前臺(tái)應(yīng)用的部署實(shí)際上就是靜態(tài)資源的部署。
那么，如何在服務(wù)器上做靜態(tài)資源部署呢？
首先，前臺(tái)代碼生成一些靜態(tài)資源文件，比如html文件，css文件，js文件等靜態(tài)資源文件。
然后把這些靜態(tài)資源(前臺(tái)代碼）發(fā)布到服務(wù)器上的某個(gè)目錄下，然后在服務(wù)器端用nginx,apache或tomcat等工具架起一層靜態(tài)資源訪問服務(wù)，指定當(dāng)客戶端(瀏覽器)根據(jù)域名訪問時(shí)，訪問這個(gè)靜態(tài)資源目錄下的入口文件，比如index.html。
入口文件往往加載了一些css文件，js文件，圖片等靜態(tài)資源文件，因此，當(dāng)訪問入口文件index.html時(shí)瀏覽器會(huì)根據(jù)入口文件里的引用去請(qǐng)求服務(wù)器靜態(tài)資源目錄下的css文件，js文件，圖片等靜態(tài)資源。
所以，當(dāng)你打開一個(gè)網(wǎng)頁的時(shí)候，通過控制臺(tái)，你通常會(huì)看到下面這樣的請(qǐng)求:
如上圖，當(dāng)訪問http://sinn.boyagirl.com的時(shí)候，實(shí)際上是瀏覽器請(qǐng)求了域名為sinn.boyagirl.com的服務(wù)器上某靜態(tài)資源目錄下的index.html文件并做渲染處理，在渲染時(shí)瀏覽器再根據(jù)index.html里面的引用去請(qǐng)求這個(gè)靜態(tài)資源目錄下的css,js,img等靜態(tài)資源，并在瀏覽器渲染出來。
瀏覽器的請(qǐng)求分為兩類，一類是靜態(tài)資源請(qǐng)求，比如請(qǐng)求html,css,js,img等靜態(tài)資源，其作用在于把應(yīng)用前臺(tái)UI渲染出來。另一類請(qǐng)求則是接口請(qǐng)求, 也就是請(qǐng)求后臺(tái)接口，與后臺(tái)應(yīng)用進(jìn)行數(shù)據(jù)交互，將請(qǐng)求的數(shù)據(jù)賦給UI。
以上就是前臺(tái)部署和訪問的全過程。
** 后臺(tái) **
后臺(tái)應(yīng)用是在服務(wù)器端運(yùn)行的，因此首先需要在后端搭建該應(yīng)用的編程語言環(huán)境。其次搭建該應(yīng)用所依賴的工具，比如數(shù)據(jù)庫，進(jìn)程管理工具等等。
以sinn的后臺(tái)sinn-server為例。這是一個(gè)基于nodejs開發(fā)后臺(tái)應(yīng)用，使用mongodb作為數(shù)據(jù)庫。
因此，部署sinn-server，首先需要在服務(wù)器搭建nodejs運(yùn)行環(huán)境。有了nodejs編程語言環(huán)境之后，還需要搭建mongodb數(shù)據(jù)庫等依賴的工具。
2，部署工具不同
前臺(tái)部署是靜態(tài)資源部署，使用了nginx, apache,或者tomcat等工具。其中最常用的就是nginx。
后臺(tái)部署需要搭建編程語言環(huán)境，如果是php,java等應(yīng)用，通常也還需要使用apache/tomcat搭建相應(yīng)的程序服務(wù)。除此之外，后臺(tái)應(yīng)用往往還依賴數(shù)據(jù)庫，進(jìn)程管理器等應(yīng)用程序工具。
經(jīng)過上面的分析之后呢，我們已經(jīng)了解到了部署一個(gè)應(yīng)用程序的過程。
