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