react項目后台及上線步驟


應同學要求,本人將react項目創建后台及上線流程書寫如下:

前端部分

略……

后台部分

(注:這里的后台是用的nodejs搭建的,使用的是express框架+ejs模板)

首先通過express快速搭建后台環境

express -e  項目名
cd 項目名
npm i

有可能你的電腦里面沒有全局安裝express獲安裝了頁顯示不是內部命令,這時,就需要使用如下命令在命令提示符里面下載.

命令如下:

npm install -g express-generator 

npm install -g express 

 

 

然后跟着操作就行了

 

后台環境搭建好后如果是用的假數據就可以在路由里進行配置了,具體配置如下:

router.get('/lists', function(req, res, next) {
    https.get("https://api.mlwei.com/music/api/?key=523077333&id=3641614987&type=songlist&cache=1&size=hq",(getRes)=>{ var content =""; // var doubanData=[]; getRes.on("data",(chunk)=>{ content+=chunk;//得到數據,並拼接到一起  }); getRes.on("end",()=>{ // 數據傳輸結束 var data = JSON.parse(content); //輸出到頁面上,以對象的形式  res.send(JSON.stringify(data)); // console.log(JSON.stringify(doubanData))  }) }) });

注:此處代碼僅供參考,主要是為了給前端提供數據接口、如果是假數據可以這樣做。

 

倘若你是使用的反向代理進行代理的別人的數據。那么可以看下面這一種方式。在后台進行反向代理

 

首先,需要下載一個中間件

npm i -S  http-proxy-middleware

然后,引入兩個模塊

var proxy = require('http-proxy-middleware');

最后,進行配置

app.use('/music/api/*', proxy({target: 'https://api.mlwei.com/', changeOrigin: true}));

然后將前端文件進行npm run build

得到如下文件:

然后,將所文件拷貝到后台的根目錄的public中

 

 

 將index.html文件的后綴改為ejs,並放在后台文件的根目錄下的views中

 

這樣,就可以運行后台文件,看一下運行起后是否能得到數據,如果能得到數據,說明反向代理配置成功了,就可以進行上線啦。

 

上線部分

想要將項目方在線上,就需要找一個第三方平台去創建一個雲應用,這里就以新浪雲為例:

在新浪雲上創建好一個應用后,會得到

 

這樣的信息,然后我們將后台的除了node_modules的其他所有文件放入一個文件夾,將其git到這個遠程倉庫中就可以啦。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM