2021-11-03, 週三 13:24
分類: 軟體文章

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 格式）。

回到頁首