簡(jiǎn)介：
學(xué)習(xí)如何在服務(wù)器端使用node的express輕量級(jí)框架，以及如何使用docker簡(jiǎn)單部署一個(gè)項(xiàng)目
環(huán)境：虛擬機(jī)centos7盏浙，docker。
內(nèi)容：
- 學(xué)習(xí)前端如何上傳文件
- node如何處理請(qǐng)求，以及expresss中間件的使用
- 如何使用docker部署
一.node實(shí)現(xiàn)文件上傳
- 首先建一個(gè)空項(xiàng)目，初始化
npm init -y - 安裝我們需要的依賴
npm i express multer -D - 我們使用express啟動(dòng)一個(gè)服務(wù)器疗杉，并使用multer中間件來(lái)處理上傳的文件。
根據(jù)multer的官方文檔蚕礼，我使用diskStorage的方式來(lái)處理文件的路徑以及命名
var express = require('express');
const path = require('path')
const multer = require('multer')
var app = express();//創(chuàng)建express實(shí)例
const storage = multer.diskStorage({
destination: function (req, file, cb) {
console.log(file);
cb(null, path.join(__dirname,'upload'))
},
filename: function (req, file, cb) {
console.log(file);
let name = rename(file)
cb(null,name)
}
})
const upload = multer({ storage: storage })
app.use('/upload',upload.any())
app.post('/upload',(req,res,next)=>{
res.send(`ok`)
console.log(req.files);
})
app.listen(3000,()=>{
console.log('ok');
});
- 前端頁(yè)面烟具，以及靜態(tài)資源處理
a.) 首先我們要?jiǎng)?chuàng)建一個(gè)index.html頁(yè)面來(lái)完成我們上傳文件:
注意請(qǐng)求方式以及enctype="multipart/form-data"
b.) 使用express提供的靜態(tài)資源處理的中間件express.static():<form action="/upload" method="post" enctype="multipart/form-data"> <input type="file" name="file"> <input type="submit" value="上傳"> </form>
這樣我們?cè)L問(wèn)/時(shí)會(huì)自動(dòng)加載index.htmlapp.use('/',express.static(path.join(__dirname, "public")));
完整代碼：
var express = require('express');
const path = require('path')
const multer = require('multer')
var app = express();//創(chuàng)建express實(shí)例
const storage = multer.diskStorage({
destination: function (req, file, cb) {
console.log(file);
cb(null, path.join(__dirname,'upload'))
},
filename: function (req, file, cb) {
console.log(file);
let name = rename(file)
cb(null,name)
}
})
const upload = multer({ storage: storage })
app.use('/',express.static(path.join(__dirname, "public")));
app.use('/upload',upload.any())
app.post('/upload',(req,res,next)=>{
res.send(`ok`)
console.log(req.files);
})
app.listen(3000,()=>{
console.log('ok');
});
function rename(file){
...
}
本地運(yùn)行完成后發(fā)現(xiàn)沒問(wèn)題就可以部署到服務(wù)器上了。
二.部署
使用xshell連接到我們的服務(wù)器
- 安裝docker
- 尋找鏡像：
docker sreach node - 安裝我們的運(yùn)行環(huán)境node的鏡像:
docker pull node:16.10.0--這里我選擇的版本是16.10.0是因?yàn)槲抑鳈C(jī)用的也是這個(gè)版本奠蹬，你們可以自行選擇 - 創(chuàng)建容器朝聋，并掛載一個(gè)數(shù)據(jù)卷，端口進(jìn)行映射
docker run -it/
-p 3001:3000 /
--name=n3 /
-v /home/ys/Public:/root/data-con
node:16.10.0 /bin/bash
-
完成后我們先不急著進(jìn)入到容器罩润，我們先把項(xiàng)目copy過(guò)來(lái)到我們的centos中。使用xftps或者其他方法
這里我是使用的xftp,復(fù)制到我們掛載的目錄下
image.png - 運(yùn)行容器
docker exec -it n3 /bin/bash: 此時(shí)我們?cè)谌萜髦锌梢赃M(jìn)入到數(shù)據(jù)掛載的目錄下翼馆，并使用node啟動(dòng)它
image.png - 在我們電腦上訪問(wèn)host:3001就可以訪問(wèn)到了割以。
-
上傳文件查看centos目錄下的成功金度！
image.png
image.png
如果映射端口失敗，可以重啟docker
systemctl restart docker,重新打開容器
三.總結(jié)：
項(xiàng)目中還有很多問(wèn)題严沥，時(shí)間有限沒有寫猜极。總的流程就這樣消玄，可以動(dòng)手試一試跟伏。業(yè)務(wù)代碼很簡(jiǎn)單，主要是練手翩瓜。有前端受扳，或者后端一起學(xué)習(xí)的同學(xué)可以一起交流。
