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