返回

Vue Cli4 搭建 Vue3 TSX 移动端项目（三）资源上传 CDN、Express 启动服务、Dockerfile

前端

在项目实际开发中，我们会面临前端静态资源存储的问题。如果项目需要搭建cdn,以及构建一个简单的server来启动项目。

这一节我们就着重来学习一下这两个问题如何解决。

一、资源上传cdn

这里我们采用阿里云的oss对象存储上传我们的静态资源。

我们首先需要获取accessKeyId, accessKeySecret, bucketName等信息。

// 创建Bucket对象
const bucket = new OSS({
  accessKeyId: 'xxxxxx', // accessKeyId
  accessKeySecret: 'xxxxxx', // accessKeySecret
  bucket: 'test-bucket', // bucketName
  region: 'oss-cn-beijing' // OSS Region
})

接下来我们新建一个js文件来上传图片。

// 图片上传
  onUploadPic() {
    const file = this.refFileUpload.value.files[0];
    if (!file) {
      return;
    }
    this.imgUrl = ''
    const fileName = new Date().getTime() + file.name;
    const filePath = 'static/' + fileName
    bucket.put(filePath, file).then((res) => {
      if (res.res.status === 200) {
        this.imgUrl = `https://test-bucket.oss-cn-beijing.aliyuncs.com/${filePath}`
        this.showMessage('上传成功')
      }
    }).catch((err) => {
      console.error(err)
    });
  }

二、Express 启动服务

项目本地的启动服务不能被其他机器所访问到，我们需要将这个服务部署到云端。

在项目的根目录创建 app.js 文件。

const express = require('express')
const app = express()
// 静态资源托管
app.use(express.static('public'))
const port = 3000
app.listen(port, () => {
  console.log(`server running at port ${port}`)
})

public文件夹和app.js文件位于同一层。

三、Dockerfile

创建Dockerfile。

FROM node:16
WORKDIR /usr/src/app
COPY package.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD [ "node", "app.js" ]

执行 docker build -t my-app . 命令构建镜像。

最后将打包好的项目推送到云端即可。

结语

这节主要介绍了使用cdn上传静态资源，启动express来发布项目和如何配置Dockerfile。

有不懂得欢迎留言交流！