nginx安装和配置以及启动,一台nginx配置多个前端工程一个hash模式一个history模式

  1. nginx安装
下载nginx安装包,执行以下语句(如果报错则按照报错百度一般都能解决)
./configure --prefix=/opt/nginx  //检测指定路径
make  //编译
make & install  //安装
  1. nginx配置
#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  65;

    #gzip  on;
	#负载均衡
	upstream xxxserver {
        server 172.18.120.134:9291;
        server 172.18.120.135:9291;
    }

    server {
        listen       8080;
        server_name  xxx.xxx.com.cn;

        location / {
            root  /opt/apps/web;
            index  index.html index.htm;
        }
		
		location /route/dispatch/api {
			proxy_pass http://xxxserver;
			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  X-Forwarded-For   $proxy_add_x_forwarded_for;
		}

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

}

}

  1. 启动命令
在sbin目录下执行
#启动
nginx
#停止
nginx -s stop
#重启
nginx -s reload
upstream wss {
     server 127.0.0.1:8888;
}


server {
    listen 80;
 
    server_name  xxx.openpoker.cn;

    access_log /var/log/nginx/miniApdev.access.log lf365you;
    #vue 前端页面地址
    location /xxlWeb {
        alias  /data/xxlWeb;
        index index.html index.htm;
		try_files $uri $uri/ /xxlWeb/index.html;
    }
	#vue 后端接口代理
	location  ^~/xxlWeb/api/ { 
		proxy_pass http://xxx.gamepeaker.com/;
	}	

    location ~ .*\.(gif|txt|jpg|jpeg|bmp|swf|json)$
    {
        root /data/miniApp-support-dev/conf/static;
        expires      30d;
    }

}





server {
    listen 80;
        listen 443 ssl;
    ssl_certificate /etc/nginx/ssl/__gamepeaker_com.crt;
    ssl_certificate_key /etc/nginx/ssl/gamepeaker.com.key;
    server_name  xxx.gamepeaker.com;

    access_log /var/log/nginx/miniApp-wss.access.log lf365you;

    #后端 niginx代理
    location /xxlWeb {
         proxy_pass http://127.0.0.1:8333;
         proxy_set_header Host $host:$server_port;
         proxy_http_version 1.1;
         proxy_set_header Upgrade $http_upgrade;
         proxy_set_header Connection "upgrade";
         proxy_ignore_client_abort on;
    }




    location ~ .*\.(gif|txt|jpg|jpeg|png|bmp|swf|json)$
    {
        root /data/miniApp-support-dev/conf/static;
        expires      30d;
    }

}

6.一台nginx配置多个前端工程一个hash模式一个history模式

server {
    server_name xxx.xx1.cn;
    listen 80;
    charset utf-8;

    client_max_body_size 75M;

    location / {
        proxy_pass https://eee.eee.com;

    }

    location /partner/dsr {
        proxy_pass https://xxx.xx2.cn;

    }

    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml text/javascript;
}

server {
    server_name  xxx.xx2.cn ;
    listen 80;
    charset utf-8;

    client_max_body_size 75M;

    #dsar前端
    location  ~ ^/(assets|public|partner|tchk) {
            proxy_pass  http://127.0.0.1:8333;
        }

    location  /api/dsar-api/ {
        proxy_set_header Host $host;  # 将 Host 头转发
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  # 转发客户端的 IP
        proxy_set_header X-Forwarded-Proto $scheme;  # 转发协议
        proxy_set_header X-Forwarded-Host $host;  # 转发原始 Host
        proxy_pass http://127.0.0.1:8999;
    }

    location  ^~/partner/dsr/api/dsar-api/ {
        proxy_set_header Host $host;  # 将 Host 头转发
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  # 转发客户端的 IP
        proxy_set_header X-Forwarded-Proto $scheme;  # 转发协议
        proxy_set_header X-Forwarded-Host $host;  # 转发原始 Host
        proxy_pass http://127.0.0.1:8999/api/dsar-api/;
    }


    location /api/ {
        proxy_set_header X-Forwarded-Host $host;
        proxy_pass http://127.0.0.1:8999;
    }

    location /export-pdf/ {
        proxy_pass http://127.0.0.1:8999;
    }

    location /prerelease/ {
        proxy_pass http://127.0.0.1:8999;
    }


    location / {
       proxy_pass http://127.0.0.1:8999;
    }
    gzip_static on;  #开启gzip静态压缩 需要 .gz文件
    gzip_http_version  1.0;
    gzip_proxied expired no-cache no-store private auth;
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml text/javascript;
}

server {
    server_name 127.0.0.1;
    listen      8333;
    charset     utf-8;

    # max upload size
    client_max_body_size 75M;


    index   index.html;

     #dsar前端
    location / {
            add_header 'Access-Control-Allow-Origin' '*';
            alias /data/app/deploy/project/dsar-frontend/dist/;
            index index.html;
            try_files $uri $uri/ /index.html;
        }

    gzip_static on;
    gzip_http_version  1.0;
    gzip_proxied expired no-cache no-store private auth;
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml text/javascript;
}
### 配置Nginx以支持Vue.js应用中的两种路由模式 #### 支持History Mode的Nginx配置 为了使Vue.js应用程序能够正确处理HTML5 History模式下的导航,而不会因为刷新页面而导致404错误,需要调整Nginx配置如下: ```nginx server { listen 80; server_name localhost; location / { try_files $uri $uri/ /index.html; access_log /var/log/nginx/access.log; error_log /var/log/nginx/error.log; } } ``` 此设置确保任何未找到的实际文件或目录请求都会被重定向到`index.html`[^1]。 对于部署在子路径上的项目,可以进一步修改location部分为特定前缀匹配,并同样尝试加载`index.html`作为最后手段。这有助于保持单页应用(SPA)内部链接的有效性以及SEO友好型URL结构。 #### 支持Hash Mode的Nginx配置 当采用哈希模式时,默认情况下不需要特别更改Nginx配置,因为这种模式下浏览器会自动管理URL变化而不向服务器发送新请求。不过如果希望优化性能或者解决某些特殊场景下的问题,则可以根据实际情况考虑增加缓存策略或其他优化措施: ```nginx server { listen 80; server_name localhost; location ~* \.(?:css|js)$ { expires max; add_header Cache-Control "public"; access_log off; } location / { root html; index index.html index.htm; access_log /var/log/nginx/access.log; error_log /var/log/nginx/error.log; } } ``` 这里定义了一个针对静态资源(css/js)的高效缓存规则,同时保留了基本的日志记录功能。 需要注意的是,在实际生产环境中应当根据具体需求定制化这些配置项,比如调整日志级别、启用Gzip压缩传输等高级特性来提升用户体验服务质量。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值