網站架設之於開發者的第一步-XAMPP-VM for Mac 簡易教學

2020-03-26
    內容大綱

  基本概念

XAMPP-VM顧名思義,就是在電腦上建立一個獨立的虛擬機器(Virtual Machine, VM)做為伺服器環境。

所以在資料夾的操作上,會是在該虛擬機器上做處理,而不會像過去一樣在本機的XAMPP資料夾底下。

 但本機還是有VM的資料存放在 userName/.bitnami 底下, userName/.bitnami/stackman/machines/xampp/volumes/ 就等同於VM上的 opt/ 

 

  安裝

XAMPP-VM的安裝方式非常快速,只需要:

  1. 1.雙擊dmg檔
  2. 2.加入APP資料夾即可點擊app icon運行
  3.   超無感安裝XD  

 

  啟動

依序開啟下方各功能。

Stack manager

Port forwarding

**一般而言,網頁瀏覽localhost用的port是80,而上圖意思是在本機瀏覽是用port 8080去讀取VM上的port 80**

 

Mounted volumes

**Mount是將VM掛載,掛載後點擊Explore,就可以瀏覽VM上的XAMPP資料夾,進一步建立自己的專案與修改設定等等**

 

  設定vhost

  1. 1.編輯 /opt/lampp/etc/httpd.conf,將以下註解打開
    #Include etc/extra/httpd-vhosts.conf
    1.  
    2. 2.編輯 /opt/lampp/etc/extra/httpd-vhosts.conf
      #設定專案的vhost
      <VirtualHost *:80>
          DocumentRoot "/opt/lampp/htdocs/project"(專案資料夾)
          ServerName project.localhost(虛擬主機域名)
          <Directory "/opt/lampp/htdocs/project">
              Options Indexes FollowSymLinks Includes ExecCGI
              AllowOverride All
              Order Allow,Deny
              Allow From All
          </Directory>
          ErrorLog "logs/project-error_log"
      </VirtualHost>  
       
      #為了讓localhost正常運作,以下也是必須的
      <VirtualHost *:80>
          DocumentRoot "/opt/lampp/htdocs"
          ServerName localhost
          <Directory "/opt/lampp/htdocs">
              Options Indexes FollowSymLinks Includes ExecCGI
              AllowOverride All
              Order Allow,Deny
              Allow From All
          </Directory>
      </VirtualHost> 
    3.  
    4. 3.在terminal輸入 sudo vi /etc/hosts,新增域名
      127.0.0.1 project.localhost
    5.  
    6. 4.然後就可以從project.localhost:8080瀏覽你的網站囉!(記得要加:8080)

 

  權限設定

為了讓專案中的程式運行順暢,可把htdocs底下的資料夾與檔案權限開啟。

  1. 1.右鍵/opt/lampp/htdocs資料夾,點擊「取得資訊」
  2. 2.點擊最下方的共享與權限的左下方+號,選取當前使用者(記得要先把鎖頭打開喔!)
  3. 3.點擊+號旁邊的按鈕,選擇「套用至內含的項目」

 

  解除安裝

  1. 1.把XAMPP-VM從APP資料夾移到垃圾桶
  2. 2.刪除 userName/.bitnami 底下的XAMPP資料夾

 

  以上來自身為MAC白痴(作者本人)的初學心得XD,希望能夠幫助到第一次用MAC建置環境的新手們! 

 

>> XAMPP-VM官方入門介紹傳送門

>> XAMPP-VM常見問題傳送門


相關資訊

其它資訊