Detailed. net core web API front-end and back-end development after separation of configuration and deployment

Time:2019-8-21

Background: Nowadays more and more enterprises adopt front-end and back-end separation in development. There are many kinds of front-end and back-end separation in development. So today, let me share the front-end and back-end separation in the project.

B/S Saas Project: (This project can be understood as a personal center, of course, more than that)

Front end: node. JS + Vue

Backend:.Net core webapi

The front-end installation of node. JS and the creation of Vue projects are not the focus of this article, but the deployment after the completion of the project.

After the. net core web API was created, by default, a wwwroot folder was created to place static files, so we can understand that this folder will place our built front-end project.

OK, so far, there’s an interesting discovery (or it’s not interesting at all, because it’s all the same dad and dad) that the deployment of this project is very similar to that of MVC (it doesn’t involve the underlying operation here, it’s just a simple post-release image).

The above figure is clear enough, such deployment belongs to the front-end and back-end separation of development. They belong to the same site and bind to the same domain name, so they do not involve cross-domain, and can not be directly invoked outside the web API (security or guaranteed D).

So this deployment is simple, just set up Configure in Startup.

// Setting Home Page
      app.UseDefaultFiles();

      // This is the configuration of. net core web API accessing the wwwroot folder to open static files
      app.UseStaticFiles();

      app.UseMvc(routes =>
      {
        routes.MapRoute(
          name: "default",
          template: "api/{controller=Login}/{action=Get}/{id?}");
      });

1. Setting up the home page first

The default is used directly here, that is, UseDefaultFiles will redirect to default. htm, default. html, index. htm, index. html. Of course, you can also specify the settings of the home page (the specified page can be customized!).

// Setting Home Page
      DefaultFilesOptions defaultFilesOptions = new DefaultFilesOptions();
      defaultFilesOptions.DefaultFileNames.Clear();
      defaultFilesOptions.DefaultFileNames.Add("index.html");

      app.UseDefaultFiles(defaultFilesOptions);

This set the redirection to index. html, so why did Clear be used before? In fact, I think it’s just for insurance, because

2. Open the static file. UseDefaultFiles is just a redirect URL, not a file. UseStaticFiles is the real static file. That’s why you need to set UseDefaultFiles first and then UseStaticFiles. Of course, providing static files also provides multiple overloads, providing a relative path, and static file directory selection.

// This is the configuration of. net core web API accessing the wwwroot folder to open static files
      StaticFileOptions staticFileOptions = new StaticFileOptions();
      StaticFileOptions.FileProvider = new Microsoft.Extensions.FileProviders.Physical FileProvider (@ "D: testsite\ wwroot"); specifies the directory of wwroot to be accessed by your site api; //specifies the directory of wwroot to be accessed by your site API  

      app.UseStaticFiles(staticFileOptions);

The above method can also be used, of course, the specified directory can also be placed in the configuration file, but this method is generally placed on projects similar to FTP. Because if the specified directory is separated from the web API project wwwroot, even folders under wwroot can not access static pages.

3. Using MVC and configuring routing, after opening the access of static files, it is handled by mvc. This is a web API project, so configuring the route of API is OK. (Except that the order 1 and 2 above cannot be changed, the order in which the routes configured in MVC are placed does not affect, because this is not an MVC project)

Okay, after the front and back end are developed, deploy to the server, just the configuration of Startup above. Net core is also very convenient.

Normal visit! No problem at all. Even if it’s a problem, it’s a problem with the code. Ooh-ha.

The above is a detailed integration of the configuration and deployment after the separation of front-end and back-end development of the. net core web api. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to developpaer.