最近自己做了個小項目,試着使用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