使用Nginx部署前端静态资源

小编在这里主要介绍：如何将一个前端项目部署到Nginx服务器，实现前端资源部署

一、项目的打包

对于vue项目可以使用npm run build实现项目的打包

注意：打包完成会生成一个dist目录

二、安装Nginx服务器

安装完成后目录

运行Nginx服务器直接点击nginx.exe即可

三、配置Nginx服务器

配置Nginx.conf文件 \hmall-nginx\conf\nginx.conf

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/json;

    sendfile        on;
    
    keepalive_timeout  65;

     server {
        listen       80;
        server_name  localhost;
        # 指定前端项目所在的位置
        location / {
            root html;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

    server {
        listen       18088;
        server_name  localhost;
        # 指定前端项目所在的位置
        location / {
            root html/hmall-test;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
        location /api {
            rewrite /api/(.*)  /$1 break;
            proxy_pass http://localhost:10086;
        }
    }

    server {
        listen       18080;
        server_name  localhost;
        # 指定前端项目所在的位置
        location / {
            root html/hmall-portal;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
        location /api {
            rewrite /api/(.*)  /$1 break;
            proxy_pass http://localhost:10086;
        }
    }
    server {
        listen       18081;
        server_name  localhost;
        # 指定前端项目所在的位置
        location / {
            root html/hmall-admin;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
        location /api {
            rewrite /api/(.*)  /$1 break;
            proxy_pass http://localhost:10086;
        }
    }
    # upstream backend {
    #     server 127.0.0.1:8081 max_fails=5 fail_timeout=10s weight=1;
    #     server 127.0.0.1:8082 max_fails=5 fail_timeout=10s weight=1;
    # }  
}

访问直接：http://127.0.0.1:18088/about即可访问