>[TOC]

# 0、安装nginx

```shell
# 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 --with-http_ssl_module
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:'/'   为    ' ./  ' ，修改为相对路径

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

# 2、静态文件无法代理


```shell
    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、 如果不需要前缀

```vue
      '/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、 如果需要前缀

```vue
      '/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;
}
```

# 5、nginx部署SSL，配置HTTPS访问

[服务器生成ssl证书](https://blog.csdn.net/m0_37518406/article/details/79380534)