Table of contents

1. Download nginx

Download address: https://nginx.org/en/download.html

Two, start

Two methods:

1) Double-click " nginx.exe " in this directory to start the nginx server;

2) The command line (cmd) enters the folder and executes the start nginx command, which will also directly start the nginx server.

Note: remember to turn off the firewall

3. Verification

Open the browser, enter the address: http://localhost, visit the page, and the following page appears, indicating that the visit is successful.

Four, windows operation guide

Start the service: start nginx

Exit service: nginx -s quit

Forcibly shut down the service: nginx -s stop

Reload service: nginx -s reload (reload service configuration file, similar to restart, service will not stop)

Verify configuration file: nginx -t

Use the configuration file: nginx -c "configuration file path"

Use help: nginx -h

5. Catalog introduction

conf: The configuration file configures the virtual host file here

html: nginx default web root path location

logs: log files

sbin: The binary program start/stop/reload service command is here

6. Deployment

Enter the conf file under the nginx folder, open the nginx.conf file, modify the port and configure the subdirectory

Nginx under Windows can be opened by text or a code editor such as vscode

1. Use the command npm run build:prod to package the project.

2. The name of the packaged file is dist, copy the entire dist folder to the nginx folder (same level as the html folder).

3. Go to the conf folder to configure and configure the nginx.conf file to modify the relevant configuration

The root in the location / {} in the file is the directory where the nginx is decompressed, which means that the index.html/index.htm web page in the HTML under the root (that is, the root directory) is opened by default.

location / {                  # 表示 以'/'开头的请求怎样处理
            root   html;      #指定root文件夹为 上面提到的html文件夹
            index  index.html index.htm;   #返回index.html
        }

Change this to html under dist

location / {
            root   dist;
            index  index.html index.htm;
        }

After the modification is complete, you must restart nginx, and it will take effect after restarting.

7. Problems in deployment

1. Cross domain

When I clicked to log in, I found that the request was sent successfully, but there was no return value, and a network error was reported. After checking, I found that the console reported cross-domain. It turned out that the front end used a reverse proxy vue.config.js

devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true,
    },
    // 反向代理
    proxy: {
       "/api": {
         target: "http://192.168.4.95:8092/", //本地地址
         changeOrigin: true,
         pathRewrite: {
           "^/api": "/api",
         },
       },
    },
  },

So if you want to modify the configuration in nginx, you should modify it in nginx.conf

server {
        listen       80; #监听端口
        server_name  localhost; #可以改成自己的域名或者ip
 
        #charset koi8-r;
 
        #access_log  logs/host.access.log  main;
 
        location / {
            root   dist; 
            index  index.html index.htm; 
        }

        location / {       #想要访问的baseurl
            proxy_pass http://192.168.4.95:8092;       #反向代理的服务器真正的ip
            add_header 'Access-Control-Allow-Origin' '*';      #允许来自所有的访问地址
            add_header 'Access-Control-Allow-Credentials' 'true';   #允许携带Cookie
            add_header 'Access-Control-Allow-Methods' *;  #允许所有的请求
            add_header 'Access-Control-Allow-Headers' 'Content-Type,*';#允许所有的header
        }
}

Let’s talk about it here, it seems that nginx cross-domain and back-end cannot be set together, so you should pay attention

The front end uses nginx to deploy the project to the server