docker +node 部署vue項目的心路歷程

最近自己做了個小項目，試着使用docker來進行發布，而其中用到了node做跨越代理，就是為了解決這個問題至少多花費了我一天時間，不說了直接進入主題吧

step 1 部署環境

• 1 安裝 centos 這個是首要的 centos 7
• 2 安裝docker docker安裝配置教程

step 2 vue項目根目錄添加 node所需的 server.js

目錄機構如下

prod.server.js 內容如下

var express = require('express');
var config = require('./config/index');

var port = process.env.PORT || config.build.port;

var app = express();

var router = express.Router();
const axios = require('axios')

axios.interceptors.request.use((config) => {
  return config;
}, (error) => {
  return Promise.reject(error);
});

axios.interceptors.response.use((response) => {
  return response;
}, (error) => {
  return Promise.reject(error);
});

router.get('/', function (req, res, next) {
  req.url = '/index.html';
  next();
});

app.use(router);

var apiRoutes = express.Router();
app.use('/api', apiRoutes);

app.get('/api/getDiscList', (req, res) => {
  var url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg'
  axios.get(url, {
    headers: {
      referer: 'https://c.y.qq.com/',
      host: 'c.y.qq.com'
    },
    params: req.query
  }).then((response) => {
    res.json(response.data)
  }).catch((e) => {
    console.log('錯誤日志')
    console.log(e)
  })
}),
  app.get('/api/getMusic', (req, res) => {
    var url = 'https://c.y.qq.com/base/fcgi-bin/fcg_music_express_mobile3.fcg'
    axios.get(url, {
      headers: {
        referer: 'https://c.y.qq.com/',
        host: 'c.y.qq.com'
      },
      params: req.query
    }).then((response) => {
      res.json(response.data)
    }).catch((e) => {
      console.log('錯誤日志')
      console.log(e)
    })
  }),
  app.get('/api/getplaysongvkey', function (req, res) { // 獲取vkey
    var url = 'https://u.y.qq.com/cgi-bin/musicu.fcg'
    axios.get(url, {
      headers: {
        origin: 'https://y.qq.com',
        referer: 'https://y.qq.com/portal/player.html'
      },
      params: req.query
    }).then((response) => {
      res.json(response.data)
    }).catch((e)=>{
      console.log(e)
    })
  }),
  app.get('/api/lyric', (req, res) => {
    var url = 'https://c.y.qq.com/lyric/fcgi-bin/fcg_query_lyric_new.fcg'
    axios.get(url, {
      headers: {
        referer: 'https://c.y.qq.com/',
        host: 'c.y.qq.com'
      },
      params: req.query
    }).then((response) => {
      res.json(response.data)
    }).catch((e) => {
      console.log('錯誤日志')
      console.log(e)
    })
  }),
  app.get('/api/getSongList', (req, res) => {
    var url = 'https://c.y.qq.com/qzone/fcg-bin/fcg_ucc_getcdinfo_byids_cp.fcg'
    axios.get(url, {
      headers: {
        referer: 'https://c.y.qq.com/',
        host: 'c.y.qq.com'
      },
      params: req.query
    }).then((response) => {
      var ret = response.data
      res.json(ret)
    }).catch((e) => {
      console.log('錯誤日志')
      console.log(e)
    })
  }),
  app.get('/api/suggestSearch', (req, res) => {
    var url = 'https://c.y.qq.com/soso/fcgi-bin/search_for_qq_cp'
    axios.get(url, {
      headers: {
        referer: 'https://c.y.qq.com/',
        host: 'c.y.qq.com'
      },
      params: req.query
    }).then((response) => {
      var ret = response.data
      res.json(ret)
    }).catch((e) => {
      console.log('錯誤日志')
      console.log(e)
    })
  })

app.use(express.static('./dist'));

module.exports = app.listen(port, function (err) {
  if (err) {
    console.log(err);
    return
  }
  console.log('Listening at http://localhost:' + port + '\n')
});

與此同時修改package.json 中 node的啟動腳本，如下

  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "node prod.server.js",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
  },
  

將"start": "npm run dev" 改為 "start": "node prod.server.js"
因為直接使用 npm run dev 將無法完成node的代理
會出現調用api接口報錯

step 3 執行npm run build 后將dist目錄上傳到centos

# 執行 ll 查看已上傳的文件
[root@VM_0_5_centos vuedev]# ll
total 20
drwxr-xr-x 2 root root 4096 Jul 28 09:01 config
drwxr-xr-x 3 root root 4096 Jul 28 09:01 dist
-rw-r--r-- 1 root root  404 Jul 28 09:02 Dockerfile
-rw-r--r-- 1 root root 2612 Jul 28 09:01 package.json
-rw-r--r-- 1 root root 3253 Jul 28 09:01 prod.server.js

同時在該目錄創建一個Dockerfile用於鏡像制作，文件內容如下

FROM docker.io/node:8.0-alpine

# Create app directory
WORKDIR /usr/src/vueappdev

# Install app dependencies
# A wildcard is used to ensure both package.json AND package-lock.json are copied
# where available (npm@5+)
COPY package*.json ./

RUN npm install

# If you are building your code for production
# RUN npm ci --only=production

# Bundle app source
COPY . .

EXPOSE 9009
CMD [ "npm", "start" ]

Dockerfile文件就很多中配置，還有待研究…

step 4 制作鏡像

#cd 到項目目錄下
[root@VM_0_5_centos ~]# cd /opt/web_proj/vuedev

# 執行鏡像創建 （注意最后的 . 標識使用當前目錄下的Dockerfile）
[root@VM_0_5_centos vuedev]# docker build -t vuedev:v1 .

# 執行完上面步驟，現在可以看見你創建的images了
[root@VM_0_5_centos vuedev]# docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
vuedev              v1                  ac171f1d6b87        21 hours ago        239 MB

step 5 容器創建

# 創建並運行容器
[root@VM_0_5_centos vuedev]# docker run -p 8191:8009 --name vuedev2 -d vuedev:v1

# 查看容器運行日志
[root@VM_0_5_centos vuedev]# docker logs -f -t --tail 200 vuedev2
2019-07-26T02:59:30.093574000Z npm info it worked if it ends with ok
2019-07-26T02:59:30.094162000Z npm info using npm@5.0.0
2019-07-26T02:59:30.094450000Z npm info using node@v8.0.0
2019-07-26T02:59:30.137340000Z npm info lifecycle vue-music@1.0.0~prestart: vue-music@1.0.0
2019-07-26T02:59:30.143459000Z npm info lifecycle vue-music@1.0.0~start: vue-music@1.0.0
2019-07-26T02:59:30.147283000Z > vue-music@1.0.0 start /usr/src/vueappdev
2019-07-26T02:59:30.147534000Z > node prod.server.js
2019-07-26T02:59:30.404213000Z Listening at http://localhost:8009

# 查看容器運行情況 【運行后見 STATUS 處於 Up 標識正在運行】
[root@VM_0_5_centos vuedev]# docker ps 
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                               NAMES
6141d4fda6c9        vuedev:v1           "npm start"              21 hours ago        Up 21 hours         9009/tcp, 0.0.0.0:8191->8009/tcp    vuedev2

# 使用wget進行端口檢測【運行后見 response... 200 ok 信息標識端口測試成功】
[root@VM_0_5_centos vuedev]# wget localhost:8191
--2019-07-27 08:44:10--  http://localhost:8191/
Resolving localhost (localhost)... 127.0.0.1, ::1
Connecting to localhost (localhost)|127.0.0.1|:8191... connected.
HTTP request sent, awaiting response... 200 OK
Length: 514 [text/html]
Saving to: ‘index.html.4’

100%[=================================================================================================================================================>] 514         --.-K/s   in 0s      

2019-07-27 08:44:10 (61.4 MB/s) - ‘index.html.4’ saved [514/514]

# 假如我們檢測了一個不存在的端口【結果會是如下】
[root@VM_0_5_centos vuedev]# wget localhost:8190
--2019-07-27 08:45:14--  http://localhost:8190/
Resolving localhost (localhost)... 127.0.0.1, ::1
Connecting to localhost (localhost)|127.0.0.1|:8190... failed: Connection refused.
Connecting to localhost (localhost)|::1|:8190... failed: No route to host.

【注意】在執行docker run -p 8191:8009 --name vuedev2 -d vuedev:v1
運行容器的時候，端口的指定要小心，不然會被坑；
其中的8191指的是容器向外暴露的端口，而8009這個就要注意了（我當時就沒弄明白）
這個並不是Dockerfile中的 EXPOSE 9009
而是 vue中config>index.js 文件里
build:{ port:8009, }
中的 8009

如果你不需要node進行api代理（就是沒有修改package.json的script） 如

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",
    "start": "npm run dev",
    "build": "node build/build.js"
  },

那么端口就應該是
dev: { port: 18080, }
中的 18080

---

到此項目部署圓滿完成 ；在手機瀏覽器中輸入 https://whaala.com/vueapp/即可訪問頁面，如果使用PC請F12轉到手機模式預覽，因為這是一個移動版app
該項目源碼訪問地址：https://github.com/dengxiaoning/vue-music

---