阅读导航
===========
-
-
关于lqclass.com
-
-
-
博客后台前后端部署
-
2.1 已部署访问链接
-
2.2 nginx 部署
-
2.2.1 后台后端发布
-
2.2.2 后台前端发布
-
2.2.3 云服务器部署
-
-
-
-
下次分享
-
1. 关于lqclass.com
lqclass.com
是新建博客网站的域名,博客网站站名暂定乐趣Class
😂,前期边开发边分享开发成果。
2. 博客后台前后端部署
2.1 已部署访问链接
先给出后台前后端访问链接吧:
测试账号与密码同名:lqclass.com
对部署细节感兴趣的朋友可继续阅读后面的内容。
前后端部署,对常做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的云服务器,部署比较方便。
部署步骤:
-
下载 nginx,解压到某目录。
-
将后台前后端发布生成的文件存放在nginx的html目录中,目录结构如下:
nginx存放结构
-
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
),尽量仿照后台前端风格及功能,比如登录页面:
Vue后台前端登录页面
WPF后台客户端窗口
❝
时间如流水,只能流去不流回。
仓库地址:lqclass.com
本文Markdown、pdf、ppt:点击下载
作者及编辑:沙漠之尽头的狼
日期:2020-12-26