nginx前端配置

大前端-杂 专栏收录该内容
6 篇文章 0 订阅

有时候为了提测或者更方便前端人员管理内网环境下的前端项目,前端需要自行配置nginx服务器,方便其他人员访问

连接nginx服务器

命令

ssh username@192.168.2.94 

或工具IIS7服务器管理 || xShell

找到路径上传 usr/local/nginx

命令

put path

工具

找到路径 /usr/loaca/nginx直接拖就行

权限不足

权限不足的原因是我们没有root权限,或者是操作文件夹权限,直接输入下面两个命令即可

sudo su

sudo chmod -R 777 /usr/local/nginx

解压到目标路径

将我们打包好上传的前端项目解压

tar zxvf xx.tar.gz -C /xx

修改配置文件

usr/local/nginx/conf/nginx.conf

所有文件都在一个目录下,适合umijs打包出来的项目

# 智能盒子代理
upstream machine {
    server 192.168.101.196:9880;
}

server {
    listen       80;
    listen       [::]:80;
    server_name  machine.whtest.topvdn.com;
    root /opt/machine/build;

    location / {
        location  ~* \.(html|htm){
            expires 0s;
        }
        if ($request_uri ~* \.(js|css)) {
            expires 30d;
        }

        gzip on;
        gzip_types text/css;
        gzip_types application/javascript;
        gzip_types application/x-shockwave-flash;

        if (!-e $request_filename ){
            rewrite ^(.*)$ /index.html last;
        }
    }
	# 例子 api接口转发
    location ~ /v1/machines {
        proxy_pass http://machine;
        proxy_set_header Host $host;

        proxy_redirect off;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_connect_timeout 3600;
        proxy_read_timeout 3600;
        proxy_send_timeout 3600;
		
		add_header 'Access-Control-Allow-Origin' "$http_origin";
		add_header 'Access-Control-Allow-Credentials' 'true';
		add_header 'Access-Control-Allow-Methods' 'GET, POST';
		add_header 'Access-Control-Allow-Headers' 'Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type' always;

		proxy_hide_header 'Access-Control-Allow-Origin';
		proxy_hide_header 'Access-Control-Allow-Credentials';                                                                                                                                proxy_hide_header 'Access-Control-Allow-Methods';                                                                                                                                    proxy_hide_header 'Access-Control-Allow-Headers';
		if ($request_method = 'OPTIONS') {
			add_header 'Access-Control-Allow-Origin' "$http_origin";
			add_header 'Access-Control-Allow-Credentials' 'true';
			add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
			add_header 'Access-Control-Allow-Headers' 'Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type' always;
			return 204;
		}
    }
}

如果是自己配置的或者有其他文件夹的,有时候需要配置一下静态资源路径

server {
	listen       6767;
	server_name  localhost;
	
	# 静态资源映射
	location /css/ {
		root banmak_websit;
	}
	location /images/ {
		root banmak_websit;
	}
	location /js/ {
		root banmak_websit;
	}
	location /static/ {
		root banmak_websit;
	}
	# html文件
	location / {
           root   banmak_websit/html;
           index  index.html index.htm;
       }
	error_page   500 502 503 504  /50x.html;
       location = /50x.html {
           root   html;
       }
}

重启

检查配置文件
/usr/local/nginx/sbin/nginx -t

或

cd /usr/local/nginx/sbin

./nginx -t

重启服务
/usr/local/nginx/sbin/nginx -s reload

或

cd /usr/local/nginx/sbin
./nginx -s reload
  • 1
    点赞
  • 1
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值