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

資訊專欄INFORMATION COLUMN

運維記錄1——解決在Nginx下部署CRA項目，二級目錄不能訪問的問題

_ang / 4034人閱讀

摘要：根目錄訪問到了部署階段，我通常使用作為容器，將項目部署到一個根目錄下訪問。分析的項目配置默認是跑在根目錄下的。解決有一個屬性叫做，就是用于解決此類問題。現象網頁顯示，在請求頁面路由如時，該路由的請求狀態為。但直接訪問則會訪問失敗。

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

根目錄訪問

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

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

那么只要我們將項目文件放到對應的目錄下，重啟nginx即可開始訪問web頁面。

二級目錄訪問

有時我們有多個web項目，多個項目不可能同時掛在根目錄下，所以我們會劃分二級目錄來分別訪問各個web項目。如

http://my.website.com/project1 => 訪問react-project1項目

http://my.website.com/project2 => 訪問react-project2項目

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

此時，如果簡單將nginx配置的location改為/project1，則會出現網頁無法訪問的錯誤。

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

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

分析

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

解決

將打包路徑從絕對路徑改為相對路徑:

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

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

問題2：加載成功，網頁空白

重新上傳到服務器，更新dist目錄下的文件，重啟nginx后訪問網頁。

現象

結果發現，網頁仍然是空白一片。查看html的渲染結果，發現似乎js并沒有執行。

分析

在react-router-dom的例子中，通常使用的是BrowserRouter。這種類型的Router在向服務器發送請求時，如果相對于二級目錄的路由去指向對應的頁面路由，就會找不到資源，因此也就不會渲染。

解決

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

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

修改以上配置并編譯部署，重啟nginx后可正常訪問網頁。但刷新后，網頁變為一片空白。

現象

網頁顯示，在請求頁面路由如http://my.website.com/project... 時，該路由的請求狀態為404。

分析

還是因為BrowserRouter的問題，之前能正常訪問時因為路由中設置了Redirect，所以能訪問到根目錄并自動跳轉到/home。但直接訪問則會訪問失敗。

解決

在nginx配置中加入try_files命令

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

這樣，在請求$uri時如果找不到對應的資源，會fallback回去加載index.html。

問題解決。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/40285.html

相關文章

  • 記一次基于react、cra2、typescript的pwa項目由開發到部署（三）

    摘要：配置反向代理我們的項目已經在服務器上的端口運行著，所以我們需要配置一個反向代理，將我們對服務器的訪問反向代理到服務器的。 該篇文章為本系列最后一篇文章，因為最近樓主忙于畢設，所以這也是一篇被鴿了很久很久的文章。該文章主要講的是該項目的部署部分，包括： 如何部署將該項目部署到nginx服務器上。 為它配置證書，讓它運行在https協議上等。 項目回顧 這是一個基于creat-reac...

    Betta 評論0 收藏0

  • creat-react-app/dva靜態項目，用nginx部署在次級域名路徑（如a.com/sub

    摘要：因為要把文件夾部署在一個域名的次級目錄，沒想到和運維同學一起折騰了一下午。。 因為要把dist文件夾部署在一個域名的次級目錄，沒想到和運維同學一起折騰了一下午。。 放在這里備忘，也給后來的同學一些可查的中文資料： 1，dva/cra給你的模板index.html是在public里面的，webpack會原封不動拷到dist，其中引入index.js和index.css都是絕對路徑，可以用...

    jindong 評論0 收藏0

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

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

    張春雷 評論0 收藏0

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

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

    jerryloveemily 評論0 收藏0

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

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

    aikin 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<