larablog 建構日誌:專案上線

larablog 建構日誌:專案上線

透過 Git 控管程式碼

  雖然時光無法倒流,不過使用 Git 可以記錄你的程式碼更動,在需要的時候回復到先前某一個區段。在 commit 時寫下當次更動的摘要,我可以追蹤程式碼的修改歷程,在多人協做的情況下也可讓其他人瞭解我的開發思維。

  Git 操作基本上是透過終端機指令完成,Windows 與 masOS(Linux X-Window 應該也有)平台有應用程式以圖形化介面協助 Git 作業。在之前的工作偶然知道 Sourcetree 這款圖形化 Git 管理程式,也因此認識 Bitbucket 服務,註冊服務後存放沒有公開的專案。

在撰寫此文的當下,Bitbucket 的免費服務方案下沒有限制私有專案的數量;GitHub 的免費方案有私有方案的數量限制,公開方案則無。

  我的想法是先以私有專案建置專案,內容發佈到 Bitbucket 管理,等到完成後存一份複本,將複本中不便公開的部分以及 Git 記錄刪除,修改 README.md 後以公開專案發佈到 GitHub。如果有更好的作法請透過底下的回應系統或我的聯絡資訊告訴我,不勝感激。

將專案部署到網站主機

  目前使用的網站主機是 Digital Ocean 的 VPS 服務,2GB Ram+1 vCPU+50GB 存儲的主機規格,一個月支出約新台幣 300 左右,與臺灣共享式虛擬主機的年費相比稍貴一些,但是效能部分差很多,還有固定 IP。

  我安裝 aaPanel(寶塔面板的國際化版本)作為主機管理工具,選擇的原因有二:

  1. 能依照網站的需求以不同 PHP 版本執行:舉例來說 Joomla! 3 系列因為擴充套件相容性問題通常建議使用 PHP 7.4;Joomla! 3.10 及 Joomla! 4 全新網站可在 PHP 8 下運作,之後推出的 Laravel 9 框架預設就是 PHP 8.0。
  2. 可以透過操作頁面向 Let's Encrypt 申請免費安全憑證以及自動續約,不過要注意的是 Let's Encrypt 有域名申請時間鎖,如果因為測試網站而重複申請、刪除安全憑證超過 5 次以上,該域名的申請將會駁回,等待 168 小時(整整七日)後解除。

  將本地測試的網站內容轉移到網站主機空間,一般是透過 FTP 上傳網站資料(PHP 程式、CSS 樣式檔、JavaScript 腳本檔,圖片檔案等等),資料庫部分則是先匯出成 SQL 檔案(僅匯出資料,不含結構)後再匯入到網站資料庫。不過 Laravel 專案結構複雜檔案眾多,如果用 FTP 程式上傳網站資料,傳輸時間會非常長。

  現在程式碼由 Git 控管,Bitbucket 或 GitHub 託管遠端資源庫,網站的遷移作業能以更輕鬆的方式進行。

  以下是 larablog 部署到網站主機的流程,給同樣是 Laravel 的新手朋友提供參考:

  1. 網站主機部分完成 DNS 指定、網頁根目錄位置及建立專案使用的資料庫,取得以下連線資訊:
  • 網頁部分:連線主機名(或 IP 位址)、FTP 連線帳號、FTP 連線密碼。
  • 資料庫部分:資料庫主機名、資料庫名稱、資料庫連線帳號、資料庫連線密碼。
  1. 以終端機程式登入網站主機,在網頁根目錄下用 git 指令複製專案內容:
git clone 遠端主機 git 網址

執行後會在網頁根目錄產生與專案名相同的資料夾(如:larablog),利用 FTP 軟體(如:FileZilla)或網站主機管理介面的網頁版檔案總管,將該資料夾內所有檔案/資料夾移動至上一層:網頁根目錄下。

  1. 使用 composer 安裝套件,此動作會新增 vendor 資料夾,存放專案所使用的套件:
composer install
  1. 如果專案有安裝 Voyager,或是有執行 php artisan storage:link 指令在 public 資料夾建立 storage 軟連結,那麼網站主機部分也需再執行一次,接著透過 FTP 軟體將檔案上傳到 /storage/app/public目錄下。
  2. 更動網站設定檔:Web 伺服器的網頁根目錄路徑設定要加上public,如果是 Nginx 請加入以下的轉寫規則:
location / {
    try_files $uri $uri/ /index.php?$query_string;
}
  1. 為網站申請及安裝安全憑證(安全憑證透過 Let's Encrypt 申請或購買),確認連線方式是否自動轉為 HTTPS 連線。
  2. .env.example 複製或更名為 .envAPP_URL 更改為網站網址(FDQN 格式);APP_ENV 設為 production;APP_DEBUG 改為 false 關閉偵錯模式。
  3. .env 填入資料庫連線資訊,以及聯繫外部網路服務所需的連線資料:如 GMail 帳號、hCAPTCHA 金鑰、Algolia APP ID 等等。
  4. 重新產生專案連線金鑰:
php artisan key:genreate 
  1. 執行以下指令建立資料表:
php artisan migrate
  1. 透過 phpMyAdmin 或其他資料庫工具程式,將資料庫內容匯入資料表:不含結構的純資料,並在匯入前確認已取消外鍵檢查。
  2. 確認上述作業將運作常用功能快取化:
php artisan route:cache
php artisan view:cache
php artisan config:cache
  1. 確認專案的目錄及檔案所有人及群組都是 Web Server。以 Ubuntu Server 環境,Web Server 是 Nginx 的情況輸入指令:
chown -R www:www (專案網站)
  1. 之後的更新作業依據類型透過以下方式完成:
  • 程式碼更新:git pull,輸入存取密碼更新。
  • 新增套件: composer install
  • 資料表更動:php artisan migrate
  1. 如果發生像是頁面找不到或是樣式無法套用等異常狀況時,請先透過以下指令清除快取:
php artisan route:clear
php artisan view:clear
php artisan config:clear

以 aaPanel 建置網站主機管理介面時的注意事項

  如果你也打算使用 aaPanel 管理 Laravel 專案網站,有兩個設定需要注意:

  1. 網站設定:點選左方選單「Website」項目,接著點選 Laravel 專案網站項目右方「Operation - Conf」項目,在「Site directory」分頁中取消「Anti-XSS attack (Base directory limit)(open_basedir)」勾選。
  2. PHP 設定:在「PHP Manage」部分「Disable functions」分頁找到「proc_open」、putenv」、「symlink」、「readlink」項目後點選右方的「Del」項目刪除停用選項。

使用套件建立與更新網站地圖

  為了讓搜尋引擎(如 Google)更容易索引網站內容提高搜尋結果順位,我需要產生網站地圖(Sitemap)檔案,在 Google Search Console 提交。網站地圖可以透過線上服務建立,不過透過套件的輔助可以設定自動更新。

  下載 laravel-sitemap 套件:

composer require spatie/laravel-sitemap

  在 Controller 引入命名空間及撰寫程式碼:

use Spatie\Sitemap\SitemapGenerator;
public function createSitemap()
{
	SitemapGenerator::create('https://larablog.abokuo.com')->writeToFile(public_path('sitemap.xml'));
}

  新增網站路由:

// /routes/web.php
Route::get('/utilities/createsitemap','SiteController@createSitemap');

  這樣在瀏覽器網址後面加上「utilities/createsitemap」就能產生網站地圖檔案: /public/sitemap.xml,接著在 Google Search Console 就能輸入網站地圖路徑提交。

自動更新網站地圖

  建立 artisan 命令:

php artisan make:command GenerateSitemap

  會產生 /app/Console/Commands/GenrateSitemap.php 檔案,接著編輯如下:

<?php

namespace App\Console\Commands;

use Illuminate\Console\Command;
use Spatie\Sitemap\SitemapGenerator;

class GenerateSitemap extends Command
{
    /**
     * The name and signature of the console command.
     *
     * @var string
     */
    protected $signature = 'sitemap:generate';

    /**
     * The console command description.
     *
     * @var string
     */
    protected $description = '生成 sitemap 檔案';

    /**
     * Create a new command instance.
     *
     * @return void
     */
    public function __construct()
    {
        parent::__construct();
    }

    /**
     * Execute the console command.
     *
     * @return int
     */
    public function handle()
    {
        SitemapGenerator::create(env('APP_URL'))->writeToFile(public_path('sitemap.xml'));
    }
}

  然後就可以透過以下指令建立網站地圖

php artisan sitemap:generate

  編輯 /app/Console/Kernel.php,設定每日排程更新網站地圖:

protected function schedule(Schedule $schedule)
{
	$schedule->command('sitemap:generate')->daily();
}

免費視覺主題與網站地圖

  網站地圖提交給 Google 之後幾天我仍然無法搜尋到 larablog,回到管理頁面發現:網站地圖記載的節點只有一筆,最少也會有十幾個吧?仔細尋找過後,在負責主版的 Blade template 檔案:/resources/views/layouts/master.blade.php 找到了以下敘述:

<meta name="robots" content="index, nofollow" />

  這是告訴爬蟲程式:索引這一頁就好,接下來的不用。

  以佈景主題範例來說這樣的設定有其必要:僅為範例,如果設定 follow 屬性會讓程式繼續往下追,得到一對無用的連結或範例資料反倒減損 SEO 效果。

  但是現在是上線運作的網站,自然不能沿用這個設定。將該行敘述移除,重新建立網站地圖後,Google Search Console 就顯示索引了數十筆資料,問題解除。

index 與 follow 的意義與用法

  就在問題解決後沒多久,我回過頭思考 index 與 follow 兩個 meta 屬性的意義:index 是告訴程式要索引;follow 是告訴程式內容中的連結納入評比。納入搜尋引擎所以可以增加網站曝光度,不過某些功能操作反倒是不要被搜尋到比較好。

  基於上述思考我依網站頁面的屬性規劃四種索引策略:

  1. index, follow:網站首頁、文章頁面、分類顯示...等需要搜尋引擎納入索引的頁面。
  2. noindex, follow:服務條款、隱私權等網站必備文件頁面,搜尋引擎毋須索引。
  3. index, nofollow:單獨的評論頁面或留言板,讓搜尋引擎知道有此功能但毋須追蹤連結。

這裡提到的 nofollow 參數在最近有所變動,Google 的建議是付費連結改用 rel="sponsored";會員產出的內容(留言板、討論區等)改成 rel="ugc"

  1. noindex, nofollow:管理區登入頁面、會員登入頁面、購物車、會員資料編輯等與使用者隱私有關的頁面。

  主版 Blade template 檔案對於 meta robots 的行為則更動成:

<meta name="robots" content="@yield('index_rule')" />

  由之後的 Blade template 依顯示內容決定使用哪種策略。

作者照片

A-Bo Lee

居住在臺灣的 Joomler,期望以程式設計、開放原碼推廣活動收入養活一家老小。
35 歲後改姓李,id 作為曾為郭姓的證明。
FFXI:Abokuo@Sylph鯖、よろしくです。