1, Foreword

I am a rookie. Recently, I want to learn about. Net5 and Vue with the help of WTM framework. I happen to have an idle Centos server on hand. By the way, I record how to deploy WTM in Centos8.

2, Preparatory work

One has been installed Pagoda panel Centos8 server or virtual machine,

3, Installation environment

The environment I use is Nginx+MySql, and the daemon uses Supervisor.

1. Install Nginx, MySql and Supervisor

Install the latest version of Nginx and Supervisor. The WTM official website recommends MySql to install version 5.7 or above. I can only install version 5.7 due to the memory limitation of the server.

2. On the database page, click Add database.

3. Install the. NET runtime

Open the terminal, connect to the server, and enter

sudo dnf install aspnetcore-runtime-5.0

Finally, complete appears! The environment is installed.

4, Build site

1. Click "add site" on the website page.

Fill in your own domain name (you need to set up dns resolution at the domain name buyer in advance), and select "pure static" for the PHP version below. (if there is no domain name, you can also fill in the IP address of the server)

After setting, enter the domain name to enter the website.

2. Upload WTM

Publish WTM to a folder. The configuration is shown in the figure. The default is OK.

Package and upload the generated files to the root directory of the site.

Double click the appsettings.json file to modify the database connection string. Fill in the account and password generated when the database was just created. The first is the database name, the second is the account name, and the third is the account password.

3. Start the. Net 5 program.

First navigate to the site root directory

cd /www/wwwroot/sales

Running program:

dotnet Solution name.dll

The access address appears http://localhost:5000 The startup is successful.

4. Add reverse proxy

Fill in a name, and fill in the target URL:

http://localhost:5000

Send the domain name. Just fill in your own domain name (or IP) here.

5. Enter the domain name (or IP address) to access

6. Add a daemon (to keep the website running)

5, Possible problems

After the first deployment, I encountered an error:

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.

Later, I studied it and found that the front-end project did not upload to the server. You need to upload the ClientApp/dist folder under the solution directory to the root directory of the website

Then modify the Configure method in startup.cs.

public void Configure(IApplicationBuilder app, IOptionsMonitor<configs> configs, IHostEnvironment env)
        {
            app.UseExceptionHandler(configs.CurrentValue.ErrorHandler);
            app.UseStaticFiles();
            app.UseWtmStaticFiles();
            //app.UseSpaStaticFiles();1. Step 1: modify
            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. Step 2: modify
            app.UseSpa(spa =>
            {
                if (env.IsDevelopment())
                    spa.Options.SourcePath = "ClientApp/";
                else
                    spa.Options.DefaultPageStaticFileOptions = spaStaticFileOptions;
                //if (env.IsDevelopment())
                //{
                //    spa.UseVueCli(npmScript: "serve");
                //}
            });
        }

It can be solved perfectly. If you still have a better solution, you can comment and leave a message.

Statement: this tutorial mainly refers to the following two articles. If there is infringement, please contact me to delete:
https://blog.csdn.net/sxy_student/article/details/113486234
https://stackoverflow.com/questions/66725062/asp-net-core-and-spa-vue-the-spa-default-page-middleware-could-not-return-the