前言

　　最近做完了一個(gè)項(xiàng)目，Vue.js 2.0 + vuex + axios，還是有點(diǎn)大的。想著做了這么久，放服務(wù)器給朋友們體驗(yàn)一下，幫忙找找BUG，于是就有了研究服務(wù)器這一篇文章了。

準(zhǔn)備工作

服務(wù)器

既然是部署到服務(wù)器，肯定是需要一個(gè)云的。我這里找基友拿的一個(gè)，做測(cè)試的話，可以買阿里云的學(xué)生機(jī)，9.9 一個(gè)月，不過(guò)不是學(xué)生的話就比較麻煩，因?yàn)樯婕懊舾胁僮鞫夹枰?yàn)證碼。

編譯打包

將項(xiàng)目打包成 dist 文件，這里我需要跨域請(qǐng)求一些數(shù)據(jù)，還寫了一個(gè)小型服務(wù)器， app.js 放到 dist 文件夾 同級(jí)目錄。

Xshell

因?yàn)榛训氖?centos 的服務(wù)器，所以用 xshell 的話稍微好操作一點(diǎn)，我是 win10。

WinSCP

接觸命令行并不多，所以面對(duì)命令行編程我還是有點(diǎn)效率不高。這個(gè)軟件就方便了文件的上傳，編輯等等，圖形化界面。

正式開始

有了上面幾項(xiàng)之后，可以正式開始部署工作了。

登錄 WinSCP，連接遠(yuǎn)程服務(wù)器

打開 WinSCP，會(huì)出現(xiàn)如下界面

主機(jī)名，輸入你的服務(wù)器公網(wǎng) ip，端口號(hào)不變，用戶名一般是 root，密碼則是你購(gòu)買服務(wù)器時(shí)設(shè)置的密碼，點(diǎn)擊登錄。

默認(rèn)是 /root 界面。

這時(shí)候把你打包好的文件，扔到某一個(gè)目錄下，如 /opt，dist 和 app.js 在同一目錄

登錄 Xshell 連接遠(yuǎn)程服務(wù)器

打開 Xshell，第一次登錄會(huì)有如下界面：

名稱可以隨便取一個(gè)，協(xié)議選擇 SSH，主機(jī)就是你的公網(wǎng) ip，

之后會(huì)有這個(gè)頁(yè)面

這里我是創(chuàng)建好了的，點(diǎn)擊就可以直接連接。如果你是從上一步過(guò)來(lái)的，點(diǎn)擊之后會(huì)要輸入密碼

之后就連接到遠(yuǎn)程 Linux 系統(tǒng)了。

安裝 node.js

由于我的項(xiàng)目是需要跨域請(qǐng)求數(shù)據(jù)，所以這里我選擇的是用 Node.js 啟動(dòng)小型服務(wù)器，請(qǐng)求數(shù)據(jù)。

1. 下載源碼
2. 解壓源碼
3. 編譯安裝
   

下載源碼，這里以最新的 6.11.1 為例：

cd /usr/local/src/
wget http://nodejs.org/dist/v6.11.1/node-v6.11.1.tar.gz

解壓源碼：

cd /usr/local/src/
tar zxvf node-v6.11.1.tar.gz

編譯安裝：

cd node-v6.11.1
./configure --prefix=/usr/local/node/6.11.1
make
make install

這里 make 過(guò)程大約30分鐘，可以去做別的。

ps：這里我遇到服務(wù)器沒(méi)有安裝 g++ 的問(wèn)題，那直接

yum install gcc-c++

就可以了。

安裝完成后，還需要對(duì) node 進(jìn)行環(huán)境變量的配置

這里通過(guò) WinSCP 找到 /etc/profile，右鍵該文件，編輯。

在 export PATH USER LOGNAME MAIL HOSTNAME HISTSIZE HISTCONTROL 上面一行添加如下代碼：

#set for nodejs
export NODE_HOME=/usr/local/node/6.11.1
export PATH=$NODE_HOME/bin:$PATH

ctrl + s 保存退出，然后編譯一下

source /etc/profile

然后 node -v 檢驗(yàn)是否安裝成功

之后再安裝守護(hù)進(jìn)程，并設(shè)置開機(jī)自啟。保證我們自己寫的小型服務(wù)器能脫離 Xshell 在服務(wù)器上運(yùn)行

全局安裝：

npm install pm2 -g

進(jìn)入 /opt （這里是你放 dist 的和 app.js 的目錄），執(zhí)行命令：

pm2 start app.js --watch
pm2 save
pm2 startup

如果在服務(wù)器端沒(méi)有防火墻墻掉端口的情況下，我們應(yīng)該可以愉快的看到自己的項(xiàng)目了。

但是，服務(wù)器端有防火墻墻掉了端口怎么辦。

vps，安裝 iptables：

yum install -y iptables-service

粗暴的關(guān)閉防火墻（不推薦）：

systemctl stop firewalld.service
systemctl disable firewalld.service
yum install -y iptables-service // 如果上面安裝過(guò)了就不用了
iptables -F
iptables -X
iptables -Z
iptables-save
systemctl restart iptables.service

單獨(dú)開啟某一個(gè)端口（推薦）：

查看狀態(tài):

iptables -L -n

下面添加對(duì)特定端口開放的方法：

使用iptables開放如下端口

/sbin/iptables -I INPUT -p tcp --dport 8000 -j ACCEPT

保存

/etc/rc.d/init.d/iptables save

重啟服務(wù)

service iptables restart

查看需要打開的端口是否生效

/etc/init.d/iptables status

方法2:

或直接編輯/etc/sysconfig/iptables

-A INPUT -p tcp -m tcp --dport 4000 -j ACCEPT

保存在前面部分

再重啟:

service iptables restart

如果是阿里云，就在安全組規(guī)則里添加相應(yīng)的規(guī)則即可。

總結(jié)

以上所述是小編給大家介紹的Vue.js項(xiàng)目部署到服務(wù)器的詳細(xì)步驟，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論