Nginx stellt Front-End- und Back-End-Trennungsdienste und Konfigurationsanweisungen bereit

不言
Freigeben: 2023-04-02 20:34:01
Original
6817 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die Front-End- und Back-End-Trennungsdienste und Konfigurationsanweisungen für die Nginx-Bereitstellung vor. Jetzt kann ich ihn mit Ihnen teilen.

Nginx installieren

Verwenden Sie den Befehl yum, um Nginx auf dem CentOS 7-Server zu installieren:

sudo yum install -y nginx

Nginx konfigurieren

Dateispeicherort

Im Allgemeinen befindet sich die Nginx-Konfigurationsdatei im Verzeichnis etc. Sie können auch den Befehl rpm -ql nginx ausführen, um den Pfad anzuzeigen.

Nachdem Sie in das Verzeichnis /etc/nginx gewechselt haben, können Sie die Konfigurationsdatei nginx.conf sehen.
Führen Sie vi nginx.conf aus, um die Konfigurationsdatei zu öffnen.

VIM-allgemeine Befehle

命令 作用
i 光标前面开始输入内容
a 光标后面开始输入内容
Esc 退出输入模式
u 在非输入模式下撤销上一步操作
:w 在非输入模式下,保存
:wq 在非输入模式下,保存并关闭
:q 关闭(已保存)
:q! 不保存,强制关闭

Nginx-Konfigurationsanweisungen

# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user nginx;
worker_processes auto; #启动进程
error_log /var/log/nginx/error.log; #全局错误日志
pid /run/nginx.pid; #PID文件

# Load dynamic modules. See /usr/share/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024; #单个后台worker process进程的最大并发链接数 
}

http {
    gzip on; #开启gzip压缩
    gzip_min_length 1k; #设置对数据启用压缩的最少字节数
    gzip_buffers    4 16k;
    gzip_http_version 1.0;
    gzip_comp_level 6; #设置数据的压缩等级,等级为1-9,压缩比从小到大
    gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml; #设置需要压缩的数据格式
    gzip_vary on;

    #虚拟主机配置
    server {
        listen       80 default_server; #侦听80端口,并为默认服务,default_server只能有一个
        server_name  www.binlive.cn binlive.cn; #服务域名,可以有多个,用空格隔开
        
        location /{
            proxy_pass http://127.0.0.1:3000; #代理本机3000端口服务
            proxy_set_header  Host              $http_host;   # required for docker client's sake
            proxy_set_header  X-Real-IP         $remote_addr; # 获取用户的真实IP地址
            proxy_set_header  X-Forwarded-For   $proxy_add_x_forwarded_for;
            proxy_set_header  X-Forwarded-Proto $scheme;
            proxy_read_timeout                  900;
        }
        # 图片缓存时间设置
        location ~ .*.(gif|jpg|jpeg|png|bmp|swf)$ {
            expires 10d;
        }
        # JS和CSS缓存时间设置
        location ~ .*.(js|css)?$ {
            expires 1h;
        }
        # 404定义错误提示页面
        error_page 404             /404.html;
        # 500定义错误提示页面
        error_page   500 502 503 504 /50x.html;
        
    }
    server {
        listen       80;
        server_name  admin.binlive.cn;
        location /{
            proxy_pass http://127.0.0.1:3080;
            proxy_set_header  Host              $http_host;   # required for docker client's sake
            proxy_set_header  X-Real-IP         $remote_addr; # pass on real client's IP
            proxy_set_header  X-Forwarded-For   $proxy_add_x_forwarded_for;
            proxy_set_header  X-Forwarded-Proto $scheme;
            proxy_read_timeout                  900;
        }
        
    } 
}
Nach dem Login kopieren

Stellen Sie Front-End- und Back-End-Trennungsprojekte bereit

In Front-End- und Back-End-getrennten Projekten wird der Front-End-Code in reine statische Dateien gepackt. Der Zweck der Verwendung von Nginx besteht darin, statischen Dateien die Ausführung von Diensten zu ermöglichen. Da die Back-End-Schnittstelle ebenfalls getrennt ist, können direkte Anforderungen zu domänenübergreifenden Problemen führen. In diesem Fall muss Nginx die Proxy-Back-End-Schnittstelle weiterleiten.

Die Nginx-Konfiguration lautet wie folgt

# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user nginx;
worker_processes auto; #启动进程
error_log /var/log/nginx/error.log; #全局错误日志
pid /run/nginx.pid; #PID文件

# Load dynamic modules. See /usr/share/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024; #单个后台worker process进程的最大并发链接数 
}

http {
    gzip on; #开启gzip压缩
    gzip_min_length 1k; #设置对数据启用压缩的最少字节数
    gzip_buffers    4 16k;
    gzip_http_version 1.0;
    gzip_comp_level 6; #设置数据的压缩等级,等级为1-9,压缩比从小到大
    gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml; #设置需要压缩的数据格式
    gzip_vary on;

    #虚拟主机配置
    server {
        listen       80;
        server_name  mark.binlive.cn;
        root /home/spa-project/dist; #定义服务器的默认网站根目录位置
        index index.html; #定义index页面
        error_page    404         /index.html; #将404错误页面重定向到index.html可以解决history模式访问不到页面问题
        location ^~ /api/{
            proxy_pass http://127.0.0.1:7000;
            proxy_send_timeout 1800;
            proxy_read_timeout 1800;
            proxy_connect_timeout 1800;
            client_max_body_size 2048m;
            proxy_http_version 1.1;  
            proxy_set_header Upgrade $http_upgrade;  
            proxy_set_header Connection "Upgrade"; 
            proxy_set_header  Host              $http_host;   # required for docker client's sake
            proxy_set_header  X-Real-IP         $remote_addr; # pass on real client's IP
            proxy_set_header  X-Forwarded-For   $proxy_add_x_forwarded_for;
            proxy_set_header  X-Forwarded-Proto $scheme;
        }
        location ^~ /auth/{
            proxy_pass http://127.0.0.1:7000;
            proxy_send_timeout 1800;
            proxy_read_timeout 1800;
            proxy_connect_timeout 1800;
            client_max_body_size 2048m;
            proxy_http_version 1.1;  
            proxy_set_header Upgrade $http_upgrade;  
            proxy_set_header Connection "Upgrade"; 
            proxy_set_header  Host              $http_host;   # required for docker client's sake
            proxy_set_header  X-Real-IP         $remote_addr; # pass on real client's IP
            proxy_set_header  X-Forwarded-For   $proxy_add_x_forwarded_for;
            proxy_set_header  X-Forwarded-Proto $scheme;
        }
    }    
}
Nach dem Login kopieren
  • Legen Sie die gepackte dist-Datei des Front-End-Codes in das angegebene Dienstverzeichnis

  • Weisen Sie das Dienstverzeichnis dem spa-project/dist-Verzeichnis zu, um den statischen Dienst als Proxy zu verwenden.

  • Die gzip-Komprimierung ist in der Konfiguration aktiviert, was die Kosten erheblich reduzieren kann Dateigröße

  • Leiten Sie die 404-Fehlerseite auf index.html um, wodurch das Problem von 404 im Front-End-Verlaufsroutingmodus aufgrund der Unfähigkeit, beim Aktualisieren auf den Dienst zuzugreifen, gelöst werden kann Seite

  • location ist die Proxy-Schnittstelle, die den Domänennamen der Anforderungsschnittstelle oder die IP des Proxy-Backends weiterleiten kann, um das schnittstellenübergreifende Problem zu lösen

Starten Sie den Nginx-Dienst

Wenn die Konfiguration abgeschlossen ist. Dann können Sie Nginx starten
und ausführen nginx -t, um zu testen, ob die Nginx-Konfiguration korrekt ist.
Führen Sie nginx aus, um den Nginx-Dienst zu starten, wenn die Konfigurationsdatei korrekt ist.
Nachdem Sie die Nginx-Konfigurationsdatei geändert haben, führen Sie nginx -s reload aus, um den reibungslosen Übergang abzuschließen und die Konfiguration neu zu laden

Allgemeine Nginx-Befehle

命令 描述
nginx -h 查看Nginx的帮助
nginx -v 查看Nginx的版本
nginx -t 测试Nginx的配置
nginx -T 测试Nginx的配置,并打印配置信息
nginx 启动nginx
nginx -s reload 重新加载配置文件,平滑启动nginx
nginx -s stop 停止nginx的命令

Das Obige ist Ich hoffe, dass der gesamte Inhalt dieses Artikels für das Lernen aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

Nginx legt ungebundene Domänennamen fest, um den Zugriff zu verhindern

Nginx implementiert Reverse-Proxy und Lastausgleich

Nginx stellt statische Seiten bereit

Das obige ist der detaillierte Inhalt vonNginx stellt Front-End- und Back-End-Trennungsdienste und Konfigurationsanweisungen bereit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage