|
@@ -0,0 +1,151 @@
|
|
|
+>[TOC]
|
|
|
+
|
|
|
+
|
|
|
+# 1、nginx部署二级目录
|
|
|
+
|
|
|
+让访问的地址加上dist或者其他前缀
|
|
|
+1. 修改nginx.conf文件
|
|
|
+```
|
|
|
+server {
|
|
|
+ listen 8081;
|
|
|
+ server_name localhost;
|
|
|
+
|
|
|
+ location / {
|
|
|
+ # 不修改此处,确保用户直接输入ip+端口无法访问到系统
|
|
|
+ root html;
|
|
|
+ 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;
|
|
|
+}
|
|
|
+```
|