很久很久以前，就對前后端如何分離，后端如何把代碼部署到服務器有濃厚的興趣，最近在阿里雲上申請了一個服務器，試試水吧！
本文參考了文章《基於Node的Koa2項目從創建到打包到雲服務器指南》
由於前端要調用后端接口，因此我們先介紹后端接口的開發
1. 后端接口開發
1.1 使用 koa-generator 腳手架開發
npm install koa-generator -g //安裝koa-generator，利用koa-generator快速搭建Node.js服務器 koa2 my-project //新建一個叫做my-project的koa2項目 cd my-project npm install npm start //啟動項目 localhost:3000 //打開
1.2 定義接口
router.get('/getJson', async (ctx, next) => {
ctx.body = 'json string'
})
router.get('/hello', async (ctx, next) => {
ctx.body = {
title: 'koa2 hello'
}
})
2前端代碼開發；
2.1 腳手架的安裝
vue較好的腳手架是：vue-cli
具體安裝步驟，網上一搜一堆，給個鏈接：vue-cli（vue腳手架）超詳細教程
大概步驟：
確保安裝了node webpack
npm install -g vue-cli //全局安裝 vue-cli vue init webpack vue-demo //初始化項目 cd vue-demo //切換到項目目錄 npm run dev //啟動項目
2.2 連接后端接口
由於要請求后端接口，故要安裝 axios
mounted:function(){ this.getData(); //初始化頁面時，請求了兩個接口 /getJson 和 /hello }, methods:{ getData:async function(){ axios.get('http://localhost:3000/getJson').then((respone)=>{ //這里使用了異步函數 Promise 的then this.querydata = respone.data }) let {status,data} = await axios.get('http://localhost:3000/hello');//這里使用了 async 和 await this.two = data.title }
問題一：這樣執行后，發現報錯： 提示無法跨域的問題。即兩個端口不一樣。
方法一：修改前端代碼：
axios.get('/getJson').then((respone)=>{
this.querydata = respone.data
})
同時修改config/index文件：
proxyTable: { '/': { target: 'http://localhost:3000', changeOrigin: true, pathRewrite: { '^/': '' } } }
即把每個請求，做一個代理；但是總覺得，處理跨域應該由服務端來做，因此有
方法二：
前端代碼：
const domain = 'http://localhost:3000' getData:async function(){ axios.get(domain+'/getJson').then((respone)=>{ this.querydata = respone.data }) }
后端代碼，在app.js：
const cors = require('koa2-cors');
app.use(cors());
參考文章： node.js 應答跨域請求實現
這樣一個最簡單的請求后端接口的實例完成了，這時我們在前端執行 npm run build, 把生成的dist文件夾的內容，放入koa項目的public中：
這時一般app.js中有：
app.use(require('koa-static')(__dirname + '/public'))
若沒有，自己填寫上，此時再次執行npm run dev，則服務端打開的 http://localhost:3000/#/ 自動成為前端的頁面。（區分一下，前端的頁面打開的是8080端口）
至此，在本地已經可以跑起來 調用后端定義的接口了，那么接下來如何將其部署到服務器上呢？
3.部署到服務器
首先想到的是 本地客戶端 執行
ssh root@39.105.97.173
連接服務器，然后使用 scp -r ./* root@39.105.97.173:/root/www/ 但是文件很多的情況下 這樣很麻煩有木有？
我們可以使用工具：Yummy FTP.app 來連接服務器，但是必須保證以下條件：
1）安裝nvm/node環境 ；
2）更新yum源；
[1] 首先備份/etc/yum.repos.d/CentOS-Base.repo mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup [2] 進入yum源配置文件所在文件夾 cd /etc/yum.repos.d/ [3] 下載阿里雲的yum源配置文件，放入/etc/yum.repos.d/(操作前請做好相應備份) centos7 wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo [4]清理 yum clean all [5]更新緩存 yum makecache yum install tree -y yum update -y
3）安裝sshd 在雲服務器 ECS Linux CentOS 7 下重啟服務不再通過 service 操作，而是通過 systemctl 操作。 操作說明如下：
查看狀態：
systemctl status sshd.service
啟動服務：
systemctl start sshd.service
重啟服務：
systemctl restart sshd.service
開機自啟：
systemctl enable sshd.service
關閉服務
systemctl stop sshd.service
下面表示已經開啟：
4）開啟服務器控制器的 安全組配置 打開22端口
5）
注意下面：端口是22 協議選擇SFTP
4 啟動服務
通過上述方法，把 除了 node_modules 文件夾部署到服務器上，然后在該文件夾下，npm install，執行npm run dev。然后訪問 http://39.105.97.173:3000/#/ （注意這里有端口），即可訪問到部署的頁面！！！