上傳文件至云服務(wù)器

一、打包文件

在項(xiàng)目根目錄下運(yùn)行

npm run build

等待命令運(yùn)行結(jié)束后，會(huì)發(fā)現(xiàn)目錄下多了 dist 文件夾，這個(gè)文件夾就是我們等下要放到服務(wù)器中的。

二、文件傳輸

打開(kāi) Xftp與實(shí)例建立連接

云服務(wù)器Apache默認(rèn)的根目錄是/var/www/html，因此我們?cè)谶@個(gè)目錄下新建music文件夾（這里以我的項(xiàng)目文件名為例）

將項(xiàng)目本地的dist文件夾的內(nèi)容移到云服務(wù)器music文件夾下（準(zhǔn)備好前端資源）

將項(xiàng)目本地的server文件夾也移到云服務(wù)器dist文件夾下（這里注意不要復(fù)制node_modules文件夾）

補(bǔ)充當(dāng)時(shí)后臺(tái)代碼路徑：C:\try\Vue-mmPlayer-master\dist

這里再補(bǔ)充一個(gè)項(xiàng)目：
電商后臺(tái)管理項(xiàng)目：http://arwin521.top/vue/

這里將本地dist文件夾中的內(nèi)容，放在了vue文件夾內(nèi)，若直接將dist文件夾拖到vue路徑下，則會(huì)報(bào)錯(cuò)

報(bào)這樣的錯(cuò)實(shí)在是太愚蠢了 😦

三、初始化項(xiàng)目

① 輸入以下兩行代碼進(jìn)入項(xiàng)目

ls指令后下面會(huì)顯示該目錄下的文件夾

② 上傳 package.json到服務(wù)器目錄

③ 在Xshell中安裝"dependencies"中項(xiàng)目運(yùn)行需要的所有依賴

npm install

全部安裝完成后，項(xiàng)目目錄下便會(huì)有node_modules文件夾了。

④ 啟動(dòng)服務(wù)

這里默認(rèn)已經(jīng)云服務(wù)器已經(jīng)安裝了Nodejs，3000端口也添加到了安全組，且已經(jīng)為Nodejs創(chuàng)建軟鏈接（使node和npm命令全局有效，若未完成這一步請(qǐng)參考上一篇博文）

node app.js

運(yùn)行app.js文件，在瀏覽器打開(kāi) 服務(wù)器公網(wǎng)IP:80（如：263.182.35.68:80），就可以正常運(yùn)行訪問(wèn)了。這里我使用的是網(wǎng)易云音樂(lè)提供的開(kāi)源的api。

四、安裝pm2

上面我們以 node app.js 啟動(dòng)了項(xiàng)目，當(dāng)我們退出 Xshell 時(shí)，進(jìn)程就會(huì)關(guān)閉，無(wú)法再訪問(wèn)到項(xiàng)目，而 pm2 就是解決這種問(wèn)題的，以 pm2 啟動(dòng)項(xiàng)目后，退出 Xshell 后依然可以正常訪問(wèn)。

① 安裝pm2

npm install -g pm2

注：以 -g 全局安裝的插件都在 node 安裝目錄 bin 文件下

② pm2配置全局變量

我們?yōu)榱丝梢栽谌魏文夸浂伎梢允褂胮m2命令，我們將此文件夾加入環(huán)境變量

whereis pm2

查詢pm2的安裝路徑 顯示是： /opt/node/bin/pm2

ln -s /opt/node/bin/pm2 /usr/local/bin pm2

這一步為pm2配置全局變量
注意這里如果重復(fù)操作有可能會(huì)出現(xiàn)以下錯(cuò)誤：
failed to create symbolic link ‘/usr/local/bin/pm2’: File exists
這里只需要?jiǎng)h除并重新創(chuàng)建軟鏈，再執(zhí)行pm2

mv /usr/local/bin/pm2 /tmp/ ln -s /opt/node/bin/pm2 /usr/local/bin pm2

③ 啟動(dòng)項(xiàng)目

cd /var/www/html/music/dist/serverpm2 start app.js

這樣以 pm2 啟動(dòng)項(xiàng)目后，退出 Xshell 后，就依然可以正常訪問(wèn)了。
貼上項(xiàng)目跑起來(lái)以后的地址：http://arwin521.top/music/arwin/#/music/toplist

總結(jié)

以上是生活随笔為你收集整理的将Vue+Nodejs项目部署到阿里云服务器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。