聯絡我們
更多案例
更多案例
更多案例
  1. 首頁
  2. 開發日誌
  3. 主機架設
  4. 網站架設之於開發者的第一步－XAMPP-VM for Mac 簡易教學
回上一頁
    內容大綱
24
2024/07

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

網站架設seo

  基本概念

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常見問題傳送門

其它資訊：

關於可思科技

我們是一家「綜合型」的SEO服務公司，提供技術與內容並存的SEO優化，擁有經驗豐富的網站工程師，加上用心的文案團隊，讓網站成為「專業領域的權威網站」！
立即諮詢