讓檔案傳輸變得更簡單：架設 FileGator 服務

這一篇是我實際在公司的 NAS 上疊加的服務，主要是給公司的同事用更簡便的上傳方式來上傳資料，降低使用者上傳門檻。

為什麼不繼續用 Synology 的「檔案請求」？

如果你是 Synology NAS 的使用者，很可能也用過 File Station 中「檔案請求」的功能。我剛接觸時覺得這功能蠻貼心的，不需要為客戶開帳號就能讓對方上傳資料。後來我把它當作公司圖文系統的上傳入口，也就這樣用了幾年。

• 無法上傳整個資料夾。
• 檔案拖進視窗後，還要手動按下「上傳」鈕才會動作。
• 上傳鈕有時會因螢幕解析度造成遮擋，導致無法點擊。

「檔案請求」在 DSM 上運作多年，Synology 似乎沒有改版的打算，這代表問題會持續存在。

如果你是 Synology NAS 的使用者，很可能你也用過 FileStation 中那個「檔案請求」的功能。我剛接觸它的時候覺得這個功能還蠻貼心的，不需要為客戶開帳號就能讓他上傳資料。

尋找替代方案

在 DSM 裡面，有沒有其他替代方案？如果要結合 Synology 且具備 Web 介面，選擇相對較少，我列出以下幾種：

1. FileGator：輕量且美觀的開源文件管理系統，介面極簡、支援拖放上傳、反應速度快。
2. Nextcloud：功能強大、介面專業，支援手機 App 整合，並提供雜湊校驗（Hash Check）確保檔案完整，但設定較複雜。
3. Cloudflare + Web API：在 Cloudflare 上架設 HTML 表單，透過 Synology Web API 將檔案傳回 NAS。安全性最高，使用者接觸不到 NAS 登入介面，但 Cloudflare 儲存空間可能產生費用。

我的想法是盡量不要有額外費用，且希望能與原本的 File Station 混合使用。以簡易性與維護成本來看，FileGator 成了首選。

Docker 是什麼？

在安裝之前，我們得先聊聊 Docker。你可以把它想像成「貨櫃組合屋」。

在沒有 Docker 之前，架設服務就像「蓋房子」：你要打地基、立柱子、漆牆壁，家具進場時還要擔心沙發（軟體）塞不進大門（系統不相容），或插座規格不對（環境設定錯誤）。從整地到完工，可能得花上好長一段時間。

而 Docker 把所有的環境、軟體、設定全部配置在一個「貨櫃」裡。你只要準備好空地（NAS），把貨櫃搬過去，組裝完成的那一刻就能拎包入住。

Docker 的三大特性

• 環境一致性：不論在誰的電腦跑，結果都一樣。
• 隔離與乾淨：每個程式在獨立貨櫃運作，不干擾主機。想移除時直接刪除貨櫃，主機依然乾淨如新。
• 秒速啟動：啟動就像打開 App 一樣快，幾乎不佔多餘資源。

如何在 Synology 安裝 FileGator？

第一步：安裝 Container Manager

Synology 在新版 DSM 中將 Docker 改名為 「Container Manager」。你可以在「套件中心」搜尋並安裝它。通常若你有安裝過 File Station 的預覽功能，系統會自動安裝好此套件並建立 docker 資料夾。

我圖上的 Container Manager 是已經安裝完成的。

第二步：下載 FileGator 映像檔

開啟 Container Manager，點選左側**「倉庫伺服器」**搜尋 filegator。 你會看到很多版本，建議初學者選擇官方版 filegator/filegator。

Tips: 標註 linuxserver.io 的版本通常經過優化（如使用 Alpine Linux），雖然更輕量，但建議先從官方版上手。

總之，我建議先用官方版本……點選下載，然後選擇版本。如果沒有特別要指定版本就選最新版本「latest」。

第三步：準備資料夾與權限

在設定容器前，需在 NAS 指定一個存放檔案的目錄。

1. 在 docker/filegator/ 下建立一個名為 data 的資料夾。
2. 權限注意：這個資料夾需要 http 使用者的讀寫權限。如果你放在系統預設的 docker 資料夾內，通常權限已經配置好了。

這個位置並非絕對，你也可以在 NAS 上的任意位置新增資料夾，不過會需要 http 的讀寫權限，而 Synology 會在我們一開始安裝 Container Manager 的時候幫我們在 NAS 新增的那個 docker 的資料夾，它預設就已經有 http 讀寫的權限。

所以你第一次設定的時候用這裡，可以避開權限障礙。日後等你更熟悉 docker 和權限配置後，你也可以自己決定你要設定的路徑。

第四步：啟動與配置容器

在「映像檔」清單點選 FileGator 並執行，進入設定精靈：

• 一般設定：容器名稱可自訂（如 filegator-server），建議勾選「啟用自動重啟」，這樣 NAS 重開機後服務會自動載入。
• 儲存空間設定：
• • 本機目錄：選擇剛建立的 docker/filegator/data。
  • 掛載路徑：輸入 /var/www/filegator/repository。
• 連接埠設定：將本機連接埠設為 8080（若已被佔用則改用其他數字）。
• 陷阱提醒：若留白，系統會配發隨機的高階連接埠（如 32768），屆時網址會變得很難記。

我們在前面已經在 File Station 建立了「docker/filegator/data」資料夾。

於是在儲存空間按下「+新增資料夾」，然後去選擇「docker/filegator/data」資料夾。

然後在後面的輸入框直接貼上「/var/www/filegator/repository」，並設定可讀寫。

至於本機連接埠就看你想保留哪一個（或者都保留），不過這個地方的設定有一個小陷阱，你看它後面寫的 80 和 8080，如果你這邊就留白，filegator 就會用它預設的一個隨機高階 Port（範圍通常在 32768 到 60999 之間）來配置，到時候你要連線就得在 IP 後面打上長長的埠號。（他一開始的那個數字就只是讓你純參考）囧

而如果新增容器完成之後，你要修改 docker 配置，Container Manager 不允許你自己去修改 config。（也就是你要重來一次）囧

為了避免 filegator 配發奇怪的 Port，建議在 8080 前面也填上 8080。（如果你的 8080 已經被佔用也可以改用其他埠號）

然後，配置就完成了

配置完成後，只需要按下「完成」，容器就會配置完成。勾選「在精靈完成後立刻啟動容器」Container Manager 就會幫你立即啟動這個容器。

進入 FileGator

安裝完成後，在瀏覽器輸入 http://[NAS_IP]:8080 即可看到畫面。

以我自己的環境來說，我的 NAS 在區網的 IP 為 192.168.0.1，於是在瀏覽器輸入：

http://192.168.0.1:8080

• 預設帳密：admin / admin123
• 務必修改：登入後請立即點擊右上角 admin 修改密碼，並可在 Users 選單管理使用者與根目錄權限。

按下右上角的「admin」可以直接修改管理員的密碼。

如果你要新增使用者就是按「Users」進去，除了可以選擇他是「Adimn」或是「User」之外，你還可以指定他的根目錄，當然也可以讓你設定他的使用權限。

權限設定也是一應俱全。

修改 FileGator

由於 FileGator 的預設介面是英文，不過它是有支援中文的（簡體中文），你可以透過修改 configuration.php 來達到修改語言顯示。

切換中文介面

FileGator 的核心是使用 configuration.php 來控制整個介面顯示，所以如果你只是想要切換到中文，那最簡單的方式就是直接到容器裡面，設置一個專用 bash 終端機，然後從那邊進去直接下指令作編修。

打開 Container Manager，並點選正在執行的那個 FileGator 容器，然後在右邊「操作」那個下拉式選單中點選「開啟終端機」。

Container Manager 會幫你新增一個 bash 終端機命令頁面：

你可以在這個終端機介面輸入下列指令：

sed -i "s/'language' => 'english'/'language' => 'chinese'/g" /var/www/filegator/configuration.php

這一段指令會將介面直接修改成「簡體中文」。

假如你還想改網頁標題，那就是：

sed -i " s/'app_name' => 'FileGator'/'app_name' => '我的專屬雲端'/g" /var/www/filegator/configuration.php

這樣網頁上的 Title（頁籤）就會顯示我們修改後的樣子，這個樣子的修改甚至不需要重啟就可以立即看到編修後的效果。

雖然是簡體中文，但總是聊勝於無。

至此，簡單的架設 FileGator 伺服器的部分已經結束，接來是進階的教學。

接下來是進階的部分，如果你想更進一步的修改 FileGator，例如：正體中文界面、置換你自己的 Logo，這些都是可能的。

以下繼續說明如何進階的配置 FileGator。

配置外部 configuration.php

每次修改都要用終端機的 sed 去修改，是不是有點不太方便呢？其實 Docker 的進階用法就是，把 configuration.php 映射出來。如果你要將「configuration.php」這個配置檔案映射到外部，你就必須先知道它在容器裡的路徑、名稱、文件裡面實際的 code。

每個版本的 FileGator 裡面 configuration.php 的程式也許會調整，只要格式不對，實際透過 Web 直行就會發生錯誤。我自己在 Gemini 用 Pro 問了5-10 次，出來的 code 都是錯的。囧

所以一定要取得符合你當下安裝進去版本的「configuration.php」檔案。

如何取得正確的「configuration.php」檔案

只要你用 docker 設定好容器，容器執行後你在瀏覽器也能看到 FileGator 被執行，那就代表那個容器沒有問題。而那個容器裡面的「configuration.php」就是正確的檔案，我們的目標就是把它拷貝出來。

為你的 NAS 開啟 SSH 遠端登入

請保持你當下的 FileGator 容器正在執行。（且容器前面顯示綠燈）

然後進入 NAS「控制台 > 終端機& SNMP」，在終端機的設定視窗中，把「啟用 SSH」勾選起來。連接埠建議不用修改，按下「套用」後，和 NAS 在相同域網的電腦就可以透過 SSH 來登入這台 NAS。

假設我的 NAS IP 位於：172.24.162.52，於是在你的電腦終端機輸入：

ssh 172.24.162.52

於是終端機會偵測到你要登入 NAS，這時候會問你 yes 或 no……這跟填寫入境申請書是一樣的，不過這邊要填寫 yes。

它會跳出來一段警告訊息，這段訊息是 SSH 首次連線時的安全驗證提示。

當你第一次從你的 Mac 連線到這台伺服器（IP：172.24.162.52）時，你的電腦還不認識這台主機。為了確保連線安全，系統會要求你確認該伺服器的「指紋」（Fingerprint）。

輸入「yes」後，你必須再做一次 ssh 連線的動作（上面那個指令），然後伺服器就會要你輸入密碼，這個密碼就是你 NAS 管理員帳號的密碼。

密碼輸入完成之後，你就是從 ssh 進入你的 NAS 了。如果你想確認的話，你可以用 ls 指令來列出所有目錄。

你的 NAS 資料夾通常會在「volume1」這個路徑裡面，於是用 cd volume1 你就會切入到 NAS 資料夾的目錄內，你可以看到很多熟悉的資料夾名稱，這邊礙於我的資料夾裡有太多不太適合分享的名稱，所以就不把畫面拍給大家看……

把 configuration.php 複製出來

現在我們要把 configuration.php 拷貝出來，於是在終端機輸入：

sudo -i
docker cp filegator-server:/var/www/filegator/configuration.php /volume1/docker/filegator/configuration.php

要先輸入 sudo -i 來切換到 root 權限，這是因為這是「需要 root 權限才能執行 docker cp 指令」。

然後用 docker cp 把位於 filegator-server 容器裡面的那個 configuration.php 複製到我們的 NAS docker/filegator/ 裡面。執行之後你應該可以在 NAS 裡面看到那個 configuration.php 檔案了。這代表這個任務階段你已經成功了。

接下來，我們要重新配置一個新的 FileGator 容器。

重新再次配置 FileGator

對！你沒看錯，現在你可以把之前啟動的容器停止並刪除，我們要重新配置一個 FileGator。而這次，我們除了要指定資料儲存的位置之外，我們還要映射 configuration.php 檔案。反正就是：

• NAS 路徑（/volume1/docker/filegator/data），容器內的路徑（/var/www/filegator/repository）
• NAS 檔案（/volume1/docker/filegator/configuration.php），容器內的路徑（/var/www/filegator/configuration.php）

到此，你應該看懂 docker 的原理了吧？沒錯！docker 就是只需要針對想要映射的檔案或是目錄來映射，剩下的就用容器裡面的設定。有沒有很方便？

這邊提醒一下：路徑是用「新增資料夾」，但要指定 configuration.php 要用「新增檔案」來設定，別搞錯了。

如何本地中文化

這是這次實作最後一個步驟，就是我們已經將 configuration.php 映射到「/volume1/docker/filegator/configuration.php」，所以要把介面變成中文化其實就是去動那支 configuration.php 即可？

如果你是這樣想的話，那我告訴你「事情沒有這麼簡單」……FileGator 很特別的是把介面字串藏到 dist 裡面用 npm run build 編碼，如果你要真的修改介面，就需要反覆的做編碼壓縮這件事。（只是改個中文竟然要如此大費周章？）

山不轉路轉：我們用 js 注入來處理這件事

因為 FileGator 把語系用編碼的方式寫在 Dist 裡面，除非你要重新編碼程式，否則是不可能修改的。我不想為了一個繁體中文介面大費周章，所以我們換另一招改用「 js 注入」來解決。

如果你聽過 user script，那麼你應該聽過 Tampermonkey（竄改猴），接下來我們要做的事情就和在「竄改猴」上面寫語法覆蓋一樣的原理。

由於原版的 configuration.php 裡面就預先留下注入 js 區域（對！你沒看錯，它一開始就留下讓你注入的區域，所以我這編的用法其實算是正規）。

實際要替換的文字並不多，這邊就直接提供我修改過的 configuration.php 給大家，你下載後放到自己的 NAS 上直接用 Container Manager 映射即可。

<?php

return [
    'public_path' => APP_PUBLIC_PATH,
    'public_dir' => APP_PUBLIC_DIR,
    'overwrite_on_upload' => false,
    'timezone' => 'UTC', 

    'frontend_config' => [
        'app_name' => 'FileGator',
        'app_version' => APP_VERSION,
        'language' => 'chinese',
        'logo' => 'https://filegator.io/filegator_logo.svg',
        'upload_max_size' => 100 * 1024 * 1024, 
        'upload_chunk_size' => 1 * 1024 * 1024, 
        'upload_simultaneous' => 3,
        'default_archive_name' => 'archive.zip',
        'editable' => ['.txt', '.css', '.js', '.ts', '.html', '.php', '.json', '.md'],
        'date_format' => 'YY/MM/DD HH:mm', 
        'guest_redirection' => '', 
        'search_simultaneous' => 5,
        'filter_entries' => ['@eaDir', '#recycle', '@eadir', '/@eaDir', '/#recycle', '/@eadir'],
        'pagination' => ['', 5, 10, 15],
    ],

    'services' => [
        'Filegator\Services\Logger\LoggerInterface' => [
            'handler' => '\Filegator\Services\Logger\Adapters\MonoLogger',
            'config' => [
                'monolog_handlers' => [
                    function () {
                        return new \Monolog\Handler\StreamHandler(
                            __DIR__.'/private/logs/app.log',
                            \Monolog\Logger::DEBUG
                        );
                    },
                ],
            ],
        ],
        'Filegator\Services\Session\SessionStorageInterface' => [
            'handler' => '\Filegator\Services\Session\Adapters\SessionStorage',
            'config' => [
                'handler' => function () {
                    $save_path = null; 
                    $handler = new \Symfony\Component\HttpFoundation\Session\Storage\Handler\NativeFileSessionHandler($save_path);
                    return new \Symfony\Component\HttpFoundation\Session\Storage\NativeSessionStorage([
                            "cookie_samesite" => "Lax",
                            "cookie_secure" => null,
                            "cookie_httponly" => true,
                        ], $handler);
                },
            ],
        ],
        'Filegator\Services\Cors\Cors' => [
            'handler' => '\Filegator\Services\Cors\Cors',
            'config' => [
                'enabled' => APP_ENV == 'production' ? false : true,
            ],
        ],
        'Filegator\Services\Tmpfs\TmpfsInterface' => [
            'handler' => '\Filegator\Services\Tmpfs\Adapters\Tmpfs',
            'config' => [
                'path' => __DIR__.'/private/tmp/',
                'gc_probability_perc' => 10,
                'gc_older_than' => 60 * 60 * 24 * 2, 
            ],
        ],
        'Filegator\Services\Security\Security' => [
            'handler' => '\Filegator\Services\Security\Security',
            'config' => [
                'csrf_protection' => true,
                'csrf_key' => "123456", 
                'ip_allowlist' => [],
                'ip_denylist' => [],
                'allow_insecure_overlays' => false,
            ],
        ],
        'Filegator\Services\View\ViewInterface' => [
            'handler' => '\Filegator\Services\View\Adapters\Vuejs',
            'config' => [
                'add_to_head' => '
                    <style>
                        /* 基礎 Logo 設定：全面攔截原廠 Logo */
                        img[src*="filegator_logo.svg"] {
                            object-position: -9999px !important;
                            background: url("https://filegator.io/filegator_logo.svg") no-repeat left center !important; /* svg 置換成你 Logo 的 URL */
                            background-size: contain !important;
                            width: 320px !important;
                            height: 80px !important;
                            min-width: 320px !important;
                            max-height: none !important;
                            display: block !important;
                            margin-left: 0 !important;
                            padding-left: 0 !important;
                            transition: filter 0.3s ease; 
                        }
                        @media (prefers-color-scheme: dark) {
                            /* 1. 修正那個討厭的白色選單區塊 */
                            .navbar-menu, 
                            .navbar-dropdown,
                            .navbar-item.has-dropdown .navbar-dropdown {
                                background-color: #1a1a1a !important; /* 強制改為深黑色背景 */
                                color: #ffffff !important;
                            }

                            /* 2. 強制讓選單中的文字變成鮮明的白色 */
                            .navbar-item, 
                            .navbar-link, 
                            .navbar-item a,
                            .dropdown-item,
                            select, option {
                                color: #ffffff !important; /* 文字強制變白 */
                                background-color: transparent !important;
                            }

                            /* 3. 當滑鼠移過或點擊選單項時，給一個深灰色背景避免字體融合 */
                            .navbar-item:hover, 
                            .navbar-link:hover,
                            .dropdown-item:hover {
                                background-color: #333333 !important;
                                color: #00d1b2 !important; /* 讓字體帶有一點亮綠色，更顯眼 */
                            }

                            /* 4. 修正 Logo 在黑底下的亮度 */
                            img[src*="filegator_logo.svg"] {
                                filter: invert(1) brightness(1.5) contrast(1.2) !important;
                            }
                        }

                        /* 導覽列靠左與高度修正 */
                        .navbar-brand {
                            justify-content: flex-start !important;
                            padding-left: 0 !important;
                        }
                        .navbar, .navbar-brand {
                            height: auto !important;
                            min-height: 80px !important;
                        }

                        /* 手機版 Logo 縮放與表格橫向修正 */
                        @media screen and (max-width: 768px) {
                            /* 手機版 Logo 尺寸 */
                            img[src*="filegator_logo.svg"] {
                                width: 220px !important;
                                min-width: 220px !important;
                                height: 55px !important;
                            }
                            .navbar-brand { min-height: 60px !important; }

                            /* 消除塊狀標籤，恢復橫排 */
                            .table.has-mobile-cards td:before { display: none !important; content: none !important; }
                            .table.has-mobile-cards td { display: table-cell !important; padding: 10px 5px !important; text-align: left !important; vertical-align: middle !important; }
                            .table.has-mobile-cards tr { display: table-row !important; border-bottom: 1px solid #eee !important; }
                            .table.has-mobile-cards td[data-label="權限"], .table.has-mobile-cards th:nth-child(3) { display: none !important; }
                            .table.has-mobile-cards td[data-label="名稱"] { max-width: 140px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
                        }
                    </style>
                    <script>
                    document.addEventListener("DOMContentLoaded", function() {
                        const tMap = {
                            "登录":"登入", "码":"碼", "用户名":"帳號", "用户":"使用者", "文件":"檔案", "退出":"登出",
                            "页":"頁", "传":"傳", "新建":"新增", "称":"稱", "权":"權", "大小":"檔案大小",
                            "时":"時", "间":"間", "复制":"拷貝", "移动":"移動", "重命名":"重新命名", "压缩":"壓縮",
                            "保存":"儲存", "确认":"確認", "搜索":"搜尋", "载":"載", "分享":"分享連結", "个":"個", 
                            "夹":"夾", "选":"選", "择":"擇", "旧":"舊", "关闭":"關閉", "员":"員"
                        };

                        setInterval(() => {
                            // A. 隱藏 NAS 系統資料夾
                            document.querySelectorAll(".file-row, tr").forEach(row => {
                                const text = row.textContent.toLowerCase();
                                if (text.includes("@eadir") || text.includes("#recycle")) {
                                    row.style.setProperty("display", "none", "important");
                                }
                            });

                            // B. 繁體轉換邏輯
                            const walk = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
                            let n;
                            while(n = walk.nextNode()) {
                                let t = n.textContent;
                                if (Object.values(tMap).some(v => t === v)) continue;
                                for(let k in tMap) {
                                    if (t.includes(k) && !t.includes(tMap[k])) {
                                        n.textContent = t.replace(new RegExp(k, "g"), tMap[k]);
                                    }
                                }
                            }
                        }, 500);
                    });
                    </script>',
                'add_to_body' => '',
            ],
        ],
        'Filegator\Services\Storage\Filesystem' => [
            'handler' => '\Filegator\Services\Storage\Filesystem',
            'config' => [
                'separator' => '/',
                'config' => [],
                'adapter' => function () {
                    return new \League\Flysystem\Adapter\Local(
                        __DIR__.'/repository'
                    );
                },
            ],
        ],
        'Filegator\Services\Archiver\ArchiverInterface' => [
            'handler' => '\Filegator\Services\Archiver\Adapters\ZipArchiver',
            'config' => [],
        ],
        'Filegator\Services\Auth\AuthInterface' => [
            'handler' => '\Filegator\Services\Auth\Adapters\JsonFile',
            'config' => [
                'file' => __DIR__.'/private/users.json',
            ],
        ],
        'Filegator\Services\Router\Router' => [
            'handler' => '\Filegator\Services\Router\Router',
            'config' => [
                'query_param' => 'r',
                'routes_file' => __DIR__.'/backend/Controllers/routes.php',
            ],
        ],
    ],
];

假如你想編修裡面的用詞，我是將單字拆開來逐一翻譯，你也可以針對組合文字做翻譯，試試看就會知道我在說啥……

如果你要置換自己的 logo 就是把 86 行的「https://filegator.io/filegator_logo.svg」換成你自己放在 web host 上的圖片（svg 或是 png）就可以了。

最後，我們應該怎麼用 FileGator？

FileGator 是一個優缺點並存的工具。它極度輕量，但也缺乏深層的權限控管。如果你想用它完全取代 File Station，可能會覺得功能不足；但若把它當作一個「簡易上傳入口」，它的體驗絕對比原廠的「檔案請求」好上許多。

所有的工具都有其定位，與其在意它的短處，不如發揮它的長處。如果你在架設過程遇到困難，歡迎在下方留言交流！