轻巧

node实现上传文件以及使用centos7+docker部署前端

2022-10-17  本文已影响0人  Link9527

简介:

学习如何在服务器端使用node的express轻量级框架,以及如何使用docker简单部署一个项目
环境:虚拟机centos7,docker。
内容:

  1. 学习前端如何上传文件
  2. node如何处理请求,以及expresss中间件的使用
  3. 如何使用docker部署

一.node实现文件上传

  1. 首先建一个空项目,初始化npm init -y
  2. 安装我们需要的依赖npm i express multer -D
  3. 我们使用express启动一个服务器,并使用multer中间件来处理上传的文件。
    根据multer的官方文档,我使用diskStorage的方式来处理文件的路径以及命名
var express = require('express');
const path = require('path')
const multer = require('multer')

var app = express();//创建express实例

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');
});

  1. 前端页面,以及静态资源处理
    a.) 首先我们要创建一个index.html页面来完成我们上传文件:
    注意请求方式以及enctype="multipart/form-data"
    <form action="/upload" method="post" enctype="multipart/form-data">
        <input type="file" name="file">
        <input type="submit" value="上传">
    </form>
    
    b.) 使用express提供的静态资源处理的中间件express.static():
    这样我们访问/时会自动加载index.html
     app.use('/',express.static(path.join(__dirname, "public")));
    

完整代码:

var express = require('express');
const path = require('path')
const multer = require('multer')

var app = express();//创建express实例

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){
   ...
}

本地运行完成后发现没问题就可以部署到服务器上了。

二.部署

使用xshell连接到我们的服务器

  1. 安装docker
  2. 寻找镜像:docker sreach node
  3. 安装我们的运行环境node的镜像: docker pull node:16.10.0 --这里我选择的版本是16.10.0是因为我主机用的也是这个版本,你们可以自行选择
  4. 创建容器,并挂载一个数据卷,端口进行映射
docker run -it/
 -p 3001:3000 / 
--name=n3 /
-v /home/ys/Public:/root/data-con 
node:16.10.0 /bin/bash
  1. 完成后我们先不急着进入到容器,我们先把项目copy过来到我们的centos中。使用xftps或者其他方法
    这里我是使用的xftp,复制到我们挂载的目录下


    image.png
  2. 运行容器docker exec -it n3 /bin/bash : 此时我们在容器中可以进入到数据挂载的目录下,并使用node启动它
    image.png
  3. 在我们电脑上访问host:3001就可以访问到了。
  4. 上传文件查看centos目录下的成功!


    image.png
    image.png

如果映射端口失败,可以重启docker systemctl restart docker,重新打开容器
三.总结:
项目中还有很多问题,时间有限没有写。总的流程就这样,可以动手试一试。业务代码很简单,主要是练手。有前端,或者后端一起学习的同学可以一起交流。

上一篇 下一篇

猜你喜欢

热点阅读