Use the WTM framework to create a blog system background and publish it on the ECS

Time:2021-10-8

Reading navigation

    1. About lqclass.com
    1. Blog background front and rear deployment
    • 2.1 deployed access links
    • 2.2 nginx deployment
      • 2.2.1 backend Publishing
      • 2.2.2 background and front-end Publishing
      • 2.2.3 ECS deployment
    1. Share next time

1. About lqclass.com

lqclass.comIs the domain name of the new blog website. The name of the blog website is tentativeFun classIn the early stage, share the development achievements while developing.

2. Front and back end deployment of blog background

2.1 deployed access links

Let’s give the front and back access links of the background first:

http://admin.lqclass.com/

Test account and password have the same name:lqclass.com

http://api.lqclass.com/swagger/index.html

Friends interested in deployment details can continue to read the following content.

Front and back end deployment should be very simple for friends who often do B / s development. I only make a simple record. Please read the original message for technical communication, because this number has no message function

2.2 nginx deployment

The blog system is under development and has not been deployed yetDocker, after all, I don’t know,NginxI’ve been in contact several times. It’s going to be a long time. Don’t worry.

2.2.1 backend Publishing

useWTMCurrently, the framework can only be selected at most.NET Core 3.1.NET 5.0Not yet supported.

.NET CoreThe publishing of is very convenient. You only need to select the main project, right-click publish, and the publishing configuration interface will pop up (my publishing configuration below). The selected deployment mode is framework dependent, and you only need to install it on the server.NET CoreRun time (of course, you can choose to publish independently without installation at run time):

后端发布配置

Copy the files generated by the package publishing to the server. The generated directory is:

lqclass.com\src\LQClass.Admin\LQClass\bin\Release\netcoreapp3.1\publish

The specific directory stored on the server,2.2.3Go on later.

2.2.2 background and front-end Publishing

The front-end release is also convenient. One command:

npm run build

After completion, copy the files generated by the front-end release to the server. The generated directory is:

lqclass.com\src\LQClass.Admin\LQClass\ClientApp\dist

The specific directory stored on the server,2.2.3Go on.

2.2.3 ECS deployment

I bought a Windows Server 2016 ECs, which is easy to deploy.

Deployment steps

  1. downloadnginx, unzip to a directory.
http://nginx.org/en/download.html
  1. Store the files generated by the background front and back-end publishing in the HTML directory of nginx. The directory structure is as follows:

nginx存放结构

  • Admin: background front-end web file, usingWTMGeneratedvuefront end;
  • API: background back-end file,. Net core 3.1 web API. It is also planned to be used as the foreground back-endWTMGenerated backend;

API back-end files do not have to be placed in nginx directory, but just for convenience of management. When running the back-end, double-click it directlyLQClass.exeJust do it with nginxReverse proxy

  • Web: the front end of the foreground. The directory is just an empty item created by Vue cli. It can also be accessed at present, but it doesn’t make much sense

Access address:

lqclass.com
  • to configurenginx-1.19.5\html\nginx.conf

For the creation of primary domain names and secondary domain names and the associated ECS IP and DNS resolution, please toss around on the ECS console. This is unknown.

The following is the configuration of nginx. The webmaster tossed about for a while. He asked because he was unfamiliarDotnet9 technical exchange groupSome bigwigs of, and then tossed it out. The configuration may be a little wordy. If you have suggestions, please leave a message. I write the configuration comments directly in the following configuration file:

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;

    keepalive_timeout  65;

    server {
        listen          80;            //  Port 80
        server_ name     lqclass.com;   //  Front desk external access domain name

        location / {
            root   html/web;           //  Front office release file directory
            index  index.html index.htm;
        }
    }
    
    server {
        listen          80;              //  Port 80
        server_ name     api.lqclass.com; //  Background backend external access domain name
        
        location / {
            proxy_ pass   http://127.0.0.1:5000 ;  //  The back-end address of nginx reverse proxy. Double click the local access address of the running back-end. The external network can proxy to this address through api.lqclass.com
        }
    }


    server {
        listen          80;                  //  Port 80
        server_ name     admin.lqclass.com;   //  Background front-end external access domain name

        location / {
            root   html/admin;               //  Background front end publishing file directory
            index  index.html index.htm;
        }
        
        location /api {
            proxy_ pass   http://127.0.0.1:5000/api ; //  The proxy address when the back-end accesses the back-end interface, so that nginx can deal with cross domain problems
        }
    }
}
  • Double click nginx.exe to access the InternetFun classThe front-end and back-end of are. See for the access address2.1

3. Share next time

At present, the background front and back ends of blog system are usedWTMBuild, in order to develop the front desk of the blog system, the webmaster decided to get familiar with it firstWTMThe existing API interface of is in useWPFRefactoring background client(.NET 5), try to imitate the style and functions of the background front end, such as the login page:

Vue后台前端登录页面

WPF后台客户端窗口


Resource sharing at the end of the article

  • Reply number [01]: obtain dotnet technical data
  • Reply number [02]: obtain Java technical data
  • Reply number [03]: get Android technical data
  • Reply number [04]: obtain C + + technical data
  • Reply number [05]: get QT technical data
  • Reply number [06]: get react resources
  • Add No. main micro signal [dotnet9]: note [join the group] to join the technical communication with the big guys
  • Add QQ group [771992300]: note [dotnet9] to join technical exchanges. There is no upper limit on the number of people and there is resource sharing

Time is like running water, which can only flow away but not back.

  • Official account: Dotnet9
  • Main micro signal No.: dotnet9
  • Warehouse address:lqclass.com
  • Markdown, PDF, ppt:Click download
  • Author and editor: wolf at the end of the desert
  • Date: December 26, 2020

微信公众号:Dotnet9