Teach beginners step by step how to set up Nginx server environment and deploy front-end projects under Windows system

1. Get to know Nginx

Will be added here later…

2. Nginx environment setup

1. Download and install Nginx

On the nginx official websitehttp://nginx.org/en/download.html
Download the stable version to the directory you want.

Then decompress the file (no exe installation process), and enter the directory after decompression as follows:

(Note: It is best not to have Chinese characters in the installation directory, otherwise It is easy to report an error when starting)

2. Start nginx server

There are two startup methods:
(1) Directly enter the nginx installation directory and double-click nginx.exe to run. At this time, the command line window flashes by and the startup is successful. . (It is not a startup failure, because it is not like the permanent state of the window after the tomcat server is started)
(2) Open the cmd window, cd to the nginx installation directory, and run the following command. (Successful startup is the same as the first method)

输入
nginx.exe
或者输入（建议使用第二个）
start nginx

After successful startup, open the browser and visit http://localhost:80, or http://127.0.0.1, or http://localhost. (Note that the port number is not 8080. Its default port number is 80, which is the same as the default port number of the browser http protocol, so you do not need to enter the port number.) Successful startup access is as shown below:

3. Shut down the nginx server

The command to shut down the nginx server is as follows. First enter the root directory of the nginx installation and then enter the command

//第一种
nginx -s stop   (快速关闭服务器，可能导致修改文件没保存的情况)
//第二种
nginx -s quit   (完整有序的关闭服务器)
//第三种
taskkill /f /t /im nginx.exe   （通过taskkill杀进程，如下图）

4.nginx server configuration file nginx.conf

1. The configuration file of nginx is nginx.conf in the conf directory.
2. The default port of nginx is 80. If port 80 is occupied, it can be changed to an unoccupied port under listen.
3. The default port number of nginx is the same as the default port number of the browser http protocol, which is 80, so you can access the deployed project without entering the port number.
4. When modifying the nginx configuration file nginx.conf, you do not need to shut down nginx and restart nginx. You only need to execute the command nginx -s reload for the changes to take effect.
5. The root in the nginx.conf file is followed by the path to the deployment project, which defaults to the html folder (the demo that comes with the root directory), as shown below
   

5.nginx common commands

To run any nginx command, you must first enter the nginx installation directory, otherwise it will be invalid!

// 常用得nginx命令如下
nginx -s reopen #重启Nginx
nginx -s reload #重新加载Nginx配置文件，然后以优雅的方式重启Nginx
nginx -s stop #强制停止Nginx服务
nginx -s quit #优雅地停止Nginx服务（即处理完所有请求后再停止服务）
nginx -t #检测配置文件是否有语法错误，然后退出
nginx -?,-h #打开帮助信息
nginx -v #显示版本信息并退出
nginx -V #显示版本和配置选项信息，然后退出
nginx -t #检测配置文件是否有语法错误，然后退出
nginx -T #检测配置文件是否有语法错误，转储并退出
nginx -q #在检测配置文件期间屏蔽非错误信息
nginx -p prefix #设置前缀路径(默认是:/usr/share/nginx/)
nginx -c filename #设置配置文件(默认是:/etc/nginx/nginx.conf)
nginx -g directives #设置配置文件外的全局指令
killall nginx #杀死所有nginx进程

3. Deploy the front-end project to the Nginx server

(1) Package and build your front-end project through npm run build (the dist folder is generated after packaging is completed, this is the resource we want to deploy to the nginx server)

Here Take my project as an example, copy its address
F:\qianduanxuexi\myvuedemo\dist
(2) Modify the nginx.conf configuration file (refer to the above for this step) Chapter 2, 4.)
The specific method is to find the root line under location and change its default html to the front-end project path copied above to be deployed.

Pay attention to the following two points:
First, you can also choose to copy your front-end project to the nginx root directory and modify it to its path ( The default configuration of nginx.conf is like this, so there is an html folder in its root directory, which is the project to be deployed. The default configuration of the tomcat server is also like this) but you don’t need to copy the project, just add it in the nginx.conf file Just change it to your project path.
Second, when modifying the nginx.conf file, remember to find the line that does not have a "#" number and modify it, otherwise it will be invalid, because "#" means it has been commented out The code is not valid.
(3) Start the nginx server
(4) Enter http://127.0.0.1/ or http://localhost/ in the browser to access you Applications.

Summarize

In general, it is relatively simple to install and deploy Nginx server under Windows system. The main process is:
Download=> Unzip=>Start=> Access to start Situation=> Deployment file (modify configuration file)=> Access effect=> OK!

I will continue to update how to deploy Nginx server in Linux system or Docker environment next time when I have time.