Nginx服务器部署前端项目

1.nginx官网下载压缩包 选择window稳定版本 解压到本地 配置系统环境变量 nginx start 启动服务器 nginx -s reload 修改配置文件后重启服务

2.将vue或react打包dist文件夹放置根目录

3.配置文件配置相关项 文件路径：nginx-1.26.2\nginx-1.26.2\conf\nginx.conf ` #user nobody; worker_processes 1;

#error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info;

#pid logs/nginx.pid;

events { worker_connections 1024; }

http { #用于引入其他的配置文件 include mime.types; default_type application/octet-stream;

#log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
#                  '$status $body_bytes_sent "$http_referer" '
#                  '"$http_user_agent" "$http_x_forwarded_for"';

#access_log  logs/access.log  main;

sendfile        on;
#tcp_nopush     on;

#keepalive_timeout  0;
#keepalive_timeout HTTP 有一个 KeepAlive 模式，它告诉 webserver 在处理完一个请求后保持这个 TCP 连接的打开状态。若接收到来自客户端的其它请求，服务端会利用这个未被关闭的连接，而不需要再建立一个连接。
keepalive_timeout  65;
#开启Gzip压缩功能， 可以使网站的css、js 、xml、html 文件在传输时进行压缩，提高访问速度, 进而优化Nginx性能
#gzip  on;

#每一个http块都可以包含多个server块，而每个server块就相当于一台虚拟主机，它内部可有多台主机联合提供服务，
#一起对外提供在逻辑上关系密切的一组服务
server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;
    #每个server块中可以包含多个location块。在整个Nginx配置文档中起着重要的作用，
    #而且Nginx服务器在许多功能上的灵活性往往在location指令的配置中体现出来
    #location层相当于url中的路由
    location / {
        root   dist;
        index  index.html index.htm;
        # 解决路由404问题
        try_files $uri $uri/ /index.html;
    }
    #解决后端接口跨域问题
    location /api/ {
        #配置后端接口地址
        proxy_pass http://localhost:3000/;
        # proxy_set_header X-Real-IP $remote_addr;
        # proxy_set_header X-Real-Port $remote_port;
        # proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    #error_page  404              /404.html;
    location /404 {
        root   html;
        index  404.html ;
    }
    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}


# another virtual host using mix of IP-, name-, and port-based configuration
#
# server {
#    listen       8000;
#    listen       somename:8080;
#    server_name  somename  alias  another.alias;

#    location / {
#        root   8000;
#        index  index.html index.htm;
#    }
# }


# HTTPS server
#
# server {
#    listen       443 ssl;
#    server_name  localhost;

#    ssl_certificate      cert.pem;
#    ssl_certificate_key  cert.key;

#    ssl_session_cache    shared:SSL:1m;
#    ssl_session_timeout  5m;

#    ssl_ciphers  HIGH:!aNULL:!MD5;
#    ssl_prefer_server_ciphers  on;

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

} `