test/前端/前端部署问题/nginx部署的问题.md

[TOC]

0、安装nginx

# 1.安装依赖
yum install -y gcc-c++
yum install -y pcre pcre-devel
yum install -y zlib zlib-devel
yum install -y openssl openssl-devel
# 或者
rpm -ivh *.rpm  --force --nodeps
# 2.安装nginx
tar -zxvf nginx
cd nginx
./configure
make -j4 && make install

1、nginx部署二级目录

让访问的地址加上dist或者其他前缀

1. 修改nginx.conf文件

   server {
       listen       8081;
       server_name  localhost;
    
       location / {
       	# 不修改此处，确保用户直接输入ip+端口无法访问到系统
           root   html/in;
           index  index.html index.htm;
       }
       location /dist {
        # 添加前缀,但html中存放vue的目录名尽量也要改成相同名字
          alias  html/dist;
          index  index.html index.htm;
          # 删除缓存
          add_header Cache-Control no-store;
          try_files  $uri  $uri/   /index.html;
       }
   }
   

2. 修改vue.config文件

   dev: {
   
   // Paths
   assetsSubDirectory: 'static',
   assetsPublicPath: '../',
   // 代理列表, 是否开启代理通过[./dev.env.js]配置
   proxyTable: devEnv.OPEN_PROXY === false ? {} : {
     '/kubesphereApi' : {
       target: 'http://10.168.59.60:30881',
       changeOrigin: true,
       pathRewrite: {
         '^/kubesphereApi': ''
       }
     },
   },
   

原因是vue打包后的资源文件默认是绝对路径，只有配置在根目录才有效。修改vue打包配置，找到vue.config.js,修改publicPath:'/' 为 ' ./ ' ，修改为相对路径

1. 重新打包，重启nginx,启动成功

2、静态文件无法代理

    server {
        listen       80;
        server_name  localhost;

	    location ~ .*\.(js|css|gif|jpg|jpeg|png|bmp|swf|ttf|woff)$ {
             root html;
        }
    }

3、nginx解决跨域

 server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;


        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
        add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
            
        location / {
            root  html;
            index  index.html index.htm;
        }	        
}

4、nginx配置代理

4.1、 如果不需要前缀

      '/kubesphereApi' : {
        target: 'http://10.170.58.181:30881',
        changeOrigin: true,
        pathRewrite: {
          '^/kubesphereApi': ''
        }
      },

nginx配置如下

location  ^~ /kubesphereApi/ {
	proxy_pass http://10.170.58.181:30881/;
	proxy_set_header Host $host;
	proxy_set_header  X-Real-IP        $remote_addr;
	proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
	proxy_set_header X-NginX-Proxy true;
}
# 注意如果加上二级目录这里加上
location  ^~ /dist/kubesphereApi/ {
	proxy_pass http://10.170.58.181:30881/;
	proxy_set_header Host $host;
	proxy_set_header  X-Real-IP        $remote_addr;
	proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
	proxy_set_header X-NginX-Proxy true;
}

4.2、 如果需要前缀

      '/mkcloud' : {
        target: 'http://10.168.57.12:8085',
        changeOrigin: true,
        pathRewrite: {
          '/mkcloud': '/mkcloud'
        }
      },

nginx配置如下

location /mkcloud {  
	proxy_pass http://10.168.57.12:8085;
	proxy_set_header Host $host;
	proxy_set_header  X-Real-IP        $remote_addr;
	proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
	proxy_set_header X-NginX-Proxy true;
}
# 注意如果加上二级目录这里加上
location ^~ /dist/mkcloud/ {  
	proxy_pass http://10.168.57.12:8085/mkcloud/;
	proxy_set_header Host $host;
	proxy_set_header  X-Real-IP        $remote_addr;
	proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
	proxy_set_header X-NginX-Proxy true;
}