1屋摔、前言
平時(shí)寫(xiě)react頁(yè)面酷含，可以在cmd或者terminal里面npm start /npm run start進(jìn)行測(cè)試硕勿，如果想要打包放到服務(wù)器上哨毁，需要怎么做呢？
經(jīng)過(guò)踩坑終于將自己的react頁(yè)面放到的服務(wù)器上運(yùn)行起來(lái)源武，并且通過(guò)自己的"ip:port/***/"扼褪，可以在局域網(wǎng)內(nèi)的電腦上跑起來(lái)的。
真實(shí)部署到云上或者公司服務(wù)器上還沒(méi)有進(jìn)行驗(yàn)證粱栖，因?yàn)橄胫筒渴鹪诒镜夭襟E應(yīng)該不差多少话浇。
2、打包
在cmd/terminal里切到項(xiàng)目的工作控件下闹究。
輸入 npm run dist
等待生成dist文件夾幔崖。這就是最終打包好的資源文件夾。如果步驟出錯(cuò)了渣淤，需要根據(jù)線索自己排查- -!,
3赏寇、放到服務(wù)器上。
我的webapp項(xiàng)目是在intellij idea上建立的項(xiàng)目价认，配置tomcat步驟和新建項(xiàng)目步驟可以自行百度嗅定。很多前輩們寫(xiě)過(guò)相應(yīng)的文章。當(dāng)項(xiàng)目建立好之后用踩，可以嘗試跑一下看看界面是否為web目錄下的index.html/index.jsp渠退？文件里面的布局。
將dist文件復(fù)制到web項(xiàng)目的web文件夾之下脐彩。然后重新跑tomcat就好碎乃。
4、嘗試
tomcat成功啟動(dòng)之后，在瀏覽器地址欄輸入對(duì)應(yīng)的地址就好酒唉。默認(rèn)地址ip+端口/為web目錄下文件夾名稱(chēng)蜜暑。
也就是dist文件夾的名稱(chēng)可以改為自己的項(xiàng)目名稱(chēng)。
例如证九，dist不修改的話(huà)。我的地址為我的ip 例：http://11.11.11.11:8080/dist/
此時(shí)訪問(wèn)的就是dist文件夾下的index.html文件共虑。
就會(huì)成功跳出來(lái)web項(xiàng)目的主頁(yè)
5愧怜、啰嗦
最近才開(kāi)始react學(xué)習(xí)，在學(xué)習(xí)過(guò)react-router之后妈拌，想著將項(xiàng)目放到服務(wù)器上怎么跑起來(lái)拥坛，因?yàn)橹皼](méi)有弄過(guò)web項(xiàng)目蓬蝶，所以在這個(gè)過(guò)程中搜到好多的文章都有幫助。感謝那些樂(lè)于分享的前輩猜惋。
其實(shí)主要是卡在的第二步丸氛、第三步。因?yàn)橹皼](méi)有webapp經(jīng)驗(yàn)著摔，也不清楚將網(wǎng)頁(yè)部署到服務(wù)器上的步驟缓窜。
簡(jiǎn)單的將步驟給記錄一下，以作備忘谍咆。
如果該文章對(duì)您有所幫助禾锤，希望您可以點(diǎn)下喜歡~給作者一點(diǎn)鼓勵(lì)!
