国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

使用 nginx 同域名下部署多個(gè) vue 項(xiàng)目,并使用反向代理

saucxs / 3945人閱讀

摘要:花了天時(shí)間,趁著我還沒有忘記,先記錄下來效果目前有個(gè)項(xiàng)目,還有一個(gè)自帶的,我添加了對(duì)應(yīng)的鏈接代碼稍后粘貼出來,為了統(tǒng)一管理子項(xiàng)目的路由。

花了 3 天時(shí)間,趁著我還沒有忘記,先記錄下來
效果

目前有 2 個(gè)項(xiàng)目(project1, project2),還有一個(gè) nginx 自帶的 index.html,我添加了對(duì)應(yīng)的鏈接代碼(稍后粘貼出來),為了統(tǒng)一管理子項(xiàng)目的路由。

我期望實(shí)現(xiàn)下面的效果(假設(shè) ip: localhost,port: 8080):

http://localhost:8080/ 進(jìn)入最外層的 index.html
http://localhost:8080/project1 進(jìn)入項(xiàng)目一
http://localhost:8080/project2 進(jìn)入項(xiàng)目二

廢話不多說,開始配置

Vue 的配置
本人使用的是 vue-cli2 搭建的項(xiàng)目,所以對(duì)應(yīng)的需要修改一些 vue 的配置參數(shù)。

config 文件夾下的 index.js,因?yàn)槭谴虬?,所以我們需要?build.assetsPublicPath 更改對(duì)應(yīng)項(xiàng)目名,譬如

// project1
module.exports = {
  dev: {},
  build: {
    assetsPublicPath: "/project1/" // 注意前后的 ‘/’
  }
}

// project2
module.exports = {
  dev: {},
  build: {
    assetsPublicPath: "/project2/" // 注意前后的 ‘/’
  }
}

config 文件夾下的 prod.env.js 修改成這樣:

// project1
module.exports = {
  NODE_ENV: ""production"",
  BASE_API: ""/api/pro1"" // 這里待會(huì)與 nginx 配置對(duì)應(yīng)
}

// project2
module.exports = {
  NODE_ENV: ""production"",
  BASE_API: ""/api/pro2"" // 這里待會(huì)與 nginx 配置對(duì)應(yīng)
}

[注意] 因?yàn)槲以陧?xiàng)目中使用到了 BASE_API 作為代理的前綴,如果你的不在這邊,你需要找到你自己的代理配置

因?yàn)槊總€(gè)人的 vue-router 文件配置不一樣,你需要找到你的 router 配置文件,內(nèi)部修改為:

// 我采用了 history 模式,hash 模式我沒有測(cè)試,感覺應(yīng)該是一樣的效果
// project1
export default new Router({
  base: "/project1/", // 注意更改你子項(xiàng)目名,這個(gè)對(duì)應(yīng)你的 build.assetsPublicPath
  mode: "history",
  scrollBehavior: () => ({ y: 0 }),
  routes: []
})

// project2
export default new Router({
  base: "/project2/", // 注意更改你子項(xiàng)目名,這個(gè)對(duì)應(yīng)你的 build.assetsPublicPath
  mode: "history",
  scrollBehavior: () => ({ y: 0 }),
  routes: []
})

[注意]npm run build 可能會(huì)報(bào)錯(cuò):.tap(*) 之類的,那是因?yàn)榇虬械?html-webpack-plugin 版本出現(xiàn)了問題,可以執(zhí)行下面的語句

# 這個(gè)版本就是你的 package.json 中的版本,只不過你需要重新再指定這個(gè)版本

$ npm i html-webpack-plugin@4.0.0-alpha -D
Nginx 的配置

首先我的目錄是這樣的,無關(guān)文件全部以 ... 展示

.
├─conf
│  ├─... # 其他文件
│  └─nginx.conf
│
├─html # 只看這里,其他暫時(shí)我沒用到 
│  ├─project1
│  │  └─static
│  │      ├─css
│  │      ├─fonts
│  │      └─js
│  │          ├─g
│  │          └─V
│  ├─project2
│  │   └─static
│  │       ├─css
│  │       ├─fonts
│  │       └─js
│  │           ├─g
│  │           └─V
│  ├─index.html
│  └─50x.html
└─... # 其他文件

[解釋] 我的 nginx 目錄就是原生的,內(nèi)部包含了一個(gè) html 文件夾,為了省事,我直接使用這個(gè),當(dāng)然你也可以指定其他的目錄,但是目前還請(qǐng)和我一樣的配置,后面可以自己定制化。

現(xiàn)在我們開始配置在 conf 文件夾下的 nginx.conf 文件

我是直接在原始文件上修改的,而修改的配置都是在 http 模塊中,所以其他的不需要的代碼我直接用 ... 代替。

# ...
# 反向代理
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"";

    sendfile        on;
    keepalive_timeout  65;

    client_max_body_size 20M;
    client_body_buffer_size 10M;
    large_client_header_buffers 4 128k;
    
    # 這里可以做集群
    upstream p1_server {
        server localhost:8081;
    }

    # 這里可以做集群
    upstream p2_server {
        server localhost:8082;
    }

    server {
        listen 8080;
        server_name localhost;
        charset utf-8;

        proxy_connect_timeout 180;
        proxy_send_timeout 180;
        proxy_read_timeout 180;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarder-For $remote_addr;

        root html; # 這里指定剛剛我們的文件夾
        
        # 總的項(xiàng)目路由,我偷懶直接寫在了同一個(gè)文件
        # 如果有很多可以在配置多個(gè) conf 文件,使用 include 關(guān)聯(lián)進(jìn)來
        location / {
            try_files $uri $uri/ /index.html; # 這里可以理解指定到 html 文件夾下的 index.html
        }
        
        # project1
        # 這里就是剛剛我們?cè)?vue 項(xiàng)目中 config/index.js 的配置 build.assetsPublicPath,
        # 也是 vue 項(xiàng)目中配置的 router 中的 base
        location ^~ /project1 {
            try_files $uri $uri/ /project1/index.html; # 這里可以理解指定到 html 文件夾下 project1 文件夾 的 index.html
        }
        
        # project2
        # 這里是項(xiàng)目二的配置
        location ^~ /project2 { # 
            try_files $uri $uri/ /project2/index.html; # 這里可以理解指定到 html 文件夾下 project2 文件夾 的 index.html
        }
        
        # 這里是 project1 配置需要調(diào)用的接口
        location /api/pro1 { # 這里就是在 vue 項(xiàng)目中 prod.env.js 的配置 BASE_API 
            proxy_redirect off;
            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_pass http://p1_server; # 此處的 p1_server 對(duì)應(yīng)的上面的配置 upstream p1_server {},這里可以做集群,我用不到,就簡單配置了
        }
        
         # 這里是 project1 配置需要調(diào)用的接口
        location /api/pro2 { # 這里就是在 vue 項(xiàng)目中 prod.env.js 的配置 BASE_API
            proxy_redirect off;
            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_pass http://p2_server;  # 此處的 p2_server 對(duì)應(yīng)的上面的配置 upstream p2_server {},這里可以做集群,我用不到,就簡單配置了
        }

        # ...
    }

    # ...
}

最后貼出我修改的 index.html 的代碼

因?yàn)槲沂亲芳拥模灾苯淤N出我追加的代碼,其他的采用 ...

...

Thank you for using nginx.


項(xiàng)目一 | 項(xiàng)目二
最后的調(diào)試

所有的配置完成,我們就可以啟動(dòng) nginx 了,這個(gè)不會(huì)的請(qǐng)自行解決了。

啟動(dòng)成功,我們?cè)跒g覽器輸入 http://localhost:8080 我們就可以看到,

點(diǎn)擊項(xiàng)目一,我們可以看到鏈接變?yōu)?http://localhost:8080/project1

點(diǎn)擊項(xiàng)目二,鏈接變?yōu)?http://localhost:8080/project2,完全符合我們的期望,那就成功了。

[強(qiáng)行解釋一下玄學(xué)] 那天配置好了,一啟動(dòng)就報(bào)錯(cuò),弄的我最后放棄了。但是第二天,準(zhǔn)備在檢查下,一啟動(dòng)竟然全好了,我都一臉懵逼啊! 如果你也遇到和我一樣的問題,先放放,說不定隔天就好了。

原文地址

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/40338.html

相關(guān)文章

  • 阿里云服務(wù)器部署 nodejs + mongodb + nginx 反向代理 + https配置 s

    摘要:感謝老師,老師的慕課網(wǎng)教程購買阿里云服務(wù)器及域名終端連接阿里云服務(wù)器環(huán)境輸入密碼購買時(shí)的密碼如果出現(xiàn)這個(gè)問題的解決方案解決方法查看硬盤掛在情況如果有數(shù)據(jù)盤的情況下查看硬盤使用情況通過設(shè)置快捷登錄權(quán)限,可以增加幾個(gè)擁有權(quán)限的用戶下查 感謝 Scott 老師,Scott老師的慕課網(wǎng)教程 https://coding.imooc.com/clas... 1. 購買阿里云服務(wù)器及域名 2. ...

    張春雷 評(píng)論0 收藏0
  • 阿里云服務(wù)器部署 nodejs + mongodb + nginx 反向代理 + https配置 s

    摘要:感謝老師,老師的慕課網(wǎng)教程購買阿里云服務(wù)器及域名終端連接阿里云服務(wù)器環(huán)境輸入密碼購買時(shí)的密碼如果出現(xiàn)這個(gè)問題的解決方案解決方法查看硬盤掛在情況如果有數(shù)據(jù)盤的情況下查看硬盤使用情況通過設(shè)置快捷登錄權(quán)限,可以增加幾個(gè)擁有權(quán)限的用戶下查 感謝 Scott 老師,Scott老師的慕課網(wǎng)教程 https://coding.imooc.com/clas... 1. 購買阿里云服務(wù)器及域名 2. ...

    jerryloveemily 評(píng)論0 收藏0
  • Angular 容器部署

    摘要:很多人反應(yīng)很難訪問,所以轉(zhuǎn)移到阿里云服務(wù)器上,因此做了一次完整的容器部署。在容器化過程中,我們并未配置任何等,只是保留服務(wù)所需的配置項(xiàng)而已,而這一部分我們可以放在反向代理層完成。 很多人反應(yīng)很難訪問 Github Page,所以 ng-alain.com 轉(zhuǎn)移到阿里云服務(wù)器上,因此做了一次完整的 Angular 容器部署。 以下我會(huì)闡述 ng-alain 整個(gè)過程,其中包括 Docke...

    tracy 評(píng)論0 收藏0
  • Angular 容器部署

    摘要:很多人反應(yīng)很難訪問,所以轉(zhuǎn)移到阿里云服務(wù)器上,因此做了一次完整的容器部署。在容器化過程中,我們并未配置任何等,只是保留服務(wù)所需的配置項(xiàng)而已,而這一部分我們可以放在反向代理層完成。 很多人反應(yīng)很難訪問 Github Page,所以 ng-alain.com 轉(zhuǎn)移到阿里云服務(wù)器上,因此做了一次完整的 Angular 容器部署。 以下我會(huì)闡述 ng-alain 整個(gè)過程,其中包括 Docke...

    alighters 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<