Windows 和 Mac 平台下安装 Nginx 部署前端项目教程

Ares_Yin

已于 2022-06-06 15:27:12 修改

阅读量1.8k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：软件插件安装文章标签： nginx 前端 vue.js

于 2022-06-06 15:23:47 首次发布

本文链接：https://blog.csdn.net/qq_16517483/article/details/125147463

Windows部署Nginx

1、安装Nginx

下载安装包、解压即可完成安装

2、部署前端项目

以上步骤可以不做，资料中已提供部署完成的Nginx压缩包，直接解压双击nginx.exe 即可

2.1、前端打包

（1）进入前端的源代码 package.json 对应的目录下执行命令

运营商后台：restkeeper-vue-operator

npm run build:prod

商家后台：restkeeper-vue-shop

npm run build:prod

点餐平台：restkeeper-vue-uniapp

npm run build

以上命令分别进入对应的文件夹下执行，会得到 dist 文件夹（如果有可以提前删除）

资料中已提供

2.2、部署资源

（1）在解压后的Nginx文件夹下创建文件夹：restkeeper 本机：D:/nginx-1.18.0/restkeeper
（2）将刚刚打包的资源存到restkeeper文件夹下

2.3、配置nginx.conf

#运行用户
#user root;
#启动进程,通常设置成和cpu的数量相等(但是又时候也不光与cpu有关)
worker_processes  1;
#系统在单个进程中打开文件的个数
worker_rlimit_nofile 30000;
#全局错误日志及PID文件
pid        logs/nginx.pid;
#工作模式及连接数上限
events {
   
   
    use   epoll;             #epoll是多路复用IO(I/O Multiplexing)中的一种方式,但是仅用于linux2.6以上内核,可以大大提高nginx的性能
    worker_connections  5000;#单个后台worker process进程的最大并发链接数
    #multi_accept on;
}
#设定http服务器，利用它的反向代理功能提供负载均衡支持
http {
   
   
    include    mime.types;
    #反向代理配置，可以打开proxy.conf看看
    include    proxy.conf;
    #设定mime类型,类型由mime.type文件定义
    #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"';
    #sendfile 指令指定 nginx 是否调用 sendfile 函数（zero copy 方式）来输出文件，对于普通应用，
    #必须设为 on,如果用来进行下载等应用磁盘IO重负载应用，可设置为 off，以平衡磁盘与网络I/O处理速度，降低系统的uptime.
    sendfile        on;
    #连接超时时间
    keepalive_timeout  120;
    tcp_nodelay         on;
    tcp_nopush          on;
    #开启gzip压缩
    gzip             on;
    gzip_min_length  1000;
    gzip_proxied     expired no-cache no-store private auth;
    gzip_types       text/plain application/x-javascript text/css application/xml;
    gzip_disable     "MSIE [1-6]\.";
    gzip_comp_level  3;
    gzip_vary on;
    #站点:运营平台
    upstream operator{
   
   
        server 127.0.0.1:8011 weight=2 max_fails=2 fail_timeout=30s;
    }
    #站点:商家平台
    upstream shop{
   
   
        server 127.0.0.1:8017 weight=2 max_fails=2 fail_timeout=30s;
    }
    #站点:点餐平台
    upstream dc{
   
   
        server 127.0.0.1:8017 weight=2 max_fails=2 fail_timeout=30s;
    }
    server {
   
   
        #侦听80端口
        listen  80;
        #定义使用www.xx.com访问
        server_name  www.eehp.cn;
        #访问日志
        access_log  logs/operator_project.log  main;
        #错误日志
        error_log   logs/operator_error_project.log;
        #定义错误提示页面
        error_page  500 502 503 504 /50x.html;
        location = /50x.html {
   
   
            internal;
        }
        location / {
   
   
          root restkeeper/operator;
          try_files $uri $uri/ /index.html;
          index index.html;
        }
        location /security {
   
   
            root /;
            proxy_pass http://operator;
        }
        location /basic {
   
   
            root /;
            proxy_pass http://operator;
        }
        location /operator {
   
   
            root /;
                proxy_pass http://operator;
        }
        location /doc {
   
   
            root /;
            proxy_pass http://operator;
        }
        location /webjars {
   
   
            root /;
            proxy_pass http://operator;
        }
        location /swagger-resources {
   
   
            root /;
            proxy_pass http://operator;
        }
        #设定查看Nginx状态的地址
        location /NginxStatus {
   
   
            stub_status            on;
            access_log             on;
            auth_basic             "NginxStatus";
            auth_basic_user_file   conf/htpasswd;
        }
    }
    server {
   
   
        #侦听