把vue-router和express項(xiàng)目部署到服務(wù)器的方法
- 首先確定此項(xiàng)目在本地能夠運(yùn)行成功
在本地命令行中輸入npm run start,無報(bào)錯(cuò),且打開127.0.0.1:3000
有寫的路由為/的頁面,如圖
此為文件層級關(guān)系
front為前端文件
xk3為后臺express與數(shù)據(jù)庫mysql鏈接的文件
用命令行進(jìn)入后臺并且運(yùn)行,啟動(dòng)成功
這是路徑為/的頁面
在瀏覽器中輸入路徑http://localhost:3000/
瀏覽器中顯示W(wǎng)elCome to express
至此此項(xiàng)目在本地運(yùn)行成功,我們現(xiàn)在就要放到服務(wù)器上。
- 準(zhǔn)備工作
此前服務(wù)器的基本設(shè)置就不再贅述。
打開xftp或者其他類似軟件,將此項(xiàng)目全部復(fù)制到/var/www/路徑下
(此路徑可能會(huì)不一樣,就是服務(wù)器網(wǎng)頁的路徑)
將后臺所需要的數(shù)據(jù)導(dǎo)入服務(wù)器的數(shù)據(jù)庫中,命令為mysql>source “路徑”;
然后打開xshell并進(jìn)入此項(xiàng)目后臺,類似于在本地運(yùn)行后臺文件,前提是你的服務(wù)器上安裝了node,mysql等基本配置,自行百度,還有一個(gè)問題就是確定你的vue-router中的路由獲取的是服務(wù)器的ip+port+router,例如var url = ‘http://47.95.7.109:3000/course/batchDelete‘,還要從阿里云的安全組配置那里打開你的3000端口,不然訪問會(huì)被阻止。
我的運(yùn)行失敗是因?yàn)槲抑笥昧薴orever守護(hù)進(jìn)程,一直在占用3000端口,所以無法啟動(dòng),如果沒有設(shè)置過的話能夠正常啟動(dòng)就和在本地一樣。
以我的學(xué)生選課系統(tǒng)為例截圖
但是這樣你的服務(wù)器就一直處于阻塞狀態(tài),只要斷開鏈接,服務(wù)也會(huì)中斷。
創(chuàng)建守護(hù)進(jìn)程
接下來就是用pm2或者forever創(chuàng)建守護(hù)進(jìn)程,經(jīng)過親測,感覺forever比較簡單,只需要幾行命令,并不需要額外配置。
即開始使用forever
1.sudo npm install forever -g
2.forever start app.js
3.forever start -l forever.log app.js
這是我出現(xiàn)了一個(gè)錯(cuò)誤,是沒有指定錯(cuò)誤和輸出的日志文件
提示錯(cuò)誤為:log file /root/.forever/forever.log exists. Use the -a or –append option to append log.
4.解決方案
forever start -a -l forever.log -o out.log -e err.log app.js(app.js就是后臺的入口文件)
如果還是不行可使用
forever start -a -l forever.log -o out.log -e err.log ./bin/www
此時(shí)node項(xiàng)目部署完成,就算關(guān)閉服務(wù)器的后臺服務(wù)也能正常運(yùn)行,不需要阻塞。
運(yùn)行成功圖片
如果其中有問題,請?zhí)岢?,謝謝!
樣本鏈接:http://47.95.7.109/student/work/front/#/
以上這篇把vue-router和express項(xiàng)目部署到服務(wù)器的方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue3+Element-plus項(xiàng)目自動(dòng)導(dǎo)入報(bào)錯(cuò)的解決方案
vue3出來一段時(shí)間了,element也更新了版本去兼容vue3,下面這篇文章主要給大家介紹了關(guān)于Vue3+Element-plus項(xiàng)目自動(dòng)導(dǎo)入報(bào)錯(cuò)的解決方案,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07詳解Vue2和Vue3的區(qū)別以及其鉤子函數(shù)的使用
Vue.js?3?和?Vue.js?2?是兩個(gè)主要版本的流行前端框架,它們之間有很多區(qū)別,包括性能優(yōu)化、新特性和改進(jìn)的API等,下面就跟隨小編一起來看看他們的使用區(qū)別吧2024-01-01利用Vue3+Element?Plus封裝公共表格組件(帶源碼)
最近公司項(xiàng)目中頻繁會(huì)使用到table表格,而且前端技術(shù)這一塊也用到了vue3來開發(fā),所以基于element plus table做了一個(gè)二次封裝的組件,這篇文章主要給大家介紹了關(guān)于利用Vue3+Element?Plus封裝公共表格組件的相關(guān)資料,需要的朋友可以參考下2023-11-11vue項(xiàng)目中更改名字和圖標(biāo)的簡單實(shí)現(xiàn)步驟
今天在寫vue項(xiàng)目時(shí)碰到的問題是怎么修改vue的網(wǎng)頁圖標(biāo),所以下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中更改名字和圖標(biāo)的簡單實(shí)現(xiàn),文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08