將koa+vue部署到服務器

好久好久之前，就對先後端如何分離，後端如何把代碼部署到服務器有濃厚的興趣，最近在阿里雲上申請了一個服務器，試試水吧！

本文參考了文章《基於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/#/ （注意這裏有端口），便可訪問到部署的頁面！！！