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

简介：

学习如何在服务器端使用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');
});

4. 前端页面，以及静态资源处理
   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

5. 完成后我们先不急着进入到容器，我们先把项目copy过来到我们的centos中。使用xftps或者其他方法
   这里我是使用的xftp,复制到我们挂载的目录下

   
   image.png
6. 运行容器docker exec -it n3 /bin/bash : 此时我们在容器中可以进入到数据挂载的目录下，并使用node启动它
   image.png
7. 在我们电脑上访问host:3001就可以访问到了。

8. 上传文件查看centos目录下的成功！

   
   image.png
   image.png

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