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