Comment utiliser le proxy nginx pour accéder aux ressources statiques

1. Objectif :

Afin de demander des ressources statiques (css, images, etc.) via nginx et de prévisualiser la page via le proxy nginx.

2. Effet de mise en œuvre :

Entrez l'adresse du proxy nginx via le navigateur pour ouvrir la page pour accéder au fichier html local. Vous pouvez également accéder à l'interface d'accès au routage du proxy pour obtenir la fonction d'aperçu de la page. dans l'environnement de développement Windows local Configuration sous

3. Configuration spécifique

1 nginx configure l'agent d'ingénierie statique local

Recherchez le fichier de configuration nginx nginx.conf et configurez l'agent nginx

server{
listen       80;

#前端门户工程
location / {
    alias   D:/workspace/sc-multipl-static-web-project/;
    index  index.html;
}

Instructions :

D:/workspace. /sc-multipl-static-web -project/ est le chemin de votre fichier de projet frontal

Enregistrez le fichier de configuration et redémarrez nginx, entrez localhost:80 dans le navigateur pour vérifier

2. Win10 configure le nom de domaine local pour obtenir. accès au nom de domaine

L'accès au nom de domaine se fait en fait via l'adresse IP correspondante, puis Pour accéder au service via IP, si nous n'ouvrons pas de nom de domaine Internet, nous pouvons simuler l'accès au nom de domaine en configurant le mappage de nom de domaine local (uniquement valide sur cette machine)

Ouvrez C:WindowsSystem32driversetc, trouvez le fichier hosts, sinon ajoutez-en un vous-même pour la gestion Ouvrez l'éditeur en tant que membre, entrez

127.0.0.1 www.chen123.com

puis ouvrez le nginx fichier de configuration

server{
    listen       80;
    server_name  www.chen123.com;
    ssi on;
    ssi_silent_errors on;
    #前端门户工程
    location / {
        alias   D:/workspace/sc-multipl-static-web-project/;
        index  index.html;
    }
    
   }

Enregistrez le fichier de configuration et redémarrez nginx, entrez localhost:chen123 dans le navigateur pour vérifier

3.nginx aperçu de la page de configuration Routage

Tout d'abord, vous devez implémenter une interface d'aperçu de page, le format de retour est Type de chaîne, le contenu est en fait le contenu texte du HTML

Puis ouvrez le fichier de configuration nginx

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;
    #cms页面预览路由
    upstream cms_server_pool {
        server 127.0.0.1:31001 weight=10;
    }

    server{
    listen       80;
    server_name  www.xuecheng.com;
    ssi on;
    ssi_silent_errors on;
    #前端门户工程
    location / {
        alias   D:/workspace/sc-multipl-static-web-project/;
        index  index.html;
    }
    #页面预览
    location /cms/preview/ {
        proxy_pass http://cms_server_pool/cms/preview/;
    }
    
   }
}

http://cms_server_pool/cms/preview/ C'est ce que vous devez implémenter l'interface d'aperçu de la page, accédez à la vraie adresse en configurant le routage ,

    upstream cms_server_pool {
        server 127.0.0.1:31001 weight=10;
        #如果有多个服务器,可以写在下面,例如
        #server 127.0.0.1:31002 weight=10;
    }

Enregistrez le fichier de configuration et redémarrez nginx, entrez http://cms_server_pool/cms/preview dans le navigateur pour vérifier

Ma configuration nginx locale est la suivante

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;

    #gzip  on;
    #cms页面预览路由
    upstream cms_server_pool {
        server 127.0.0.1:31001 weight=10;
    }

    server{
    listen       80;
    server_name  www.xuecheng.com;
    ssi on;
    ssi_silent_errors on;
    #前端门户工程
    location / {
        alias   D:/workspace/sc-multipl-static-web-project/;
        index  index.html;
    }
    #页面预览
    location /cms/preview/ {
        proxy_pass http://cms_server_pool/cms/preview/;
    }
   }
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!