A+ A A-

larablog 建構日誌:建立專案與基礎設定

專案運作環境

我是在 Macbook Air 2020(intel) 開發這個專案,2012 年使用 Macbook Air 之後就不再考慮使用 Windows 筆電,換機也是首先考慮 Macbook。

只要是用得順手的設備,不論是使用 Windows 系統的 PC 或是使用 macOS 的 Mac 系列都是開發 Laravel 的好幫手,青菜水果各有所好。

  • 作業系統:macOS v11.6。
  • PHP:7.4.x。
  • MySQL:5.7.x。
  • Laravel 版本:8.x。
  • 編輯器:Visual Studio Code,以下稱「VS Code」。
  • 運作環境:Laravel Valet,以下稱「Valet」。

Laravel 的運作環境使用 Valet,特點如下:

  • 可以在本機實驗安全連線(HTTPS)。
  • 建立新專案後就能以「(資料夾名稱).test」網址瀏覽專案網站。
  • 比起以 Docker 運作專案的 Laradock,Valet 的運作效能快很多。

Valet 美中不足的地方是目前只支援 macOS,希望以後能有 Windows 版本,或是能做到上述功能的替代方案。

Valet 的安裝指引可以參考哥布林老師的〈教你如何在MAC電腦上建置VALET開發環境〉,在過程中會一併安裝 PHP、composer 以及 MySQL Server。

建立 Laravel 專案

本專案要透過 Laravel 建立部落格系統,所以名字就取「larablog」。先前已經用 composer 下載 Laravel 安裝程式的關係,用以下指令就能開啟新專案。

laravel new larablog

用 composer 建立新專案可以指定 Laravel 專案的版本,專案使用的連線金鑰也會一併產生。

composer create-project laravel/laravel larablog 8.* --prefer-dist

設定安全瀏覽

透過 Valet 設定專案為安全連線,輸入以下指令後會詢問使用者密碼,輸入後等待一段時間完成作業。

valet secure larablog

在終端機看到「The [larablog.test] site has been secured with a fresh TLS certificate.」訊息代表設定完成,可以開啟瀏覽器用 HTTPS 連線瀏覽網站。

使用安全連線瀏覽專案

定義網站儲存區

切換到專案資料夾下,執行以下指令在 /public 資料夾建立 storage 軟連結,指向專案 storage 資料夾

cd larablog
php artisan storage:link

為了開發上的方便會將 storage 資料夾賦予完全讀寫權限

chmod -R 777 storage

在正式環境中基於安全設定則是會將專案所有資料夾/檔案的擁有者歸給 Web Server,如果 Web Server 執行時的名稱是 nginx,那麼指令會是

chown -R nginx:nginx larablog

設定時區及語系

接下來到專案 /config/app.php 設定時區及語系,以在臺灣及正體中文的情況會是

'timezone' => 'Asia/Taipei',
'locale' => 'zh_TW',
'faker_locale' => 'zh_TW',

建立資料庫

我是透過 phpMyAdmin 建立專案使用的 MySQL 資料庫以及微調,在 Valet 使用 phpMyAdmin 請參考〈Setup phpMyAdmin with Laravel Valet〉

我會讓各專案的資料庫連線資訊各自獨立,在建立資料庫使用者時同時建立同名資料庫,並賦予所有權限。

以 phpMyAdmin 建立專案資料庫

如果要讓資料庫儲存 Unicode 表情圖示請注意資料庫的編碼與校正是不是 utf8mb4,在 phpMyAdmin 可以點選專案資料庫後再點選工具列「操作」,在畫面最下方「編碼與排序」區塊進行調整。

確認資料庫編碼與排序

選用:/config/database.php 的設定

Laravel 專案預設的資料庫排序是 utf8mb4_unicode_ci,不過比較常看到使用的是 utf8mb4_general_ci。後者在效能上較好,前者使用標準 Unicode 排序,在遇到 4-byte 編碼文字時能正確顯示。如果你的專案使用前者,請記得到 /config/database.php 調整設定值。

'mysql' => [
            'driver' => 'mysql',
            'url' => env('DATABASE_URL'),
            'host' => env('DB_HOST', '127.0.0.1'),
            'port' => env('DB_PORT', '3306'),
            'database' => env('DB_DATABASE', 'forge'),
            'username' => env('DB_USERNAME', 'forge'),
            'password' => env('DB_PASSWORD', ''),
            'unix_socket' => env('DB_SOCKET', ''),
            'charset' => 'utf8mb4',
            'collation' => 'utf8mb4_unicode_ci',
            'prefix' => '',
            'prefix_indexes' => true,
            'strict' => true,
            'engine' => null,
            'options' => extension_loaded('pdo_mysql') ? array_filter([
                PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'),
            ]) : [],
        ],

.env 設定資料庫連線資訊

專案根目錄下的「.env」記載專案使用各項資源的聯絡資料,如果無此檔案請從「.env.example」複製一份過去。此檔案沒有主檔名,如果要在檔案總管或是 finder 看到該檔案得要啟動隱藏檔案的顯示選項,Visual Studio Code 的檔案總管可以直接檢視。

資料庫的連線資訊請參考以下內容:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=larablog
DB_USERNAME=(資料庫連線帳號)
DB_PASSWORD=(資料庫連線密碼)

下載﹑安裝 Voyager

Voyager 是方便的 Laravel 管理區建立工具,透過 Voyager 可以輕鬆建立及管理網站資料。有關 Voyager 的詳細資訊請參考官網 https://voyager.devdojo.com,中文資料請參考哥布林挨踢電腦科學頻道翻譯的 Voyager 套件中文手冊

在終端機視窗下載 Voyager

composer require tcg/voyager

在進行下一步安裝前需確認專案資料庫是否已經建立完畢,並在 .env 設定好資料庫連線資訊。在 /app/config.php 設定「'locale' => 'zh_TW',」Voyager 的介面就會以中文顯示。

以上內容確認無誤後安裝 Voyager:

php aritsan voyager:install

安裝後 Voyager 會建立軟連結:從「/public/storage」連結至「/storage/app/public」,之後用「Voyager::image()」呼叫。

建立網站管理者

在已有會員資料的情況下你可以透過以下指令,以電子郵件為關鍵字指定特定會員為管理員:

php artisan voyager:admin your@email.com

以我剛建立好專案的情況是沒有會員資料的,我透過以下指令建立會員資料,並指定為管理員:

php artisan voyager:admin abokuo@gmail.com --create

接著在終端機畫面下輸入會員名字、輸入登入密碼、確認輸入密碼後完成建立,然後在專案網址加上「/admin」後前往 Voyager 管理畫面。

Voyager 管理者登入畫面

如果你發現登入後管理者的圖示不正常顯示,請注意 .env 檔案的「APP_URL」是否為網站網址(FDQN 格式)。