使用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)，盡量仿照后台前端風格及功能，比如登錄頁面：

---

文末資源分享

• 回復數字【01】：獲取DotNet技術資料
• 回復數字【02】：獲取Java技術資料
• 回復數字【03】：獲取Android技術資料
• 回復數字【04】：獲取C++技術資料
• 回復數字【05】：獲取Qt技術資料
• 回復數字【06】：獲取React資源
• 添加號主微信號【dotnet9】：備注【入群】加入與大佬們的技術交流
• 添加QQ群【771992300】：備注【Dotnet9】加入技術交流，無人數上限、有資源共享

---

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

• 公眾號：Dotnet9
• 號主微信號：dotnet9
• 倉庫地址：lqclass.com
• 本文Markdown、pdf、ppt：點擊下載
• 作者及編輯：沙漠之盡頭的狼
• 日期：2020-12-26