Vue project configuration to Nginx (server)

One, the installation of Nginx

1. Installation command

sudo apt-get update				# 先更新一下资源``
sudo apt-get install nginx		# 安装nginx

2. Check the version of Nginx

ubuntu@VM-0-11-ubuntu:~$ nginx -v
nginx version: nginx/1.14.0 (Ubuntu)	# 说明Nginx安装成功
ubuntu@VM-0-11-ubuntu:~$ 

Two, Nginx configuration

If you don't know the Nginx configuration directory, look at it 1、.

1. View directories related to Nginx

whereis nginx 				# 显示所有匹配nginx的目录路径

nginx: 
/usr/sbin/nginx 			# nginx的程序目录（类似安装目录吧）
/usr/lib/nginx 				# 有lib，就知道是nginx的库
/etc/nginx 					# 配置文件目录
/usr/share/nginx 
/usr/share/man/man8/nginx.8.gz	# 应该是nginx的使用（man）手册目录

2. Enter the Nginx configuration directory

ubuntu@VM-0-11-ubuntu:~$ cd /etc/nginx/
ubuntu@VM-0-11-ubuntu:/etc/nginx$ ls
conf.d          koi-utf     modules-available  nginx.conf_backup  sites-available  uwsgi_params
fastcgi.conf    koi-win     modules-enabled    proxy_params       sites-enabled    vhosts.d
fastcgi_params  mime.types  nginx.conf         scgi_params        snippets         win-utf
ubuntu@VM-0-11-ubuntu:/etc/nginx$

We can see the nginx.conffile (the Vue to Nginx configuration file)

3. To ensure safety, nginx.confback up the files first

cp nginx.conf nginx.conf_backup

4. Start to modify the configuration file

sudo vi nginx.conf		# 内容如下

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
    
    
        worker_connections 768;
}

http {
    
    
        sendfile on;
        tcp_nopush on;
        tcp_nodelay on;
        keepalive_timeout 65;
        types_hash_max_size 2048;

        include /etc/nginx/mime.types;
        default_type application/octet-stream;

        ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE
        ssl_prefer_server_ciphers on;
        
        access_log /var/log/nginx/access.log;
        error_log /var/log/nginx/error.log;

        gzip on;

        include /etc/nginx/conf.d/*.conf;
        include /etc/nginx/sites-enabled/*;

        server{
    
    
                listen       80;               # 你的服务的端口号
                server_name  localhost;
                root /var/www/dist;			   # 指定项目路径

                location / {
    
    
                        proxy_pass http://121.4.120.27:8081;
                }
                
                location @router {
    
    
                    rewrite ^.*$ /index.html break;                   # break参数不报错不改
                }

                error_page   500 502 503 504  /50x.html;
        }
}

4.1, matters needing attention

As shown in the figure above, the initial nginx.conffile generally does not have serverthis section, and needs to be configured by yourself (if there is, it would be better to type a lot of code). This is the place we need to modify when configuring the Nginx server for the first time server. Next, explain in detail how to configure server.

5. Explanation of the function of each parameter

listen parameter

listen       80; 

This is the port number of your service. Needless to say! What we often use is to 8080，8081，8088wait for the port.

server_name parameter

server_name  localhost;

Let’s write so much, I’ve been lazy recently [cover my face]...