38
使 wagon + VS Code 輕鬆打造 Windows 平台 PHP/Laravel 開發環境 2016/07/14 范聖佑 Shengyou Fan Laradebut #2

使用 wagon + VS Code 輕鬆打造 Windows 平台 PHP/Laravel 開發環境

Embed Size (px)

Citation preview

Page 1: 使用 wagon + VS Code 輕鬆打造 Windows 平台 PHP/Laravel 開發環境

使⽤用 wagon + VS Code輕鬆打造 Windows 平台 PHP/Laravel 開發環境

2016/07/14

范聖佑  Shengyou  Fan

Laradebut  #2

Page 2: 使用 wagon + VS Code 輕鬆打造 Windows 平台 PHP/Laravel 開發環境

https://youtu.be/a025Go_wTgA

看作者親⾃自⽰示範?沒問題!

Laradebut #2活動現場紀錄錄影

Page 3: 使用 wagon + VS Code 輕鬆打造 Windows 平台 PHP/Laravel 開發環境

范聖佑@shengyou http://shengyoufan.com https://www.facebook.com/shengyoufan

得寬科技 研究員 Laravel 台灣 傳教士 Laravel 道場 作者

Page 4: 使用 wagon + VS Code 輕鬆打造 Windows 平台 PHP/Laravel 開發環境

⽂文件上都跟你說⽤用這種⽅方式建開發環境…

Page 5: 使用 wagon + VS Code 輕鬆打造 Windows 平台 PHP/Laravel 開發環境

使⽤用  wagon  +  VS  Code  輕鬆打造  Windows  平台  PHP/Laravel  開發環境

Mac Homestead

100% 理想開發環境

Page 6: 使用 wagon + VS Code 輕鬆打造 Windows 平台 PHP/Laravel 開發環境

使⽤用  wagon  +  VS  Code  輕鬆打造  Windows  平台  PHP/Laravel  開發環境

為什麼不⽤用 Homestead?• Homestead 是重裝備

- 新硬體才⽀支援 VT-x (近 2 年的機器⽐比較保險)

- 記憶體最好 2GB 以上- SSD 才會⽐比較順

• 指令苦⼿手怕怕

- 前置作業很多- 要看⿊黑⿊黑的畫⾯面打指令

• Mac 平台以外的雷不少

Page 7: 使用 wagon + VS Code 輕鬆打造 Windows 平台 PHP/Laravel 開發環境

使⽤用  wagon  +  VS  Code  輕鬆打造  Windows  平台  PHP/Laravel  開發環境

開發需求

網⾴頁伺服器(Apache)

資料庫(MySQL)

PHP 直譯器composer套件管理

Adminer資料庫操作

cmder指令執⾏行

git版本控制

運⾏行環境 開發⼯工具

Page 8: 使用 wagon + VS Code 輕鬆打造 Windows 平台 PHP/Laravel 開發環境

只是想要寫個 Laravel,有沒有簡單的⽅方法呢?

(聽說⼀一定要有法師哽…)

Page 9: 使用 wagon + VS Code 輕鬆打造 Windows 平台 PHP/Laravel 開發環境

彰師⼤大資⼯工系學會 Laravel ⼯工作坊2014/12/6, 7, 13, 14

故事是這樣開始的…

Page 10: 使用 wagon + VS Code 輕鬆打造 Windows 平台 PHP/Laravel 開發環境

Σ(;゚д゚)重開機⼀一切重來…

Page 11: 使用 wagon + VS Code 輕鬆打造 Windows 平台 PHP/Laravel 開發環境

(╯•ὤ̀•)́╯翻桌!

Page 12: 使用 wagon + VS Code 輕鬆打造 Windows 平台 PHP/Laravel 開發環境

使⽤用  wagon  +  VS  Code  輕鬆打造  Windows  平台  PHP/Laravel  開發環境

★ wagon 的故事:https://www.youtube.com/watch?v=O7ynMSd0Tlo

Page 13: 使用 wagon + VS Code 輕鬆打造 Windows 平台 PHP/Laravel 開發環境

使⽤用  wagon  +  VS  Code  輕鬆打造  Windows  平台  PHP/Laravel  開發環境

wagon 可攜式懶⼈人包• 免安裝/設定 cmder,還帶⼀一堆 plugins

• 免安裝/設定 UwAmp (包括 PHP 5.6.18 及 PHP 7.0.3)

• 免安裝 Composer 及 Global Packages

• 獨⽴立的環境變數、port

• 指令列 git 版本控制系統• 已預設好 Laravel 4.2 ~ 5.2 各版本• 依需求可再加載 Editor/IDE、圖型化 git 軟體…

Page 14: 使用 wagon + VS Code 輕鬆打造 Windows 平台 PHP/Laravel 開發環境

使⽤用  wagon  +  VS  Code  輕鬆打造  Windows  平台  PHP/Laravel  開發環境

請先下載/安裝• 請先下載/安裝 Visual C++ 可轉散發套件

- 請下載 2012 及 2015 兩個版本- 請下載 x86 (32bits) 及 x64 (64bits) 兩個版本- 請將四個版本的套件都安裝!★ PHP 5.6 需要 Visual C++ 可轉散發套件 2012★ PHP 7.0 需要 Visual C++ 可轉散發套件 2015

Page 15: 使用 wagon + VS Code 輕鬆打造 Windows 平台 PHP/Laravel 開發環境

使⽤用  wagon  +  VS  Code  輕鬆打造  Windows  平台  PHP/Laravel  開發環境

下載 wagon• 請到 Laravel 道場 的 Github 下載

- 請直接到 release 下載 zip 即可,不⽤用 clone!

Page 16: 使用 wagon + VS Code 輕鬆打造 Windows 平台 PHP/Laravel 開發環境

然後就搞定了!解壓縮

Page 17: 使用 wagon + VS Code 輕鬆打造 Windows 平台 PHP/Laravel 開發環境

使⽤用  wagon  +  VS  Code  輕鬆打造  Windows  平台  PHP/Laravel  開發環境

有哪些好料?• cmder

• git

• Laravel

• UwAmp

Page 18: 使用 wagon + VS Code 輕鬆打造 Windows 平台 PHP/Laravel 開發環境

使⽤用  wagon  +  VS  Code  輕鬆打造  Windows  平台  PHP/Laravel  開發環境

cmder (cmd.exe 增強版)• 移植了常⽤用的 Unix 指令

- 熟悉的 ssh, vim, curl, ls 基本上都有• PHP 已經動態載⼊入⾄至環境變數

- Windows 10 會⾃自動使⽤用 PHP 7.0

- 其他版本會降成 PHP 5.6

• Composer 已經動態載⼊入⾄至環境變數- psysh, laravel-installer, envoy 都已預裝好

Page 19: 使用 wagon + VS Code 輕鬆打造 Windows 平台 PHP/Laravel 開發環境

使⽤用  wagon  +  VS  Code  輕鬆打造  Windows  平台  PHP/Laravel  開發環境

git (指令列)• git 已經動態載⼊入⾄至環境變數• 指令上會顯⽰示 git branch

• 若需要 GUI 圖型介⾯面,推薦 SourceTree

• 其他留給 墨桑 和 Duncan 講 :)

Page 20: 使用 wagon + VS Code 輕鬆打造 Windows 平台 PHP/Laravel 開發環境

使⽤用  wagon  +  VS  Code  輕鬆打造  Windows  平台  PHP/Laravel  開發環境

Laravel• 嫌⽤用 Composer 裝 Laravel 很慢嗎?

- 在 laravel 資料夾裡有 4.2 ~ 5.2 各版本的 Laravel 壓縮檔,把它解壓縮放到 wagon/uwamp/www 即可使⽤用!

Page 21: 使用 wagon + VS Code 輕鬆打造 Windows 平台 PHP/Laravel 開發環境

使⽤用  wagon  +  VS  Code  輕鬆打造  Windows  平台  PHP/Laravel  開發環境

Apache (UwAmp)• UwAmp 裡內建 Apache

• 請確定 PHP 對應的 Visual C++ 可轉散發套件已安裝• 記得設定 Document Root

• 使⽤用 8000 port,記得要 http://localhost:8000

• 若重啟出問題時,先把 mysqld process 砍掉後,重開 UwAmp 即可

Page 22: 使用 wagon + VS Code 輕鬆打造 Windows 平台 PHP/Laravel 開發環境

使⽤用  wagon  +  VS  Code  輕鬆打造  Windows  平台  PHP/Laravel  開發環境

啟動 UwAmp

Page 23: 使用 wagon + VS Code 輕鬆打造 Windows 平台 PHP/Laravel 開發環境

使⽤用  wagon  +  VS  Code  輕鬆打造  Windows  平台  PHP/Laravel  開發環境

防⽕火牆設定

Page 24: 使用 wagon + VS Code 輕鬆打造 Windows 平台 PHP/Laravel 開發環境

使⽤用  wagon  +  VS  Code  輕鬆打造  Windows  平台  PHP/Laravel  開發環境

UwAmp 主視窗

AMP 各項偏好設定

PHP 版本

Page 25: 使用 wagon + VS Code 輕鬆打造 Windows 平台 PHP/Laravel 開發環境

使⽤用  wagon  +  VS  Code  輕鬆打造  Windows  平台  PHP/Laravel  開發環境

Apache Module 設定

開啟 rewrite 模組

Page 26: 使用 wagon + VS Code 輕鬆打造 Windows 平台 PHP/Laravel 開發環境

使⽤用  wagon  +  VS  Code  輕鬆打造  Windows  平台  PHP/Laravel  開發環境

PHP 設定

開啟 Laravel 所需的 PHP extensions

Page 27: 使用 wagon + VS Code 輕鬆打造 Windows 平台 PHP/Laravel 開發環境

使⽤用  wagon  +  VS  Code  輕鬆打造  Windows  平台  PHP/Laravel  開發環境

預設 wagon 畫⾯面

http://localhost:8000/

Page 28: 使用 wagon + VS Code 輕鬆打造 Windows 平台 PHP/Laravel 開發環境

使⽤用  wagon  +  VS  Code  輕鬆打造  Windows  平台  PHP/Laravel  開發環境

Document Root 設定

練習 3

Page 29: 使用 wagon + VS Code 輕鬆打造 Windows 平台 PHP/Laravel 開發環境

使⽤用  wagon  +  VS  Code  輕鬆打造  Windows  平台  PHP/Laravel  開發環境

重啟時 Kill Process 技巧

Page 30: 使用 wagon + VS Code 輕鬆打造 Windows 平台 PHP/Laravel 開發環境

使⽤用  wagon  +  VS  Code  輕鬆打造  Windows  平台  PHP/Laravel  開發環境

MySQL• UwAmp 內建 MySQL 5.7

• 預設的 phpmyadmin 被換成 adminer

• 使⽤用 33060 port (記得改 .env)

• 預設帳密:root / root //  .env  DB_CONNECTION=mysql  DB_HOST=127.0.0.1  DB_PORT=33060  DB_DATABASE=project_db  DB_USERNAME=root  DB_PASSWORD=root

Page 31: 使用 wagon + VS Code 輕鬆打造 Windows 平台 PHP/Laravel 開發環境

使⽤用  wagon  +  VS  Code  輕鬆打造  Windows  平台  PHP/Laravel  開發環境

登⼊入 MySQL

Page 32: 使用 wagon + VS Code 輕鬆打造 Windows 平台 PHP/Laravel 開發環境

使⽤用  wagon  +  VS  Code  輕鬆打造  Windows  平台  PHP/Laravel  開發環境

切換語系

Page 33: 使用 wagon + VS Code 輕鬆打造 Windows 平台 PHP/Laravel 開發環境

與 VS Code 合體加碼!

Page 34: 使用 wagon + VS Code 輕鬆打造 Windows 平台 PHP/Laravel 開發環境

Visual Studio Code• 由 Microsoft 主導開發的編輯器• 以 Electron 技術打造• 內建語法提⽰示、版本控制及偵錯⼯工具

• 跨平台、免費、開放源始碼• ⽀支援外掛系統,可擴充功能

⺫⽬目前正式發佈 v1.3.1 穩定版

Page 35: 使用 wagon + VS Code 輕鬆打造 Windows 平台 PHP/Laravel 開發環境

使⽤用  wagon  +  VS  Code  輕鬆打造  Windows  平台  PHP/Laravel  開發環境

• VS Code 預設使⽤用 PATH 裡的 git,因此要先裝 git

• 若是不想⽤用 PATH 裡的,可以指定路徑

客製化 git 設定

{          //-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐  Git  configuration  -­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐  

       //  Is  git  enabled          "git.enabled":  true,  

       //  Path  to  the  git  executable          "git.path":  "把  wagon  的  git.exe  路徑寫在這裡",  

       //  Whether  auto  fetching  is  enabled.          "git.autofetch":  true,  }

Page 36: 使用 wagon + VS Code 輕鬆打造 Windows 平台 PHP/Laravel 開發環境

使⽤用  wagon  +  VS  Code  輕鬆打造  Windows  平台  PHP/Laravel  開發環境

• VS Code 預設使⽤用 PATH 裡的 PHP interpreter

• 若是不想⽤用 PATH 裡的,可以指定路徑

客製化 PHP 設定

{     //-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐  PHP  Configuration  options  -­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐  

       //  Whether  php  validation  is  enabled  or  not.          "php.validate.enable":  true,  

       //  Points  to  the  php  executable.          "php.validate.executablePath":  "把  wagon  的  php.exe  路徑寫在這裡",  

       //  Whether  the  linter  is  run  on  save  or  on  type.          "php.validate.run":  "onSave",  }

Page 37: 使用 wagon + VS Code 輕鬆打造 Windows 平台 PHP/Laravel 開發環境

https://github.com/laravel-dojo/wagon

喜歡 wagon 嗎?幫我按個 ★ 星星 吧!

Page 38: 使用 wagon + VS Code 輕鬆打造 Windows 平台 PHP/Laravel 開發環境

Q & A謝謝聆聽.歡迎互動