使用WTM框架建立部落格系統後臺並在雲伺服器釋出

閱讀導航

• 1. 關於lqclass.com
• 2. 部落格後臺前後端部署
  • 2.1 已部署訪問連結
  • 2.2 nginx 部署
    • 2.2.1 後臺後端釋出
    • 2.2.2 後臺前端釋出
    • 2.2.3 雲伺服器部署
• 3. 下次分享

1. 關於lqclass.com

lqclass.com是新建部落格網站的域名，部落格網站站名暫定樂趣Class?，前期邊開發邊分享開發成果。

2. 部落格後臺前後端部署

2.1 已部署訪問連結

先給出後臺前後端訪問連結吧:

• 後臺前端

http://admin.lqclass.com/

測試賬號與密碼同名：lqclass.com

• 後臺後端

http://api.lqclass.com/swagger/index.html

對部署細節感興趣的朋友可繼續閱讀後面的內容。

前後端部署，對常做B/S開發的朋友來說，應該是很簡單，我這隻做下簡單記錄，技術交流請閱讀原文留言，因為本號沒有留言功能…

2.2 nginx 部署

部落格系統正在開發，部署暫時未上Docker，畢竟我不熟，Nginx倒是接觸過幾回了，來日方長，不著急。

2.2.1 後臺後端釋出

使用WTM建立的後端，目前框架最高只能選到.NET Core 3.1，.NET 5.0還未支援。

.NET Core的釋出很方便，只需要選擇主工程，右鍵點選“釋出”，彈出釋出配置介面（下面是我的釋出配置），選擇的部署模式是框架依賴，伺服器上只需要安裝.NET Core執行時即可（當然也可以選擇獨立釋出，執行時都不用安裝）：

將打包釋出生成的檔案拷貝到伺服器，生成的目錄是：

lqclass.com\src\LQClass.Admin\LQClass\bin\Release\netcoreapp3.1\publish

伺服器上具體存放的目錄，2.2.3後面接著說。

2.2.2 後臺前端釋出

前端釋出也方便，一句命令：

npm run build

完事，將前端釋出生成的檔案拷貝到伺服器，生成的目錄是：

lqclass.com\src\LQClass.Admin\LQClass\ClientApp\dist

伺服器上具體存放的目錄，2.2.3接著就講。

2.2.3 雲伺服器部署

買了一個Windows Server 2016的雲伺服器，部署比較方便。

部署步驟：

1. 下載 nginx，解壓到某目錄。

http://nginx.org/en/download.html

2. 將後臺前後端釋出生成的檔案存放在nginx的html目錄中，目錄結構如下：

• admin：後臺前端Web檔案，使用WTM生成的vue前端；
• api：後臺後端檔案，.NET Core 3.1 Web API，計劃也做為前臺後端，使用WTM生成的後端；

api後端檔案不是必須放在nginx目錄下，只是為了方便管理，執行後端時直接雙擊執行LQClass.exe即可，用nginx做反向代理。

• web：前臺前端，目錄只是vue cli建立的空專案，目前也可以訪問的，只是沒多大意義

訪問地址：

lqclass.com

• 配置 nginx-1.19.5\html\nginx.conf

一級域名、二級域名建立及關聯雲伺服器IP，DNS解析等請在雲伺服器控制檯那邊折騰，這個就不詳說了。

下面是nginx的配置，站長折騰了好一會兒，因為不熟，問了Dotnet9技術交流群的一些大佬，然後折騰出來的，配置的可能有點囉嗦，有建議歡迎留言哦，配置註釋我直接寫在下面配置檔案中：

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;

    keepalive_timeout  65;

    server {
        listen          80;            // 80埠
        server_name     lqclass.com;   // 前臺對外訪問域名

        location / {
            root   html/web;           // 前臺釋出檔案目錄
            index  index.html index.htm;
        }
    }
    
    server {
        listen          80;              // 80埠
        server_name     api.lqclass.com; // 後臺後端對外訪問域名
        
        location / {
            proxy_pass  http://127.0.0.1:5000;  // nginx反向代理的後端地址，雙擊執行後端本地的訪問地址，外網通過api.lqclass.com可以代理到該地址
        }
    }


    server {
        listen          80;                  // 80埠
        server_name     admin.lqclass.com;   // 後臺前端對外訪問域名

        location / {
            root   html/admin;               // 後臺前端釋出檔案目錄
            index  index.html index.htm;
        }
        
        location /api {
            proxy_pass  http://127.0.0.1:5000/api; // 後臺前端訪問後端介面時的代理地址，使得nginx可以處理跨域的問題
        }
    }
}

• 雙擊nginx.exe，外網即可訪問樂趣Class的前後臺前端、後端了，訪問地址見2.1。

3. 下次分享

目前部落格系統的後臺前後端使用WTM搭建，為了後面開發部落格系統前臺，站長決定先熟悉WTM的已有API介面，正在使用WPF重構後臺客戶端(.NET 5)，儘量仿照後臺前端風格及功能，比如登入頁面：

---

時間如流水，只能流去不流回。

• 倉庫地址：lqclass.com
• 本文Markdown、pdf、ppt：點選下載
• 作者及編輯：沙漠之盡頭的狼
• 日期：2020-12-26