preface

For some reason, in a project with a gateway, a routing and forwarding was configured, but then another vendor logged in to the wrong server and overwrote my Nginx. It was stupid, didn’t make a backup, it was the first time to use nginx, I stepped down the pit, record, to prevent future repeat. And hopefully hydrology can bring a little help to those in need, which is wonderful.

Nginx download nginx download website

1, simple use, you need to pay attention to the directory

In the nginx file directory, you need to care about:

  • HTML to place your published front-end package, such as exampleWeb folder, where the entry file is index.html;
  • Conf is the nginx configuration folder, which contains the nginx.
  • Logs are used to log the nginx startup. After a successful startup, the nginx. Pid file is displayed.
  • Nginx. exe needless to say, double-click to start.

2. Configure nginx.conf

Let’s start with a picture

# is the comment in nginx.conf

worker_processes  1;
Copy the code

Worker_processes, number of worker processes, default 1, maximum recommended number of CPU cores (threads) (1 is sufficient)

events {
    worker_connections  1024;
}
Copy the code

Worker_connections, number of simultaneous external connections allowed per worker process, default

Topic content is roughly divided into the following blocks: HTTP block -> Server block -> Location block; There is only one HTTP, and you can have multiple server blocks, and you can have multiple Location blocks under each server block. I don’t use the HTTP module much at present, so let’s introduce the configuration of server and location.

Each server can listen on one port, as I did herelisten 8082;The IP:8082 URL will go to the server module.
  • I have two location modules in the server, one is only/and one is/API/(don’t forget the slash); Because HERE I put a Vue front-end package directory “PC”, in the Nginx directory HTML, and the back-end service deployed on the machine 5000 port. Then I need to configure at least two locations, one for proxy web resource files and one for cross-domain requests.
  • The first proxy resource file is placed directly in
location / { root html/pc; index index.html index.htm }Copy the code

Root is your web access directory, such as HTML/PC. Nginx starts from the nginx.exe directory by default and accesses relative paths. Index is the entry file name. I’m just going to use the default, which usually doesn’t change, which is index.html index.htm.

  • The second proxy cross-domain request has cross-domain problems because the project uses a before-after separation pattern, and the publishing port of the Web (8082 in this article) is different from the publishing port of the backend service (5000 in this article). Therefore, nginx proxy forwarding is required. In order to distinguish between ordinary resource requests and interface requests, the front end usually sets an API interface prefix. In this project, the name API is directly used. All the urls requested by the backend interface, sent by the browser, are IP :8082/ API /getxxx. Then it goes into this location/API/block and implements the reverse proxy
Proxy_pass http://ip:5000/ # Here we add. The differences will be illustrated later. IP or port with a trailing slash rewrites the URL.Copy the code

The requested URL, IP :8082/ API /getxxx, becomes http://xxx:5000/getxxx; Save, exit, restart Nginx, and a Web project is successfully published. It can be accessed through IP :8082.

Introduce the difference between a proxy address and a slash /
Location/API / {proxy_pass http://127.0.0.1:5000/; }}} So will rewrite the url/API/(you define the location), the original IP: 8082 / API/getxxx - > http://127.0.0.1:5000/getxxx/API/was/replace the second group: Location/API / {proxy_pass http://127.0.0.1:5000; # less than at the end of the first group at the end do not add a slash /} /, not rewrite the original url IP: 8082 / API/getxxx - > the third group: http://127.0.0.1:5000/api/getxxx The location/API / {proxy_pass http://127.0.0.1:5000/BASE/; # more than a path} the original IP: 8082 / API/getxxx - > http://127.0.0.1:5000/BASE/getxxx/BASE /, Is so/API / / BASE/rewrite the fourth group of the location/API / {proxy_pass http://127.0.0.1:5000/BASE; # more than a path, but less a slash} the original IP: 8082 / API/getxxx - > http://127.0.0.1:5000/BASEgetxxx/BASE, only then/API/is/BASE to rewrite the writing especially must pay attention!Copy the code

The same project agent background address

According to the third set of proxy rules above, we can proxy multiple background service addresses for a project. For example, I have a project that calls a method of another service. We can do that

server { listen 8082; server_name localhost; location / { root html/pc; index index.html index.htm; } the location/API/base / {proxy_pass http://127.0.0.1:5000/base/; } the location/API/biz / {proxy_pass http://127.0.0.1:5000/biz/; } # here calls another method of a server, the method should pay attention to distinguish between the path of the API the location/API/sign / {proxy_pass http://xxx.xxx.xxx.xxx:8091/sign/; }}Copy the code

By the way, since the front end is developed by VUE, I set up the development environment’s proxy this way in vue.config.js to match the proxy above

 devServer: {
    // development server port 8000
    port: 8000.proxy: {
      '/api/biz': {
        target: 'http://localhost:5000'.pathRewrite: { '^/api/biz': '/biz' }
        // path override, notice and match characters, if I put/API /biz/, then I need to put /biz/ instead
        // Note the last slash
      },
      '/api/base': {
        target: 'http://localhost:5000'.pathRewrite: { '^/api/base': '/base'}},'/api/sign/': {
        target: 'http://xxx.xxx.xxx.xxx:8091'.pathRewrite: { '^/api/sign': '/sign'}}}}Copy the code

After this article, nginx can also configure the internal and external network isolation environment, the need for external access, access to Intranet data project publishing, and upload and download files and other configurations. Next time (Goo goo goo).

Nginx common commands

I will not list the specific commands, but directly check the official website manual. I’m just writing down the ones I use to remind myself.

Nginx -s reopen nginx

Nginx -s reload # reload the nginx configuration file

Nginx -s quit # Stop the service after processing all requests

Nginx -s stop # Forcibly stop the nginx service

Nginx -t # checks the configuration file for syntax errors and exits

nginx -? ,-h # Open the help message

Nginx -v # displays version information and exits