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

資訊專欄INFORMATION COLUMN

React項(xiàng)目服務(wù)端部署過程記錄（create-react-app）

spademan / 2485人閱讀

摘要：但在完成最后部署上線是遇到一些小問題，由于搜索無果，便記錄于此。由于是自己的項(xiàng)目，自己的云服務(wù)器。由于之前部署項(xiàng)目時(shí)也碰到過這種類似的問題，當(dāng)時(shí)是通過修改配置解決的。

1.前言

說在最最前

這次分享比較啰嗦啦，想說的很多。實(shí)際問題的解決是 “2-3.恍然大悟 部分”，可以直接跳過其他多余的絮叨哦～

最近入職新公司由于前端主要是react，遂開始去學(xué)習(xí)了解react，這兩天跟著電子書《The Road to learn React》敲了一遍，鞏固了js，熟悉了react的基礎(chǔ)知識。但在完成最后部署上線是遇到一些小問題，由于搜索無果，便記錄于此。

由于我用的是nginx服務(wù)器，所以這里說明一下是基于nginx的配置， 需求不符可以再找找別的啦
2.絮叨開始 
推薦想入門react的同學(xué)去看這本書《The Road to learn React》,個(gè)人覺得很受用。
2-1.一開始很順暢

首先我這次的項(xiàng)目是用create-react-app這個(gè)腳手架搭建的，在package.json里面就有寫好腳本命令，這個(gè)工具的readme里面也有介紹到。
當(dāng)需要把項(xiàng)目打包成生產(chǎn)環(huán)境的文件是需要使用的是npm run build這個(gè)命令

npm run build creates a build directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served index.html, and requests to static paths like /static/js/main..js are served with the contents of the /static/js/main..js file.

這里把官方的介紹copy過來湊下字?jǐn)?shù)，順便自己大概意譯一下就是這個(gè)命令會(huì)把可供生產(chǎn)環(huán)境使用的文件打包到bulid文件夾中，你需要然后訪問者打開你的網(wǎng)站時(shí)可以訪問到你的這個(gè)index.html，然后就是在index.html里面引用的資源文件的路徑也跟資源文件一一對應(yīng)好了。路徑如上所述。

2-2.Boom

由于是自己的項(xiàng)目，自己的云服務(wù)器。沒那么多講究。項(xiàng)目打包好了之后就直接把build文件夾里面的內(nèi)容丟到服務(wù)器上了，也在nginx配置文件中給location配置好了。

興高采烈訪問地址想看看學(xué)習(xí)成果，不出意料，炸了。

我先來看看我做了啥。

npm run build

把build文件夾的內(nèi)容丟到服務(wù)器上

配置nginx

打開瀏覽器

boom 空白頁面

其實(shí)這里頁面訪問到了，服務(wù)器是指向了我的index.html文件的，因?yàn)闆]有404錯(cuò)誤。
既然服務(wù)端沒錯(cuò)，那就是前端問題，那么就打開控制臺(tái)看看，果然報(bào)錯(cuò)。

控制臺(tái)報(bào)找不到資源文件，仔細(xì)一看這里資源文件的路徑指的是我服務(wù)器的根目錄

2-3.恍然大悟

看到控制臺(tái)報(bào)錯(cuò)內(nèi)容瞬間就想明白了，原來這里index.html的路徑默認(rèn)是指向相對根目錄的，那么知道問題就開始解決了。
由于之前部署Vue項(xiàng)目時(shí)也碰到過這種類似的問題，當(dāng)時(shí)是通過修改webpack配置解決的。

因?yàn)檫@里是通過create-react-app搭建的項(xiàng)目，所以繼續(xù)看文檔發(fā)現(xiàn)

By default, Create React App produces a build assuming your app is hosted at the server root.
To override this, specify the homepage in your package.json, for example:

原來是可以通過往package.json添加homepage項(xiàng)實(shí)現(xiàn)相對路徑的修改的！

like this:

  "homepage": "http://mywebsite.com/relativepath",
2-4.大吉大利

不出意外，跟著文檔的指示，成功部署到了服務(wù)器上，雖然是個(gè)很簡單的項(xiàng)目。但自己算是第n次初學(xué)react了。遂記錄一下，以后也有跡可循。

3.最后

感謝閱讀！
不足之處，請多指教～

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/93408.html

相關(guān)文章

  • React項(xiàng)目實(shí)踐系列一

    摘要：在此我們選用用友的公共靜態(tài)資源庫。因此打算建立遠(yuǎn)程的其實(shí)還有個(gè)關(guān)鍵是我使用用友配的電腦開發(fā)，在本地部署的話電腦配置。。。不過此步驟我們也可以省略了，用友的大前端技術(shù)團(tuán)隊(duì)提供了平臺(tái)。 數(shù)據(jù)分析平臺(tái)-實(shí)踐系列一 項(xiàng)目創(chuàng)建于2018年1月底，到現(xiàn)在已經(jīng)接近半年，在此寫下半年來項(xiàng)目的實(shí)踐過程以及自己對前端的學(xué)習(xí)與體悟。 技術(shù)選型 框架： React 路由： React-Router 4 狀態(tài)管...

    DC_er 評論0 收藏0

  • 從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個(gè)前端項(xiàng)目

    摘要：從到再到搭建編寫構(gòu)建一個(gè)前端項(xiàng)目選擇現(xiàn)成的項(xiàng)目模板還是自己搭建項(xiàng)目骨架搭建一個(gè)前端項(xiàng)目的方式有兩種選擇現(xiàn)成的項(xiàng)目模板自己搭建項(xiàng)目骨架。使用版本控制系統(tǒng)管理源代碼項(xiàng)目搭建好后，需要一個(gè)版本控制系統(tǒng)來管理源代碼。 從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個(gè)前端項(xiàng)目 1. 選擇現(xiàn)成的項(xiàng)目模板還是自己搭建項(xiàng)目骨架 搭建一個(gè)前端項(xiàng)目的方式有兩種：選擇現(xiàn)成的項(xiàng)目模板、自己搭建項(xiàng)目骨架。 ...

    call_me_R 評論0 收藏0

  • 從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個(gè)前端項(xiàng)目

    摘要：從到再到搭建編寫構(gòu)建一個(gè)前端項(xiàng)目選擇現(xiàn)成的項(xiàng)目模板還是自己搭建項(xiàng)目骨架搭建一個(gè)前端項(xiàng)目的方式有兩種選擇現(xiàn)成的項(xiàng)目模板自己搭建項(xiàng)目骨架。使用版本控制系統(tǒng)管理源代碼項(xiàng)目搭建好后，需要一個(gè)版本控制系統(tǒng)來管理源代碼。 從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個(gè)前端項(xiàng)目 1. 選擇現(xiàn)成的項(xiàng)目模板還是自己搭建項(xiàng)目骨架 搭建一個(gè)前端項(xiàng)目的方式有兩種：選擇現(xiàn)成的項(xiàng)目模板、自己搭建項(xiàng)目骨架。 ...

    wzyplus 評論0 收藏0

  • 從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個(gè)前端項(xiàng)目

    摘要：從到再到搭建編寫構(gòu)建一個(gè)前端項(xiàng)目選擇現(xiàn)成的項(xiàng)目模板還是自己搭建項(xiàng)目骨架搭建一個(gè)前端項(xiàng)目的方式有兩種選擇現(xiàn)成的項(xiàng)目模板自己搭建項(xiàng)目骨架。使用版本控制系統(tǒng)管理源代碼項(xiàng)目搭建好后，需要一個(gè)版本控制系統(tǒng)來管理源代碼。 從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個(gè)前端項(xiàng)目 1. 選擇現(xiàn)成的項(xiàng)目模板還是自己搭建項(xiàng)目骨架 搭建一個(gè)前端項(xiàng)目的方式有兩種：選擇現(xiàn)成的項(xiàng)目模板、自己搭建項(xiàng)目骨架。 ...

    aristark 評論0 收藏0

  • React項(xiàng)目從創(chuàng)建到打包到云服務(wù)器指南

    摘要：一搭建項(xiàng)目二打包三云服務(wù)器設(shè)置一搭建項(xiàng)目這里采用官方提供的腳手架已自動(dòng)集成相關(guān)配置生成的項(xiàng)目目錄結(jié)構(gòu)如下為什么沒有配置文件的配置需要輸入命令將所有內(nèi)建的配置暴露出來。 一 搭建react項(xiàng)目 二 打包三 云服務(wù)器設(shè)置 一 搭建react項(xiàng)目: 這里采用react官方提供的腳手架 create-react-app (已自動(dòng)集成webpack相關(guān)配置) 生成的項(xiàng)目目錄結(jié)構(gòu)如下： sh...

    yintaolaowanzi 評論0 收藏0

發(fā)表評論

0條評論

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