這是全棧數(shù)據(jù)工程師養(yǎng)成攻略系列教程的第十期：10 數(shù)據(jù)庫(kù) 用MAMP和WAMP搭建Web環(huán)境。
現(xiàn)在人人都有自己的臺(tái)式機(jī)或者筆記本，在我們的個(gè)人電腦上搭建一個(gè)Web環(huán)境，包括Web服務(wù)器和數(shù)據(jù)庫(kù)等，對(duì)后續(xù)很多開(kāi)發(fā)工作而言都是非常有用的。
Web環(huán)境
為什么需要一個(gè)Web環(huán)境呢？在數(shù)據(jù)可視化中很重要的一部分，便是基于Web網(wǎng)站進(jìn)行一些動(dòng)態(tài)交互可視化，這時(shí)候便需要一個(gè)Web環(huán)境用以部署我們的網(wǎng)站項(xiàng)目。
通常來(lái)說(shuō)，一個(gè)Web環(huán)境中會(huì)包含以下幾個(gè)組件：
- Web服務(wù)器：例如Apache和Nginx，用于接收和處理Web請(qǐng)求；
- 數(shù)據(jù)庫(kù)：最常用的即關(guān)系型數(shù)據(jù)庫(kù)MySQL，用于存儲(chǔ)和讀取數(shù)據(jù)；
- 后端語(yǔ)言：例如PHP和Python等，用于開(kāi)發(fā)Web項(xiàng)目。
在本地搭建并啟動(dòng)Web環(huán)境之后，我們便可以在瀏覽器中訪問(wèn)根目錄中的網(wǎng)站項(xiàng)目。根目錄是可配置的，可以設(shè)置成個(gè)人電腦上任意目錄下的文件夾。使用后端語(yǔ)言開(kāi)發(fā)一個(gè)Web項(xiàng)目，將其部署在根目錄下，就可以通過(guò)瀏覽器訪問(wèn)我們的項(xiàng)目，進(jìn)行瀏覽網(wǎng)頁(yè)、數(shù)據(jù)交互等操作，就如同訪問(wèn)豆瓣、鏈家等網(wǎng)站一樣，不同的只是這些網(wǎng)站部署于外網(wǎng)可訪問(wèn)的服務(wù)器上，而我們的網(wǎng)站只能在本機(jī)上訪問(wèn)。
當(dāng)然，我們不用一個(gè)個(gè)單獨(dú)地去安裝以上提及的組件，而是像Anaconda那樣，安裝一個(gè)包含全部所需內(nèi)容的套件即可，即XAMP。主要是MAMP和WAMP，分別對(duì)應(yīng)Mac OS和Windows兩大常用個(gè)人電腦操作系統(tǒng)，根據(jù)自己的操作系統(tǒng)選擇相應(yīng)的軟件并下載安裝即可。
- MAMP：Mac OS上的Apache、MySQL和PHP，https://www.mamp.info/en/；
- WAMP：Windows上的Apache、MySQL和PHP，http://www.wampserver.com/en/。
MAMP有普通版和升級(jí)版兩種，前者免費(fèi)而且功能足以滿足需求，WampServer下載時(shí)根據(jù)系統(tǒng)配置選擇64bit或32bit即可。
偏好設(shè)置
搭建環(huán)境自然會(huì)涉及到不少配置項(xiàng)內(nèi)容，或者稱作軟件的偏好設(shè)置，這里以MAMP為例講解需要了解的設(shè)置。運(yùn)行MAMP之后，可以看到以下軟件界面，非常簡(jiǎn)單清爽，只有三個(gè)按鈕，分別對(duì)應(yīng)偏好設(shè)置、打開(kāi)歡迎頁(yè)面、開(kāi)啟/停止服務(wù)。
運(yùn)行MAMP軟件之后，會(huì)自動(dòng)開(kāi)啟Web服務(wù)，開(kāi)啟成功后會(huì)在瀏覽器中彈出歡迎頁(yè)面，相當(dāng)于自動(dòng)點(diǎn)擊了第三個(gè)鍵和第二個(gè)鍵。歡迎頁(yè)面如下圖所示，可以查看PHP版本信息，提供了使用phpMyAdmin操作MySQL數(shù)據(jù)庫(kù)的鏈接入口以及數(shù)據(jù)庫(kù)信息，并給出了PHP、Python、Perl等語(yǔ)言連接并操作數(shù)據(jù)的樣例代碼。其中，phpMyAdmin是一款基于PHP開(kāi)發(fā)的前端數(shù)據(jù)庫(kù)圖形化管理工具。除此之外，可以發(fā)現(xiàn)歡迎頁(yè)面的鏈接是以localhost開(kāi)頭的，此即本地Web服務(wù)的一個(gè)別名，和movie.douban.com類似，但別人在他們的手機(jī)或電腦上則無(wú)法通過(guò)localhost訪問(wèn)你的本機(jī)Web環(huán)境。
需要重點(diǎn)介紹地是MAMP軟件界面中的偏好設(shè)置這一按鈕，英文顯示為Preferences，點(diǎn)擊之后可以進(jìn)行以下五方面的偏好設(shè)置：開(kāi)啟/停止服務(wù)選項(xiàng)、端口配置、PHP配置、Web服務(wù)器配置、數(shù)據(jù)庫(kù)配置。
- 在開(kāi)啟/停止服務(wù)選項(xiàng)中，可以設(shè)置每次運(yùn)行MAMP之后是否自動(dòng)開(kāi)啟相關(guān)服務(wù)，以及在退出MAMP之后是否自動(dòng)關(guān)閉相關(guān)服務(wù)；
- 在端口配置中，可以對(duì)Apache、Nginx、MySQL所使用的端口進(jìn)行配置。在講解url的結(jié)構(gòu)時(shí)曾簡(jiǎn)單提到過(guò)端口的概念，在同一臺(tái)機(jī)器上，不同服務(wù)使用同一個(gè)域名，因此需要使用不同的端口以進(jìn)行區(qū)分，例如Web服務(wù)、數(shù)據(jù)庫(kù)服務(wù)、ssh服務(wù)的默認(rèn)端口分別是80、3306、22。MAMP的默認(rèn)端口配置是Apache和Nginx為8888、MySQL為8889，使用一些不常用的端口主要是為了避免和其他服務(wù)的沖突；
- 在PHP配置中，可以設(shè)置PHP版本為5.x或7.x，以及是否啟動(dòng)緩存，PHP版本主要會(huì)影響到一些兼容性問(wèn)題，例如phpMyAdmin的使用可能對(duì)PHP版本有一些要求；
- 在Web服務(wù)器配置中，可以選擇將Apache或Nginx作為所使用的Web服務(wù)器，使用默認(rèn)的Apache即可。另外還可以在這里設(shè)置Web環(huán)境的根目錄，例如以用戶桌面為根目錄，則在瀏覽器中訪問(wèn)
localhost:8888即可看到桌面上的全部文件，其中8888為Apache的端口； - 在數(shù)據(jù)庫(kù)配置中，可以看到當(dāng)前所使用的MySQL版本號(hào)。
以上配置內(nèi)容中，最為重要的是各項(xiàng)服務(wù)的端口配置，以及Web環(huán)境的根目錄設(shè)置。只有理解了這兩點(diǎn)內(nèi)容，才能弄清楚應(yīng)當(dāng)把Web項(xiàng)目拷貝到哪里，以及如何在瀏覽器中訪問(wèn)到我們的項(xiàng)目。
Hello World
既然講到了新的東西，那么是時(shí)候來(lái)一發(fā)Hello World了。開(kāi)啟Web服務(wù)之后，在根目錄中新建一個(gè)hello.html，然后用Sublime進(jìn)行編輯。html即Hyper Text Markup Language，超文本標(biāo)記語(yǔ)言，使用html語(yǔ)言編寫并且以.html為后綴名的文件，是Web網(wǎng)站項(xiàng)目中最常見(jiàn)的一種靜態(tài)模版文件。在hello.html中輸入以下代碼，然后在瀏覽器中可以通過(guò)localhost:8888/hello.html訪問(wèn)到剛才所寫的文件，并看到期待的Hello World。
<html>
<header></header>
<body>
<h1>Hello World</h1>
</body>
</html>
當(dāng)然，也可以通過(guò)直接雙擊hello.html的方式運(yùn)行，同樣可以在瀏覽器中打開(kāi)并看到Hello World。但此時(shí)鏈接是以file開(kāi)頭，說(shuō)明這一操作是通過(guò)文件系統(tǒng)完成的，而并非之前所用的Web環(huán)境。
PHP是一種非常簡(jiǎn)單的后端語(yǔ)言，在PHP中也可以使用html語(yǔ)法。在根目錄中新建一個(gè)hello.php，然后用Sublime進(jìn)行編輯并輸入以下代碼，其中第一行和第四行分別是php代碼文件的頭和尾，第二行用echo命令打印出來(lái)一條文本，第三行使用phpinfo()函數(shù)打印出當(dāng)前所用PHP版本的一些信息，注意每行PHP代碼需要用分號(hào)結(jié)束。編寫完畢后，在瀏覽器中即可通過(guò)localhost:8888/hello.php訪問(wèn)到hello.php，并看到相應(yīng)的打印內(nèi)容。
<?php
echo 'Hello World';
phpinfo();
?>
以上兩個(gè)例子都說(shuō)明了，當(dāng)Web服務(wù)開(kāi)啟之后，我們可以通過(guò)瀏覽器訪問(wèn)根目錄中的內(nèi)容，并讓瀏覽器加載和渲染html、php等Web項(xiàng)目文件。
后續(xù)章節(jié)中，我們將結(jié)合實(shí)際項(xiàng)目進(jìn)一步理解Web環(huán)境的作用。例如，當(dāng)一個(gè)html文件中通過(guò)AJAX請(qǐng)求了同級(jí)目錄中的json數(shù)據(jù)時(shí)，如果僅通過(guò)雙擊的方式運(yùn)行html文件，AJAX請(qǐng)求將失??；而只有在一個(gè)Web環(huán)境中運(yùn)行這一html文件，AJAX請(qǐng)求才能成功，數(shù)據(jù)才能被獲取到并進(jìn)一步展示。當(dāng)然，如果Web項(xiàng)目中涉及到了數(shù)據(jù)庫(kù)的使用，Web環(huán)境則是更加必不可少的。
