CMSiMDE 部署

CMSiMDE 所能伺服的內容包含網站, 網誌與簡報, 而網站又分為動態系統與靜態系統, 動態網站建置主要的目的在方便進行 html 文件的編輯, 而靜態網站系統則主要為了能在一般的 WWW 伺服器上進行部署.

網站

CMSiMDE 的網站編輯採用 Flask 框架編寫, 目前所需要的模組包含 flask, flask_cors, lxml, bs4 與 markdown. 使用者可以選擇將 CMSiMDE 當作 submodule 或者單獨部署在倉儲內容中的 cmsimde 目錄後, 再將 cmsimde 目錄中的 up_dir 目錄內容複製到倉儲主目錄即可.

CMSiMDE 倉儲資料包含引擎內容 (也就是 cmsimde 中的資料) 與使用者內容 (也就是 up_dir 中的資料) 等兩類, 許多的網際功能都是配合歷年上課時敲敲打打修改而成, 因此整體架構相當鬆散, 就所謂的網際內容管理功能而言, 只能算勉強堪用, 還有很大的修改空間.

網誌

CMSiMDE 的網誌系統採用 Pelican, 編輯網誌的架構採用 Leo Editor 管理, 而網誌專案檔位於 config 目錄中的 pelican.leo.

Leo Editor 其實是一套值得大力推廣的整合開發系統與文件編輯器, 但可能因為曲高因此和寡, 真正能夠運用上手的全球用戶, 數量始終偏低. 但是其大綱編輯模式非常適合處理複雜的工程設計流程所產生的各種文字資料, 因此非常希望 Python 新手能夠以看懂 Leo Editor 的設計架構與處理問題的細節作為遠大的目標.

簡報

CMSiMDE 的網誌簡報採用 reveal.js. 而簡報的編輯檔案也是採用 Leo Editor, 簡報專案位於 config 目錄中的 reveal.leo.

網站建構流程

CMSiMDE 的網站建構流程, 可以從建立初始的 Github 倉儲開始. 亦即在 Github 建立一個僅含 README.md 檔案的倉儲, 然後 git clone 該倉儲到近端後, 以命令列進入該倉儲後再以

git submodule add https://github.com/mdecourse/cmsimde.git cmsimde

將 CMSiMDE 倉儲內容納為子模組, 且命名為 cmsimde 目錄. 接下來將 cmsimde 目錄中, 名稱為 up_dir 的目錄內容, 複製到倉儲的根目錄中. 若近端隨身系統或操作系統已經安裝 Python3 與相應的 flask, flask_cors, lxml, bs4, markdown 等模組後, 就可以在命令列中, 進入 cmsimde 子目錄, 以:

python wsgi.py

假如是在 OS X 或 Linux 操作系統, 則必須使用 Python 3 指令:

python3 wsgi.py

在近端啟動動態網站, 以瀏覽器 https://localhost:9443 開啟.

網站內容管理

CMSiMDE 的動態網際內容管理, 將所有網頁內容存入 config 目錄中的 content.htm 檔案, 而在每一次使用者儲存新檔案之前, 會將舊版的 content.htm 複製至 content_backup.htm, 之所以如此是因為 CMSiMDE 採用 bs4, 對 config/content.htm 內容進行分頁, 而分頁是依據 content.htm 由上到下的 h1, h2 與 h3 標註內容而定. 並在將動態網站內容 content.htm 以動態編輯器中的 generate pages 功能 (使用 lxml 模組功能) 轉為 content 目錄中的各分頁內容時, 可能因分頁失敗而讓整個 content.htm 內容丟失 (這就是非常需要改進的地方之一), 所以才設計 content_backup.htm 的複製進行及時補救.

另外, 在 CMSiMDE 將操作系統不允許作為檔案名稱的特殊符號自動移除之前 (例如 ":" 號), 使用者應該避免在 h1, h2 與 h3 等標題中使用特殊符號.

Github Pages

將 CMSiMDE 的動態系統轉為靜態後, 所有靜態頁面的內容存入 content 目錄, 使用者可以將此目錄內容部署到 Github Pages 上, 或其他能夠伺服 WWW html 檔案的系統即可完成網站的建立.

但是一般為了方便, 通常將包含動態系統與靜態網站內容的整個倉儲資料, 直接交由 Github 管理. 只要將倉儲的 master 分支設為 Github Pages 的根目錄, 就可以交由 Github Pages, 由倉儲主分支倉儲中的 index.html 進行網站導引.

假如使用者將近端的動態網頁內容轉為靜態後, 希望在近端檢視靜態網站內容, 可以在近端倉儲根目錄利用:

python http-server.py

或在 OS X 及 Linux 操作系統中以:

python3 http-server.py

啟動 https://localhost:8444 近端的靜態網頁伺服系統.

Ubuntu 20.04 自架主機

上述利用 Github Pages 伺服 CMSiMDE 靜態網頁內容的配置流程非常簡單, 但若是要將 CMSiMDE 靜態網頁與動態網站系統部署在自架的 Ubuntu 20.04 主機, 則操作系統除了要安裝前述的 python3, flask, flask_cors, bs4, lxml, markdown 之外, 還需要運用 nginx, uwsgi, openssl 進行配置.

其中, openssl 用來建立網站認證用的 key 與 certificate, nginx 負責建立 WWW 伺服, 而 uwsgi 則負責用來開機執行 CMSiMDE 中的 wsgi.py 伺服程式.

利用 openssl 建立 cmsimde.key 與 cmsimde.crt 的指令如下:

sudo openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout cmsimde.key -out cmsimde.crt

與 uwsgi 有關的 Ubuntu 系統安裝則包括:

// 安裝 pip3
sudo apt install python3-pip
// 安裝 python 編譯開發系統
sudo apt install build-essential python3-dev
// 安裝 uwsgi 模組
sudo pip3 install uwsgi
// 安裝 nginx 伺服套件與 uwsgi python3 plugin 程式庫
sudo apt install nginx uwsgi-plugin-python3

/etc/nginx/sites-available/default

# for lab.mde.tw static site, use nginx to serve
server {
    listen 80 default_server;
    listen [::]:80 default_server;

    root /home/user_account/labmdetw;
    index index.html index.htm;
    server_name _;

    location /static {
            alias /home/user_account/labmdetw/cmsimde/static/;
        }
        location /downloads {
            alias /home/user_account/labmdetw/downloads/;
        }

        location /images {
            alias /home/user_account/labmdetw/images/;
        }

        location /blog {
            alias /home/user_account/labmdetw/blog/;
        }

        location /reveal {
            alias /home/user_account/labmdetw/reveal/;
        }

    location / {
        # First attempt to serve request as file, then
        # as directory, then fall back to displaying a 404.
        try_files $uri $uri/ =404;
    }

}

# https://lab.mde.tw use nginx to serve
server {
    listen 443 ssl;
    listen [::]:443 ssl;
    root /home/user_account/labmdetw;
    index index.html index.htm;
    server_name _;

    location /static {
            alias /home/user_account/labmdetw/cmsimde/static/;
        }
        location /downloads {
            alias /home/user_account/labmdetw/downloads/;
        }

        location /images {
            alias /home/user_account/labmdetw/images/;
        }

        location /blog {
            alias /home/user_account/labmdetw/blog/;
        }

        location /reveal {
            alias /home/user_account/labmdetw/reveal/;
        }

    location / {
    # First attempt to serve request as file, then
    # as directory, then fall back to displaying a 404.
    try_files $uri $uri/ =404;
    }

    ssl_certificate /etc/nginx/nginx.crt;
    ssl_certificate_key /etc/nginx/nginx.key;
    ssl_session_timeout 5m;
    ssl_protocols SSLv3 TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers "HIGH:!aNULL:!MD5 or HIGH:!aNULL:!MD5:!3DES";
    ssl_prefer_server_ciphers on;
    try_files $uri $uri/ =404;
}

# dynamic https://lab.mde.tw:7443 use nginx for ssl and uwsgi for wsgi serving
server {

    listen 7443 ssl;
    listen [::]:7443 ssl;

    location /static {
        alias /home/user_account/labmdetw/cmsimde/static/;
    }

    location / {
        include uwsgi_params;
        uwsgi_pass  127.0.0.1:9443;
    }

    ssl_certificate /etc/nginx/nginx.crt;
    ssl_certificate_key /etc/nginx/nginx.key;
    ssl_session_timeout 5m;
    ssl_protocols SSLv3 TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers "HIGH:!aNULL:!MD5 or HIGH:!aNULL:!MD5:!3DES";
    ssl_prefer_server_ciphers on;
    try_files $uri $uri/ =404;
}

uwsgi_ini/uwsgi.ini

[uwsgi]
socket = 127.0.0.1:9443
uid = user_account
gid = user_account
plugins-dir = /usr/lib/uwsgi/plugins/
plugin = python3
master = true
process = 4
threads = 2
chdir = /home/user_account/labmdetw/cmsimde
wsgi-file = /home/user_account/labmdetw/cmsimde/wsgi.py

啟動 uwsgi 指令, 將會逐一啟動 wsgi_ini 目錄中個別 .ini 檔案:

sudo /usr/bin/uwsgi --emperor /home/user_account/wsgi_ini

最後則設定 Ubuntu 系統服務, 用來啟動 uwsgi:

/etc/systemd/system 的 cmsimde.service 服務啟動檔案內容:

[Unit]
Description=uWSGI to serve CMSiMDE
After=network.target

[Service]
User=user_account
Group=user_account
WorkingDirectory=/home/user_account/uwsgi_ini
ExecStart=/usr/local/bin/uwsgi --emperor /home/user_account/uwsgi_ini

[Install]
WantedBy=multi-user.target

接著將 cmsimde 服務設為隨系統開機啟動:

sudo systemctl enable cmsimde

若要取消 cmsimde 服務隨系統開機啟動:

sudo systemctl disable cmsimde

手動啟動 cmsimde.service 服務

sudo systemctl start cmsimde

手動停止 cmsimde.service 服務

sudo systemctl stop cmsimde