Web development - 網站架設教學 - Xampp 安裝 & 設定虛擬網域 (vhost)

2020-07-27
    Article outline
一、架設 Web Server
  1. 2. 安裝完成後開啟 Xampp 控制面版(Control Panel)
  2. 3. 啟動Apache
  3. 4. 開啟網頁,網址輸入127.0.0.1 看看是否啟動成功
 
二、設定 vhost (虛擬網域)
  1. 1. 開啟 Xampp 控制面版(Control Panel)
  2. 2. 開啟檔案,{你的Xampp安裝路徑}\xampp\apache\conf\extra\httpd-vhosts.conf
  3. 3. 在檔案最後,加上以下設定值,並儲存
<VirtualHost {你的網域名稱}:80>
    DocumentRoot "{你的專案資料夾}"
    ServerName {你的網域名稱}
</VirtualHost>
  1.  
  2. 4. 開啟檔案,C:\Windows\System32\drivers\etc\hosts
  3. 5. 在檔案最後,加上以下設定值,並儲存
127.0.0.1         {你的網域名稱}
ps. 如果無法儲存可能是檔案權限問題,請打開檔案修改寫入權限,再重新修改儲存
  1.  
  2. 6. 開啟 Xampp 控制面版,重新啟動 Apache
  3. 7. 開啟網站,網址輸入{你的網域名稱},看看是否能正常瀏覽
 
 

2020-03-26

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

    Article outline

  基本概念

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)

 

 

  權限設定

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

 

 

  解除安裝

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

 

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

 

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

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


2021-12-01

網站架設 - xampp x laravel 框架

    Article outline

鑒於最近開始架設網站

自己又是一個很健忘的人,來寫一篇文說說怎麼做基礎的網站架設吧!


首先

先來介紹架設網站的工具 — XAMPP

這是一款免費且裡面包含PHPApacheMySQL…等各種架設網站會用到的工具集合包。

只要連到XAMPP的網站就可以下載,後面也會介紹設定的步驟。

接著是介紹PHP的框架 — Laravel

這是一個PHP的開源框架(Framework),使用框架的好處是已經有設計好的網站雛形,之後改寫或設計時也能直接套用已經寫好的方式或版型修改。

既然主題是網站架設,那我們的目的就是能快速呈現網頁的成果,所以使用框架做基礎網站架設。

介紹完了兩個最主要的內容,就直接開始吧!

安裝XAMPP

  1. 到XAMPP的網站下載符合電腦系統的安裝包 — 網站連結

2. 點擊安裝包開始安裝,一開始會跳出提示,避免UAC權限造成問題,盡量不要安裝在C:\Program Files內。安裝過程一路按確定就OK,windows用戶的預設路徑會在C:\xampp。

安裝Laravel

  1. 安裝Laravel之前,我們需要先安裝方便管理PHP的軟體工具 — Composer
    windows版作業系統只要安裝網站給的exe檔就 解決了— 下載連結
  2. 安裝Composer時,前面直接下一步,接著要選擇要使用的PHP位置。剛剛安裝的XAMPP內自帶PHP,而PHP執行檔的位置在xampp\php\php.exe,若是XAMPP安裝在預設目錄,則在C:\xampp\php\php.exe。
  3. 這步驟結束一直按下一步就安裝完成了!

安裝完成後要確定是否成功安裝,windows版可以使用win鍵+R並輸入「cmd」開啟命令提示字元工具,並輸入composer,出現大大的"COMPOSER"字樣就是成功了!

因為自己電腦已經安裝,這是別人電腦請別介意名稱:P

4. 繼續使用命令提示字元工具輸入下面指令,Composer工具就會開始幫使用者下載Laravel的安裝工具到環境中

composer global require"laravel/installer"

5. 使用Laravel安裝工具使用下面指令建立一個專案,這裡移動到xampp\htdocs目錄底下

(使用cd ..退回和cd 資料夾名稱移動到想建立的位置)

laravel new projectName

經過漫長的等待,可以在目的資料夾內看到一個建置完成的預設Laravel專案

完成訊息

可以開啟XAMPP的Apache看看成果如何,開啟瀏覽器網址列輸入

localhost

開啟的並不是Laravel的網頁,而是一個類似資料夾的頁面,因為預設開啟的路徑是在xampp\htdocs底下,但在裡面沒有找到index.php的檔案


怎麼開啟呢?

第一個方法

直接點檔案夾的web->public或者在網址輸入localhost/web/public就可以看到Laravel的預設頁面,但每次輸入都要點按或者輸入一長串的路徑改變指向就會有點麻煩!

第二個方法

修改伺服器指向的位置到xampp\htdocs\web\public中,就不用每次指定位置,而修改的方法是到xampp\apache\conf目錄底下開啟httpd.conf設定檔找到

Define SRVROOT "C:/xampp/apache"

ServerRoot "C:/xampp/apache"

改為

Define SRVROOT “C:/xampp/apache/web/public”

ServerRoot “C:/xampp/apache/web/public”

接著重啟Apache(在XAMPP點Stop後再Start)

回網址列輸入localhost,就可以看到預設的Laravel網頁了!


2020-05-22

網站架設教學:如何更新 XAMPP 的 PHP 版本? - 以 PHP 7.2 為例

    Article outline

身為一個網站架設開發者,除了程式BUG之外,最常遇到的問題無非就是環境設置的部分,正好最近因專案需求,需要更新我的 PHP 版本,因此來撰寫並記錄一下我使用 XAMPP 從 PHP 5.6 版升級 PHP 7.2 版的過程
 
Step 1.  至  https://windows.php.net/download/ 下載適合電腦位元的 php 7.2 版 Zip 檔,注意需選擇 "Thread Safe"的版本
 
Step 2.  解壓縮zip檔, 並將檔案資料夾命名為 php,將此資料夾放至xampp資料夾中,原本存在 xampp 的 php 資料夾則另外命名
 
Step 3.至 XAMPP 控制面版,點選 Config 按鈕,開啟 httpd-xampp.conf 檔,並依下列說明修改檔案內容:
 
 
3-1. 找到下列的文字,修改下面黃底的文字內容
ps. 請確認修改路徑的檔案真實存在,若無此檔案,代表你可能載錯 php 版本囉!
 
修改前:
LoadFile "C:/xampp/php/php5ts.dll"
LoadFile "C:/xampp/php/libpq.dll"
LoadModule php5_module "C:/xampp/php/php5apache2_4.dll"
 
修改後:
LoadFile "C:/xampp/php/php7ts.dll"
LoadFile "C:/xampp/php/libpq.dll"
LoadModule php7_module "C:/xampp/php/php7apache2_4.dll"
 
3-2. 取代 httpd-xampp.conf 下所有"php5_module"文字為"php7_module"
 
Step 4. 更新換完php版本檔案後,這時要重建 php.ini設定檔,依循下列步驟:
 
4-1. 複製php資料夾中的 php.ini-development,並重新命名為 php.ini
 
4-2. 打開 php.ini 檔,並依網站需求開啟相關模組,下面列幾項為我網站架設會使用到的幾個設定(紅字為需詳細確認的部分):
# 將前面的分號刪除,開啟設定
extension=curl
extension=gd2
extension=mbstring
extension=mysqli
extension=openssl
 
 
# 要指定好載入模組的資料夾,否則網站載模組時會出錯
extension_dir = "ext"
 
 
# 常見設定
max_execution_time = 600
short_open_tag = On
max_input_time = 180
error_reporting=E_ALL & ~E_DEPRECATED & ~E_STRICT
memory_limit = 500M
post_max_size = 500M
upload_max_filesize = 100M
max_file_uploads = 50
 
Step 5. 至 XAMPP 控制面版,重啟 Apache,即可測試看看網站跑不跑的起來、設定有沒有成功囉 !
 
 
參考文獻:

2021-12-13

虛擬主機、虛擬專屬主機(VPS)、雲端主機、實體主機傻傻分不清楚嗎?又該怎麼選擇虛擬主機方案呢?

    Article outline

為什麼架設網站需要虛擬主機呢?為什麼又分成虛擬主機、虛擬專屬主機(VPS) 、雲端主機及實體主機?差異又在哪呢?今天就帶你解析虛擬主機,看完這篇相信你會對該怎麼選擇虛擬主機更有方向唷!

 

什麼是虛擬主機?

虛擬主機(Shared Web Hosting)又稱之為共享主機(Shared Hosting),市面上一般又稱做虛擬空間、網頁空間、網站空間、主機空間或是網頁代管與網站代管。


顧名思義就是「虛擬」的「主機」,其方式是由一台真實的實體主機,經過軟體程式分割成多個獨立的虛擬空間,而這些藉由軟體程式切分出來的每一個虛擬空間就成為一個各自獨立的虛擬主機,每個虛擬主機之間擁有不同的規格配置,來出租給各種不同需求的人。每一台虛擬主機都具有獨立的功能變數名稱或 IP 位址,具有完整的 Internet 伺服器( WWW 、 FTP 、 Email 等)功能 ,虛擬主機之間完全獨立,並可由用戶自行管理,每一台虛擬主機就如同一台真實的獨立的主機一樣 。


一台實體主機的價格非常昂貴,同時還需要由專業技術人員進行架設、運行與管理、維護等等…..但虛擬主機是由用戶共同分擔相關硬體設備、網路頻寬、電信線路、高技術性的主機維護工作...等龐大費用,所以採用虛擬主機不但降低投資風險也大大的節省了用戶所需要花費的成本,故是許多網站架設的首選。

 

什麼是VPS主機?

VPS 主機 ( Virtual Private Server ) 又稱之為虛擬專屬主機,與虛擬主機一樣是由一台實體主機分割成多個虛擬空間,但與虛擬主機不同的是,VPS主機擁有不受干擾的獨立環境及自主管理權限,擁有專屬的硬體資源(例如CPU、RAM與主機空間),可自行安排主機環境及安裝所有程式,完全獨立使用主機實體資源,無需與其他用戶共享,能使用的資源更多。而VPS主機最大的自由度在於,日後當你發現系統資源不敷使用,可以向主機商尋求升級增加硬體資源規格(例如CPU、RAM與主機空間) ,靈活度極高!


需要注意的是,VPS主機雖然自由度很高,但它不像虛擬主機有提供完整的軟硬體管理,大多數可能是無管理(Unmanaged VPS)的銷售方式,也就是除了硬體發生問題外,其餘作業系統或軟體等…部分發生問題時都是必須由使用者自行解決的,然而,全管理(Fully Managed VPS)也不是全部都會幫你處理,有些VPS主機業者仍會依照支援的層級來酌收支援費用,主要差別在於有無提供線上的技術支援服務。

 

什麼是雲端主機?

近幾年開始流行起的雲端主機(Cloud Hosting)其實和VPS主機有很多相似地方,都享有獨立空間不需與別人共用資源,也會預先分配好可使用的資源範圍,與VPS主機不同的是,VPS主機是採取月租費制, 每個月就是固定分配硬體資源給你,並針對你租用的資源方案進行固定收費,不論有沒有使用到這些量,都會收取同樣費用。而雲端主機是採用流量進行計費,如果當月沒用到這麼多流量,就會少收一點。相反的,假設你當月的使用流量超額,那麼主機商就會針對超過的流量進行額外計費。

 

什麼是實體主機?

實體主機 ( Dedicated Server ) 是將一台完整的實體主機給單一用戶獨立使用,主機內的系統資源 100% 完全由單一客戶使用,用戶能充分使用整台主機資源,不會有其他用戶與您共享主機資源。但架設費用相較於虛擬主機則高出許多,Server主機、軟體、防火牆、UPS不斷電系統等…都是需要額外花費的周邊相關附加項目,以及需有專業技術人員定期維護及管理該主機,費用對於剛要架設網站的一般客戶來說是一筆不小的開銷。

 

該怎麼選擇虛擬主機方案呢?

這要取決你擁有多少網站?擁有的網站屬於哪種類型?以及你的預算是多少?
一般來說,虛擬主機比較適合個人網站或一般形象網站的客戶,是你剛開始建立網站最佳的主機方案,除了入門價格相較便宜之外,後台介面簡單容易上手,且由主機商統一維護處理,對於在網站建立的初期來說,大大降低了所需要的人力及時間成本。


VPS主機則比較適合中大型網站,因為VPS可以隨時擴充硬體資源的特性,很適合用於購物網站或是經常舉辦線上活動,以及需要應付瞬間湧入大量流量的電商網站


若你只是偶爾辦個抽獎活動時需要加大主機資源,辦完後會再縮小,或有特定的期間需要較高流量或較快速度時,則可以選擇用多少付多少的雲端主機方案。


實體主機則是適合高流量的大型企業或組織,或需要高度安全性的網站使用者,可以完全獨享所有資源,不用與其他人共用空間。

 

看完是不是覺得對虛擬主機怎麼選擇更有方向了呢?當我們要架設網站時都會需要一台主機來儲存網站各種資料,會依照你的需求而有各種不同方案費用,選擇一個最適合自己網站的虛擬主機方案,絕對會幫助你在架設網站的過程中更加事半功倍唷!若還是不知道從何下手尋找適合的主機商,趕快連絡可思科技幫你推薦吧!
 


Related information

Other Articles

Customer Service

Customer Service

LINE Contact