前言

　　最近做完了一個項目，Vue.js 2.0 + vuex + axios，還是有點大的。想著做了這么久，放服務器給朋友們體驗一下，幫忙找找BUG，于是就有了研究服務器這一篇文章了。

準備工作

服務器

既然是部署到服務器，肯定是需要一個云的。我這里找基友拿的一個，做測試的話，可以買阿里云的學生機，9.9 一個月，不過不是學生的話就比較麻煩，因為涉及敏感操作都需要驗證碼。

編譯打包

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

Xshell

因為基友的是 centos 的服務器，所以用 xshell 的話稍微好操作一點，我是 win10。

WinSCP

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

正式開始

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

登錄 WinSCP，連接遠程服務器

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

主機名，輸入你的服務器公網(wǎng) ip，端口號不變，用戶名一般是 root，密碼則是你購買服務器時設置的密碼，點擊登錄。

默認是 /root 界面。

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

登錄 Xshell 連接遠程服務器

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

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

之后會有這個頁面

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

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

安裝 node.js

由于我的項目是需要跨域請求數(shù)據(jù)，所以這里我選擇的是用 Node.js 啟動小型服務器，請求數(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 過程大約30分鐘，可以去做別的。

ps：這里我遇到服務器沒有安裝 g++ 的問題，那直接

yum install gcc-c++

就可以了。

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

這里通過 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 檢驗是否安裝成功

之后再安裝守護進程，并設置開機自啟。保證我們自己寫的小型服務器能脫離 Xshell 在服務器上運行

全局安裝：

npm install pm2 -g

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

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

如果在服務器端沒有防火墻墻掉端口的情況下，我們應該可以愉快的看到自己的項目了。

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

vps，安裝 iptables：

yum install -y iptables-service

粗暴的關閉防火墻（不推薦）：

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

單獨開啟某一個端口（推薦）：

查看狀態(tài):

iptables -L -n

下面添加對特定端口開放的方法：

使用iptables開放如下端口

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

保存

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

重啟服務

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ī)則里添加相應的規(guī)則即可。

總結(jié)

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

最新評論