成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

運(yùn)維記錄1——解決在Nginx下部署CRA項(xiàng)目，二級(jí)目錄不能訪問的問題

_ang / 4119人閱讀

摘要：根目錄訪問到了部署階段，我通常使用作為容器，將項(xiàng)目部署到一個(gè)根目錄下訪問。分析的項(xiàng)目配置默認(rèn)是跑在根目錄下的。解決有一個(gè)屬性叫做，就是用于解決此類問題?，F(xiàn)象網(wǎng)頁(yè)顯示，在請(qǐng)求頁(yè)面路由如時(shí)，該路由的請(qǐng)求狀態(tài)為。但直接訪問則會(huì)訪問失敗。

如果從頭開始搭建React項(xiàng)目，create-react-app通常是開發(fā)者的首選。畢竟不是誰都有精力去了解WebPack的復(fù)雜配置，而CRA將配置隱藏開箱即用的特性必然會(huì)受到普遍歡迎。

根目錄訪問

到了部署階段，我通常使用nginx作為web容器，將項(xiàng)目部署到一個(gè)根目錄下訪問。如

# nginx配置
server {
  listen 80;
  server_name my.website.com;
  
  ...
  
  location / {
    alias /data/www/react-project/dist;
    index index.html
  }
}

那么只要我們將項(xiàng)目文件放到對(duì)應(yīng)的目錄下，重啟nginx即可開始訪問web頁(yè)面。

二級(jí)目錄訪問

有時(shí)我們有多個(gè)web項(xiàng)目，多個(gè)項(xiàng)目不可能同時(shí)掛在根目錄下，所以我們會(huì)劃分二級(jí)目錄來分別訪問各個(gè)web項(xiàng)目。如

http://my.website.com/project1 => 訪問react-project1項(xiàng)目

http://my.website.com/project2 => 訪問react-project2項(xiàng)目

問題1：CSS等資源加載失敗

此時(shí)，如果簡(jiǎn)單將nginx配置的location改為/project1，則會(huì)出現(xiàn)網(wǎng)頁(yè)無法訪問的錯(cuò)誤。

# nginx配置
server {
  listen 80;
  server_name my.website.com;
  
  ...
  
  # location / {
  location /project1 {
    alias /data/www/react-project/dist;
    index index.html
  }
}
現(xiàn)象

從dev工具可以看出，html文件有取得，但css、js等資源引用失敗。css和js的文件路徑都是http://my.website.com/static/...（或css)。

分析

CRA(create-react-app)的項(xiàng)目配置默認(rèn)是跑在根目錄下的。如果查看dist目錄下的html會(huì)發(fā)現(xiàn)，所有的css或js文件的引用路徑都是/開頭的絕對(duì)路徑。

解決

將打包路徑從絕對(duì)路徑改為相對(duì)路徑:

# package.json
{
  ...
  "homepage": ".",   // 添加homepage屬性，將路徑改為當(dāng)前目錄
  ...
}

重新編譯后看到，所有的資源文件路徑都改過來了。

問題2：加載成功，網(wǎng)頁(yè)空白

重新上傳到服務(wù)器，更新dist目錄下的文件，重啟nginx后訪問網(wǎng)頁(yè)。

現(xiàn)象

結(jié)果發(fā)現(xiàn)，網(wǎng)頁(yè)仍然是空白一片。查看html的渲染結(jié)果，發(fā)現(xiàn)似乎js并沒有執(zhí)行。

分析

在react-router-dom的例子中，通常使用的是BrowserRouter。這種類型的Router在向服務(wù)器發(fā)送請(qǐng)求時(shí)，如果相對(duì)于二級(jí)目錄的路由去指向?qū)?yīng)的頁(yè)面路由，就會(huì)找不到資源，因此也就不會(huì)渲染。

解決

BrowserRouter有一個(gè)屬性叫做basename，就是用于解決此類問題。

...
import { Route, BrowserRouter as Router, Switch, Redirect } from "react-router-dom";
...
...
  
    
      
      { routes }
    
  
...
問題3：訪問成功，刷新后404

修改以上配置并編譯部署，重啟nginx后可正常訪問網(wǎng)頁(yè)。但刷新后，網(wǎng)頁(yè)變?yōu)橐黄瞻住?/p> 現(xiàn)象

網(wǎng)頁(yè)顯示，在請(qǐng)求頁(yè)面路由如http://my.website.com/project... 時(shí)，該路由的請(qǐng)求狀態(tài)為404。

分析

還是因?yàn)锽rowserRouter的問題，之前能正常訪問時(shí)因?yàn)槁酚芍性O(shè)置了Redirect，所以能訪問到根目錄并自動(dòng)跳轉(zhuǎn)到/home。但直接訪問則會(huì)訪問失敗。

解決

在nginx配置中加入try_files命令

  location /project1 {
    alias /data/www/react-project/dist;
    # index index.html
    try_files $uri /project1/index.html
  }

這樣，在請(qǐng)求$uri時(shí)如果找不到對(duì)應(yīng)的資源，會(huì)fallback回去加載index.html。

問題解決。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/40285.html

相關(guān)文章

  • 記一次基于react、cra2、typescript的pwa項(xiàng)目由開發(fā)到部署（三）

    摘要：配置反向代理我們的項(xiàng)目已經(jīng)在服務(wù)器上的端口運(yùn)行著，所以我們需要配置一個(gè)反向代理，將我們對(duì)服務(wù)器的訪問反向代理到服務(wù)器的。 該篇文章為本系列最后一篇文章，因?yàn)樽罱鼧侵髅τ诋呍O(shè)，所以這也是一篇被鴿了很久很久的文章。該文章主要講的是該項(xiàng)目的部署部分，包括： 如何部署將該項(xiàng)目部署到nginx服務(wù)器上。 為它配置證書，讓它運(yùn)行在https協(xié)議上等。 項(xiàng)目回顧 這是一個(gè)基于creat-reac...

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

  • creat-react-app/dva靜態(tài)項(xiàng)目，用nginx部署在次級(jí)域名路徑（如a.com/sub

    摘要：因?yàn)橐盐募A部署在一個(gè)域名的次級(jí)目錄，沒想到和運(yùn)維同學(xué)一起折騰了一下午。。 因?yàn)橐裠ist文件夾部署在一個(gè)域名的次級(jí)目錄，沒想到和運(yùn)維同學(xué)一起折騰了一下午。。 放在這里備忘，也給后來的同學(xué)一些可查的中文資料： 1，dva/cra給你的模板index.html是在public里面的，webpack會(huì)原封不動(dòng)拷到dist，其中引入index.js和index.css都是絕對(duì)路徑，可以用...

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

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

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

    張春雷 評(píng)論0 收藏0

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

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

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

  • tomcat與nginx的反向代理，https過程分析

    摘要：接下來我們要配置這個(gè)的端口，這樣他們才能運(yùn)行時(shí)端口號(hào)不沖突。問題指明不同的端口號(hào)訪問也太蠢了吧的確很蠢，所以我們要慢慢過渡學(xué)習(xí)。接下來我們學(xué)習(xí)用來進(jìn)行反向代理。阿里云的部分有一些配置的具體過程。 一、在linux上部署運(yùn)行多個(gè)tomcat 1、以前的我們 雖然說是在linux上，但是windows上也是同樣的道理，只不過我們服務(wù)器都是選用linux罷了。 原先，自己有多個(gè)項(xiàng)目需要部署在...

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

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

0條評(píng)論

閱讀需要支付1元查看
<