使用WTM框架创建博客系统后台并在云服务器发布

发表评论
462 次浏览

A+

所属分类：.NET技术

摘要

阅读导航lqclass.com是新建博客网站的域名，博客网站站名暂定乐趣Class?，前期边开发边分享开发成果。

便宜好用的国外VPS推荐

阅读导航

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 已部署访问链接

先给出后台前后端访问链接吧:

后台前端

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运行时即可（当然也可以选择独立发布，运行时都不用安装）：

使用WTM框架创建博客系统后台并在云服务器发布

将打包发布生成的文件拷贝到服务器，生成的目录是：

lqclass.comsrcLQClass.AdminLQClassbinReleasenetcoreapp3.1publish

服务器上具体存放的目录，2.2.3后面接着说。

2.2.2 后台前端发布

前端发布也方便，一句命令：

npm run build

完事，将前端发布生成的文件拷贝到服务器，生成的目录是：

lqclass.comsrcLQClass.AdminLQClassClientAppdist

服务器上具体存放的目录，2.2.3接着就讲。

2.2.3 云服务器部署

买了一个Windows Server 2016的云服务器，部署比较方便。

部署步骤：

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

将后台前后端发布生成的文件存放在nginx的html目录中，目录结构如下：

使用WTM框架创建博客系统后台并在云服务器发布

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.5htmlnginx.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可以处理跨域的问题         }     } }