React項目服務端部署過程記錄（create-react-app）

1.前言

說在最最前

此次分享比較囉嗦啦，想說的不少。實際問題的解決是 「2-3.恍然大悟 部分」，能夠直接跳過其餘多餘的絮叨哦～

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

因爲我用的是nginx服務器，因此這裏說明一下是基於nginx的配置， 需求不符能夠再找找別的啦

2.絮叨開始

推薦想入門react的同窗去看這本書 《The Road to learn React》,我的以爲很受用。

2-1.一開始很順暢

首先我此次的項目是用create-react-app這個腳手架搭建的，在package.json裏面就有寫好腳本命令，這個工具的readme裏面也有介紹到。
當須要把項目打包成生產環境的文件是須要使用的是npm run build這個命令

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.<hash>.js are served with the contents of the /static/js/main.<hash>.js file.

這裏把官方的介紹copy過來湊下字數，順便本身大概意譯一下就是這個命令會把可供生產環境使用的文件打包到bulid文件夾中，你須要而後訪問者打開你的網站時能夠訪問到你的這個index.html，而後就是在index.html裏面引用的資源文件的路徑也跟資源文件一一對應好了。路徑如上所述。

2-2.Boom

因爲是本身的項目，本身的雲服務器。沒那麼多講究。項目打包好了以後就直接把build文件夾裏面的內容丟到服務器上了，也在nginx配置文件中給location配置好了。

興高采烈訪問地址想看看學習成果，不出意料，炸了。

我先來看看我作了啥。

• npm run build
• 把build文件夾的內容丟到服務器上
• 配置nginx
• 打開瀏覽器
• boom 空白頁面

其實這裏頁面訪問到了，服務器是指向了個人index.html文件的，由於沒有404錯誤。
既然服務端沒錯，那就是前端問題，那麼就打開控制檯看看，果真報錯。

控制檯報找不到資源文件，仔細一看這裏資源文件的路徑指的是我服務器的根目錄

2-3.恍然大悟

看到控制檯報錯內容瞬間就想明白了，原來這裏index.html的路徑默認是指向相對根目錄的，那麼知道問題就開始解決了。
因爲以前部署Vue項目時也碰到過這種相似的問題，當時是經過修改webpack配置解決的。

由於這裏是經過create-react-app搭建的項目，因此繼續看文檔發現

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項實現相對路徑的修改的！

like this:

"homepage": "http://mywebsite.com/relativepath",

2-4.大吉大利

不出意外，跟着文檔的指示，成功部署到了服務器上，雖然是個很簡單的項目。但本身算是第n次初學react了。遂記錄一下，之後也有跡可循。

3.最後

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