資訊專欄INFORMATION COLUMN
摘要：根目錄訪問到了部署階段，我通常使用作為容器，將項(xiàng)目部署到一個根目錄下訪問。分析的項(xiàng)目配置默認(rèn)是跑在根目錄下的。解決有一個屬性叫做，就是用于解決此類問題。現(xiàn)象網(wǎng)頁顯示，在請求頁面路由如時，該路由的請求狀態(tài)為。但直接訪問則會訪問失敗。
如果從頭開始搭建React項(xiàng)目，create-react-app通常是開發(fā)者的首選。畢竟不是誰都有精力去了解WebPack的復(fù)雜配置，而CRA將配置隱藏開箱即用的特性必然會受到普遍歡迎。
根目錄訪問到了部署階段，我通常使用nginx作為web容器，將項(xiàng)目部署到一個根目錄下訪問。如
# nginx配置
server {
listen 80;
server_name my.website.com;
...
location / {
alias /data/www/react-project/dist;
index index.html
}
}
那么只要我們將項(xiàng)目文件放到對應(yīng)的目錄下，重啟nginx即可開始訪問web頁面。
二級目錄訪問有時我們有多個web項(xiàng)目，多個項(xiàng)目不可能同時掛在根目錄下，所以我們會劃分二級目錄來分別訪問各個web項(xiàng)目。如
http://my.website.com/project1 => 訪問react-project1項(xiàng)目
http://my.website.com/project2 => 訪問react-project2項(xiàng)目
問題1：CSS等資源加載失敗此時，如果簡單將nginx配置的location改為/project1，則會出現(xiàn)網(wǎng)頁無法訪問的錯誤。
# 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會發(fā)現(xiàn)，所有的css或js文件的引用路徑都是/開頭的絕對路徑。
解決將打包路徑從絕對路徑改為相對路徑:
# package.json
{
...
"homepage": ".", // 添加homepage屬性，將路徑改為當(dāng)前目錄
...
}
重新編譯后看到，所有的資源文件路徑都改過來了。
問題2：加載成功，網(wǎng)頁空白重新上傳到服務(wù)器，更新dist目錄下的文件，重啟nginx后訪問網(wǎng)頁。
現(xiàn)象結(jié)果發(fā)現(xiàn)，網(wǎng)頁仍然是空白一片。查看html的渲染結(jié)果，發(fā)現(xiàn)似乎js并沒有執(zhí)行。
分析在react-router-dom的例子中，通常使用的是BrowserRouter。這種類型的Router在向服務(wù)器發(fā)送請求時，如果相對于二級目錄的路由去指向?qū)?yīng)的頁面路由，就會找不到資源，因此也就不會渲染。
解決BrowserRouter有一個屬性叫做basename，就是用于解決此類問題。
...
import { Route, BrowserRouter as Router, Switch, Redirect } from "react-router-dom";
...
...
...
問題3：訪問成功，刷新后404
修改以上配置并編譯部署，重啟nginx后可正常訪問網(wǎng)頁。但刷新后，網(wǎng)頁變?yōu)橐黄瞻住?/p> 現(xiàn)象
網(wǎng)頁顯示，在請求頁面路由如http://my.website.com/project... 時，該路由的請求狀態(tài)為404。
分析還是因?yàn)锽rowserRouter的問題，之前能正常訪問時因?yàn)槁酚芍性O(shè)置了Redirect，所以能訪問到根目錄并自動跳轉(zhuǎn)到/home。但直接訪問則會訪問失敗。
解決在nginx配置中加入try_files命令
location /project1 {
alias /data/www/react-project/dist;
# index index.html
try_files $uri /project1/index.html
}
這樣，在請求$uri時如果找不到對應(yīng)的資源，會fallback回去加載index.html。
問題解決。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/40285.html
摘要：配置反向代理我們的項(xiàng)目已經(jīng)在服務(wù)器上的端口運(yùn)行著，所以我們需要配置一個反向代理，將我們對服務(wù)器的訪問反向代理到服務(wù)器的。 該篇文章為本系列最后一篇文章，因?yàn)樽罱鼧侵髅τ诋呍O(shè)，所以這也是一篇被鴿了很久很久的文章。該文章主要講的是該項(xiàng)目的部署部分，包括： 如何部署將該項(xiàng)目部署到nginx服務(wù)器上。 為它配置證書，讓它運(yùn)行在https協(xié)議上等。 項(xiàng)目回顧 這是一個基于creat-reac...
摘要：因?yàn)橐盐募A部署在一個域名的次級目錄，沒想到和運(yùn)維同學(xué)一起折騰了一下午。。 因?yàn)橐裠ist文件夾部署在一個域名的次級目錄，沒想到和運(yùn)維同學(xué)一起折騰了一下午。。 放在這里備忘，也給后來的同學(xué)一些可查的中文資料： 1，dva/cra給你的模板index.html是在public里面的，webpack會原封不動拷到dist，其中引入index.js和index.css都是絕對路徑，可以用...
摘要：感謝老師，老師的慕課網(wǎng)教程購買阿里云服務(wù)器及域名終端連接阿里云服務(wù)器環(huán)境輸入密碼購買時的密碼如果出現(xiàn)這個問題的解決方案解決方法查看硬盤掛在情況如果有數(shù)據(jù)盤的情況下查看硬盤使用情況通過設(shè)置快捷登錄權(quán)限，可以增加幾個擁有權(quán)限的用戶下查 感謝 Scott 老師，Scott老師的慕課網(wǎng)教程 https://coding.imooc.com/clas... 1. 購買阿里云服務(wù)器及域名 2. ...
摘要：感謝老師，老師的慕課網(wǎng)教程購買阿里云服務(wù)器及域名終端連接阿里云服務(wù)器環(huán)境輸入密碼購買時的密碼如果出現(xiàn)這個問題的解決方案解決方法查看硬盤掛在情況如果有數(shù)據(jù)盤的情況下查看硬盤使用情況通過設(shè)置快捷登錄權(quán)限，可以增加幾個擁有權(quán)限的用戶下查 感謝 Scott 老師，Scott老師的慕課網(wǎng)教程 https://coding.imooc.com/clas... 1. 購買阿里云服務(wù)器及域名 2. ...
摘要：接下來我們要配置這個的端口，這樣他們才能運(yùn)行時端口號不沖突。問題指明不同的端口號訪問也太蠢了吧的確很蠢，所以我們要慢慢過渡學(xué)習(xí)。接下來我們學(xué)習(xí)用來進(jìn)行反向代理。阿里云的部分有一些配置的具體過程。 一、在linux上部署運(yùn)行多個tomcat 1、以前的我們 雖然說是在linux上，但是windows上也是同樣的道理，只不過我們服務(wù)器都是選用linux罷了。 原先，自己有多個項(xiàng)目需要部署在...
閱讀 1730·2021-11-04 16:11
閱讀 3536·2021-09-09 11:33
閱讀 1657·2019-08-30 15:54
閱讀 697·2019-08-30 15:44
閱讀 3323·2019-08-30 15:43
閱讀 2670·2019-08-30 13:06
閱讀 1779·2019-08-29 17:00
閱讀 986·2019-08-29 15:33
