Reading the navigation

= = = = = = = = = = =

    1. About lqclass.com

    1. Blog back-end back-end deployment

    • 2.1 Access links have been deployed

    • 2.2 nginx deployment

      • 2.2.1 Background backend Publishing

      • 2.2.2 Background And Front-end Release

      • 2.2.3 Cloud Server Deployment

    1. The next time to share

1. On lqclass.com

Lqclass.com is the domain name of the new blog website, the blog website name is tentative fun Class😂, the early stage of development while sharing the development results.

2. Blog background and back-end deployment

2.1 Access links have been deployed

Let’s start with the background and front end access links:

  • Background the front-end

    admin.lqclass.com/

The test account and password are lqclass.com

  • Background the back-end

    Api.lqclass.com/swagger/ind…

Read on for details of deployment.

Front and back end deployment, often do B/S development of friends, should be very simple, I only do a simple record, technical exchanges please read the original message, because this number has no message function…

2.2 nginx deployment

Blog system is under development, deployment is not Docker, after all I am not familiar with, Nginx is in touch with a few times, there is a long time to come, no hurry.

2.2.1 Background backend Publishing

For the backend created using WTM, the framework is currently only available at most. NET Core 3.1,.NET 5.0 is not yet supported.

Publishing.net Core is very easy, just select the main project, right click “publish”, the release configuration screen pops up (here is my release configuration), select the deployment mode is framework dependent, only need to install on the server. NET Core runtime can be used (of course, you can also choose to publish independently, do not install the runtime) :

Back-end publishing configuration

Copy the generated file from the packaged release to the server. The generated directory is:

Lqclass.com \ SRC \ LQClass Admin \ LQClass \ bin \ Release \ netcoreapp3.1 \ publishCopy the code

The specific directory stored on the server is described in 2.2.3.

2.2.2 Background And Front-end Release

Front-end release is also convenient, a command:

npm run build
Copy the code

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

lqclass.com\src\LQClass.Admin\LQClass\ClientApp\dist
Copy the code

The specific directory stored on the server is described in 2.2.3.

2.2.3 Cloud Server Deployment

I bought a Windows Server 2016 cloud Server, which is convenient to deploy.

Deployment steps:

  1. Download nginx and unzip it to a directory.

    Nginx.org/en/download…

  2. The files generated by the backend publishing are stored in the HTML directory of nginx. The directory structure is as follows:

Nginx storage structure

  • Admin: background front-end Web file, using the VUE front-end generated by WTM;

  • API: background backend file,.NET Core 3.1 Web API, is also planned as a foreground backend, using the WTM-generated backend;

API backend files are not required to be stored in the nginx directory, just for easy management, run the backend directly double-click lqclass.exe, use nginx as the reverse proxy.

  • Web: The front end, the directory is just an empty project created by the Vue CLI, which is currently accessible, but doesn’t make much sense

Visit address:

lqclass.com
Copy the code
  • configurationNginx - 1.19.5 \ HTML \ nginx. Conf

Level 1 domain name, level 2 domain name creation and associated cloud server IP, DNS resolution in the cloud server console over there, this is not said.

Nginx: nginx: nginx: nginx: nginx: nginx: nginx: nginx: nginx: nginx: nginx: nginx: nginx: nginx

http { include mime.types; default_type application/octet-stream; sendfile on; keepalive_timeout 65; server { listen 80; // Port 80 server_name lqclass.com; {root HTML /web; // Index index.html index.htm; } } server { listen 80; // Port 80 server_name api.lqclass.com; // location / {proxy_pass http://127.0.0.1:5000; }} server {listen 80; // Nginx reverse proxy back end address}} server {listen 80; // Port 80 server_name admin.lqclass.com; // location / {root HTML /admin; // Directory index index.html index.htm; } {the location/API proxy_pass http://127.0.0.1:5000/api; // The proxy address used by the back-end front-end to access the back-end interface, so that nginx can handle cross-domain problems}}}Copy the code
  • Double-click nginx.exe to access the InternetFun ClassThe front and back end of the front and back end, see the access address2.1.

3. Share next time

At present, the front and back end of the blog system is built by WTM. In order to develop the front end of the blog system later, the webmaster decides to be familiar with the existing API interface of WTM first, and is using WPF to reconstruct the back end client (.NET 5), trying to imitate the style and functions of the back end front-end, such as the login page:

Vue front-end login page

WPF background client window

❝

Time is like water, can only flow to not flow back.

  • Warehouse address: lqclass.com

  • This article Markdown, PDF, PPT: Click download

  • Author and Editor: The Wolf at the end of the desert

  • Date: 2020-12-26