Linux

Matrix 的前端框架 – Element

前言

繼上一篇的 架設自己的聊天伺服器 – Matrix ，我們在該篇文章的結尾介紹了 Element，而他也是一個開源的項目。所以這篇要來在自己的伺服器上安裝前端框架 Element。

如果你上篇還沒看過，你看這篇文章可能會很難理解。本篇推薦本來就有 Matrix 或是已經看完上篇文章了。

下載

如果你是上篇文章來的訪客，你的機器上應該已經有 Nginx 了。因此，我們移到 /var/www 目錄底下。

cd /var/www

接著我們到 vector-im/element-web 的下載最新的 release。（以下命令網址為編寫文章時最新版）

sudo wget https://github.com/vector-im/element-web/releases/download/v1.11.40-rc.1/element-v1.11.40-rc.1.tar.gz

解壓縮這個檔案。（檔名會依據下載版本有所差異）

sudo tar zxvf element-v1.11.40-rc.1.tar.gz

幫資料夾重新命名。（資料夾會依據下載版本有所差異）

sudo mv element-v1.11.40-rc.1/ element/

編輯配置檔

在該資料夾底下，有一個名為 config.sample.json，我們將他重新命名為 config.json。

sudo mv config.sample.json config.json

接著我們要編輯這個檔案。

sudo vim config.json

我們需要改變這個文件的一些地方，我在底下會在有改變的地方後面下註解：

{
    "default_server_config": {
        "m.homeserver": {
            "base_url": "https://your.domain.com", /* 你的 matrix 網址 */
            "server_name": "your.domain.com" /* 這個站點的名稱 */
        },
        "m.identity_server": {
            "base_url": "https://vector.im"
        }
    },
    "disable_custom_urls": true, /* 是否禁用用戶自訂網域 */
    "disable_guests": true, /* 是否禁用訪客模式 */
    "disable_login_language_selector": false,
    "disable_3pid_login": false,
    "brand": "Element",
    "integrations_ui_url": "https://scalar.vector.im/",
    "integrations_rest_url": "https://scalar.vector.im/api",
    "integrations_widgets_urls": [
        "https://scalar.vector.im/_matrix/integrations/v1",
        "https://scalar.vector.im/api",
        "https://scalar-staging.vector.im/_matrix/integrations/v1",
        "https://scalar-staging.vector.im/api",
        "https://scalar-staging.riot.im/scalar/api"
    ],
    "default_country_code": "TW", /* 預設的國家代碼 */
    "show_labs_settings": false,
    "features": {},
    "default_federate": true,
    "default_theme": "dark", /* 網站主題，white 跟 dark 可選 */
    "room_directory": {
        "servers": ["your.domain.com"] /* 伺服器網域 */
    },
    "enable_presence_by_hs_url": {
        "https://matrix.org": false,
        "https://matrix-client.matrix.org": false
    },
    "setting_defaults": {
        "breadcrumbs": true
    },
    "jitsi": {
        "preferred_domain": "meet.element.io"
    },
    "element_call": {
        "url": "https://call.element.io",
        "participant_limit": 8,
        "brand": "Element Call"
    },
    "map_style_url": "https://api.maptiler.com/maps/streets/style.json?key=fU3vlMsMn4Jb6dnEIFsx"
}

編輯 Nginx 檔案

前往 /etc/nginx/sites-enabled/ 目錄，並編輯 chat 檔案。

cd /etc/nginx/sites-enabled/ && sudo vim chat

從上篇文章來做延伸，現在我們 Nginx 的配置會改變成這樣：

server {
    listen 80;
    listen [::]:80;
    server_name your.domain.com;
    server_tokens off;
    more_set_headers Server;
    root /var/www/element;

    location / {
        try_files $uri $uri/ =404;
    }

    location /_matrix {
        proxy_pass http://localhost:8008;
        proxy_set_header X-Forwarded-For $remote_addr;
        client_max_body_size 10M;
    }
}

確認配置並重新啟動 Nginx。

sudo nginx -t && sudo systemctl restart nginx

完工

我們現在完工了！現在直接訪問你的網域，例如：http://your.domain.com，你就會直接看到 Element 的前端框架囉！

© 2025 CRE0809's Blog