一、前言

本人菜鸟一个,最近想借助WTM框架学习一下.Net5和Vue,正好手头有一台闲置的Centos服务器,顺便记录一下如何在Centos8中部署WTM。

二、准备工作

一台已经安装好宝塔面板的Centos8服务器或者虚拟机,

三、安装环境

我使用的环境是Nginx+MySql,守护进程使用Supervisor。

1,安装Nginx、MySql以及Supervisor

Nginx和Supervisor安装最新版即可。WTM官网推荐MySql安装5.7版本以上的,我这里受服务器内存限制,只能安装5.7的。

宝塔 Docker版本 宝塔支持centos8吗_服务器

2.在数据库页面,点击添加数据库。

宝塔 Docker版本 宝塔支持centos8吗_ide_02

3.安装.NET 运行时

打开终端,连接服务器,输入

sudo dnf install aspnetcore-runtime-5.0

最后出现complete!环境就安装完成了。

四、搭建站点

1、在网站页面点击“添加站点”。

填入自己的域名(需要提前到域名购买商那里设置好dns解析),下方PHP版本选择“纯静态”。(如果没有域名,也可以填写服务器的IP)

宝塔 Docker版本 宝塔支持centos8吗_宝塔 Docker版本_03

设置好后,输入域名进入网站。

宝塔 Docker版本 宝塔支持centos8吗_宝塔 Docker版本_04

2、上传WTM

发布WTM到文件夹,配置如图,默认的就可以。

宝塔 Docker版本 宝塔支持centos8吗_上传_05

将生成好的文件打包上传到站点根目录。

宝塔 Docker版本 宝塔支持centos8吗_宝塔 Docker版本_06

双击appsettings.json文件,修改数据库连接字符串。填入刚刚新建数据库时,生成的账号和密码。第一个是数据库名,第二个账户名,第三个是账户密码。

宝塔 Docker版本 宝塔支持centos8吗_ide_07

3、启动.NET5程序。

首先定位到站点根目录

cd /www/wwwroot/sales

运行程序:

dotnet 解决方案名称.dll

出现访问地址了 http://localhost:5000 即为启动成功。

宝塔 Docker版本 宝塔支持centos8吗_服务器_08

4、添加反向代理

填写一个名称,目标URL填:

http://localhost:5000

发送域名这里填自己的域名(或者IP)即可。

宝塔 Docker版本 宝塔支持centos8吗_上传_09

5、输入域名(或IP地址)即可访问

宝塔 Docker版本 宝塔支持centos8吗_ide_10

6.添加守护进程(可以让网站持续运行)

宝塔 Docker版本 宝塔支持centos8吗_服务器_11

五,可能出现的问题

我在第一次部署后,遇到报错:

System.InvalidOperationException: The SPA default page middleware could not return the default page '/index.html' because it was not found, and no other middleware handled the request.
Your application is running in Production mode, so make sure it has been published, or that you have built your SPA manually. Alternatively you may wish to switch to the Development environment.

后来研究了一下,发现是前端项目没有上传服务器。需要将解决方案目录下ClientApp/dist文件夹上传到网站根目录

宝塔 Docker版本 宝塔支持centos8吗_ide_12

然后修改一下startup.cs中的Configure方法。

public void Configure(IApplicationBuilder app, IOptionsMonitor<configs> configs, IHostEnvironment env)
        {
            app.UseExceptionHandler(configs.CurrentValue.ErrorHandler);
            app.UseStaticFiles();
            app.UseWtmStaticFiles();
            //app.UseSpaStaticFiles();1.第一步修改
            var spaStaticFileOptions = new StaticFileOptions
            {
                FileProvider = new Microsoft.Extensions.FileProviders.PhysicalFileProvider(System.IO.Path.Combine(env.ContentRootPath, "ClientApp/dist"))
            };
            app.UseSpaStaticFiles(spaStaticFileOptions);
            app.UseWtmSwagger();
            app.UseRouting();
            app.UseWtmMultiLanguages();
            app.UseWtmCrossDomain();
            app.UseAuthentication();
            app.UseAuthorization();
            app.UseSession();
            app.UseWtm();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllerRoute(
                   name: "areaRoute",
                   pattern: "{area:exists}/{controller=Home}/{action=Index}/{id?}");
                endpoints.MapControllerRoute(
                    name: "default",
                    pattern: "{controller=Home}/{action=Index}/{id?}");

                if (env.IsDevelopment())
                {
                    endpoints.MapToVueCliProxy(
                        "{*path}",
                        new SpaOptions { SourcePath = "ClientApp" },
                        npmScript: "start",
                        regex: "Compiled successfully");
                }
            });
            
            app.UseWtmContext();
            //app.UseSpa(spa =>
            //{
            //    spa.Options.SourcePath = "ClientApp";
            //});2.第二步修改
            app.UseSpa(spa =>
            {
                if (env.IsDevelopment())
                    spa.Options.SourcePath = "ClientApp/";
                else
                    spa.Options.DefaultPageStaticFileOptions = spaStaticFileOptions;
                //if (env.IsDevelopment())
                //{
                //    spa.UseVueCli(npmScript: "serve");
                //}
            });
        }

即可完美解决。如果大家还有更好的解决办法,可以评论留言一下_