使用WTM框架建立博客系統後臺並在雲服務器發佈

時間 2021-01-03

標籤 html 前端 vue nginx git github web npm 後端 api 欄目 HTML 简体版

原文原文鏈接

閱讀導航html

1. 關於lqclass.com
1. 博客後臺先後端部署
- 2.1 已部署訪問連接
- 2.2 nginx 部署
  - 2.2.1 後臺後端發佈
  - 2.2.2 後臺前端發佈
  - 2.2.3 雲服務器部署
1. 下次分享

1. 關於lqclass.com

lqclass.com是新建博客網站的域名，博客網站站名暫定樂趣Class😂，前期邊開發邊分享開發成果。前端

2. 博客後臺先後端部署

2.1 已部署訪問連接

先給出後臺先後端訪問連接吧:vue

後臺前端

http://admin.lqclass.com/

測試帳號與密碼同名：lqclass.comnginx

後臺後端

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

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

先後端部署，對常作B/S開發的朋友來講，應該是很簡單，我這隻作下簡單記錄，技術交流請閱讀原文留言，由於本號沒有留言功能...github

2.2 nginx 部署

博客系統正在開發，部署暫時未上Docker，畢竟我不熟，Nginx卻是接觸過幾次了，來日方長，不着急。web

2.2.1 後臺後端發佈

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

.NET Core的發佈很方便，只須要選擇主工程，右鍵點擊「發佈」，彈出發佈配置界面（下面是個人發佈配置），選擇的部署模式是框架依賴，服務器上只須要安裝.NET Core運行時便可（固然也能夠選擇獨立發佈，運行時都不用安裝）：後端

將打包發佈生成的文件拷貝到服務器，生成的目錄是：api

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的雲服務器，部署比較方便。

部署步驟：

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

將後臺先後端發佈生成的文件存放在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能夠處理跨域的問題
        }
    }
}