npm 包 mimosa-s3-deployer 使用教程

AI 编程助手,豆包旗下的编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力,支持 VSCode,点击体验 AI

介绍

本文将介绍如何使用 npm 包 mimosa-s3-deployer 来将前端应用部署至 AWS S3 上。mimosa-s3-deployer 是 Mimosa 框架的一个插件,它通过 AWS SDK 实现了将前端静态资源上传至 S3,并支持对上传的资源进行缓存和版本控制。

在学习本文之前,您需要:

  • 熟悉 Mimosa 框架及其配置文件
  • 拥有一份 AWS S3 的基本使用经验

提示:若您还不熟悉 Mimosa 或 AWS S3,可以先参考官方文档和相关教程。

安装

mimosa-s3-deployer 可以通过 npm 安装,使用以下命令安装最新版本:

--- ------- ---------- ------------------

配置

在 Mimosa 应用的配置文件中,需要添加以下配置项来启用 mimosa-s3-deployer 插件:

-------------- - -
  -- ---
  -------- -
    -- ---
    -------------
  --
  --------- -
    --- -
      ------------ ----- ------ --- -----
      ---------------- ----- ------ ------ ------
      ------- ---- ------ -------
      ------- ---- ------ --------
    -
  -
--
  • accessKeyIdsecretAccessKey 是您 AWS 账号的 Access Key 和 Secret Access Key,用于连接 AWS SDK。
  • bucket 是您在 S3 上创建的应用存储桶的名称,用于上传文件和配置应用访问权限。
  • region 是您在 S3 上创建的存储桶所在区域的名称。推荐使用 us-east-1 作为默认配置。

如果您的 AWS 账号已经拥有对 S3 的访问权限,则可以直接使用以上配置项。

使用

在配置好 s3-deployer 插件后,使用以下命令部署您的前端应用至 S3:

------ ------ --

其中 -D 参数将会向 S3 存储桶上传包含所有前端静态资源的 zip 文件,并将其压缩并缓存在 S3 上。

参数

mimosa-s3-deployer 还支持其他配置参数:

-------- -
  --- -
    -- ---
    ------------- --------------- ------ --------
    ------- ------ -- ------ -- ------ -------- -- ---- ------
    ----- -----
    ------- --------- ------ --------
    ------------------ ------ ------ --- ------ -----------
    ----- -
      ----- -- --- ------- ----- -- --- -------
    --
    -------- -
      -------- -----
      ------------ ----
    -
  -
-
  • cacheControl 表示上传资源存储期间 HTTP 响应头 Cache-Control 的值,用于客户端缓存管理。授权期间,HTTP 缓存可以减少与服务器的交互次数,从而提高性能。
  • folder 表示上传的文件夹路径,相对于 S3 存储桶的根路径。如果设置为 "my/app",部署工具将在存储桶中新建 "my/app" 文件夹,然后将静态资源放入其中。
  • gzip 表示是否对上传的静态资源开启 gzip 压缩。默认为 true
  • maxAge 表示上传资源的存储期,存储期结束后 S3 将会清理过期的资源。该参数会设置 HTTP 响应头 Cache-Control 文件的过期时间。 如果您不需要缓存,则可以将其设置为 0
  • objectKeyTemplate 表示上传资源在 S3 上存储的路径模板,其中 {{version}}{{fileName}} 分别代表版本号和文件名。
  • tags 表示上传资源时为每个对象(文件)自动添加的标记键值对。
  • vBucket.enabled 表示是否开启上传资源的版本控制。默认为 true
  • vBucket.withWebRoot 表示是否在上传资源的基础路径上附加版本号。开启后,版本控制将不仅仅是在 S3 上创建一个版本化的存储桶,而且还将创建一个包含应用的版本基础路径。

示例

deploer.S3 中定义以下参数,配置上传至 S3:

-------- -
  --- -
    ------------ ----- ------ --- -----
    ---------------- ----- ------ ------ ------
    ------- ---- ------ -------
    ------- ---- ------ ---------
    ------------- ----------------
    ------- ---------
    ----- -
      -------- -------
    --
    -------- -
      -------- -----
      ------------ ----
    -
  -
-

执行以下命令,部署前端应用至 S3:

------ ------ --

上传完成后,您将会得到:

  • 存储桶中包含了压缩过的前端静态资源,以及 index.htmlpackage.jsonmimosa-config.js 等部署工具所需文件,它们位于 my/app/1/ 目录下,其中 "1" 是部署工具自动生成的版本号。
  • 上传完成后,存储桶中的标记 myTag 已被自动应用。

总结

本文介绍了如何使用 npm 包 mimosa-s3-deployer 将前端应用部署至 AWS S3 上。通过定义合适的配置参数,您可以自由控制上传资源的路径、版本、缓存和标记等属性。相信本文可以让您快速掌握 Mimosa 部署插件的使用方法,同时也对前端应用部署和 S3 存储技术有了更深入的了解。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60066f471d8e776d08041046


猜你喜欢

  • npm 包 midify-numark-dj2go 使用教程

    简介 midify-numark-dj2go 是一个用于操作 Numark dj2go 控制器的 npm 包,可以让你通过 JavaScript 操作 Numark dj2go 控制器,在 Web 应...

    4 年前
  • npm 包 mimi-grep 使用教程

    在前端开发中,我们常常需要在项目中搜索特定的字符串。mimi-grep 是一个使用 Node.js 编写的 npm 包,能够帮助我们方便地实现搜索功能。 安装和使用 首先,你需要在你的项目中安装 mi...

    4 年前
  • npm 包 mimi-ftl 使用教程

    什么是 mimi-ftl? mimi-ftl 是一款基于模板引擎 freemarker 的简化版模板引擎,旨在解决前端模板渲染效率和代码质量问题。 主要特点: 去除复杂的 freemarker 语法...

    4 年前
  • npm 包 mimic-it 使用教程

    介绍 mimic-it 是一款 npm 包,可以帮助你在测试 React 组件时,生成类似真实数据的模拟数据。这样,在测试时,我们可以更加快速、高效地测试各种场景的 React 组件。

    4 年前
  • npm 包 mimic-two-way 使用教程

    介绍 mimic-two-way 是一个用来模拟两个对象双向绑定的 npm 包。通过模拟双向绑定,我们可以实现对某个对象的任何更改都会同步到另一个对象上,这样就能达到数据同步的目的。

    4 年前
  • npm 包 midiguchi 使用教程

    如果你是一名前端开发人员,并且使用 Vue、React、Angular 或其他框架,那么使用 midiguchi 这个 npm 包可以让你更方便地处理鼠标或触摸事件。

    4 年前
  • npm 包 midimal 使用教程

    Midimal 是一款基于 JavaScript 和 Web Audio API 的 MIDI 库。它可以让你在浏览器中生成和播放 MIDI 音乐。本文将介绍如何使用 midimal。

    4 年前
  • npm 包 midiplayer 使用教程

    midiplayer 是一个基于 JavaScript 的简单、轻量级的 MIDI 播放器库,它允许你通过浏览器播放 MIDI 文件。这个库提供了一些常用的 MIDI 操作方法,比如暂停、播放、循环等...

    4 年前
  • npm 包 midinette 使用教程

    前言 midinette 是一种基于 Web MIDI API 和 Web Audio API 开发的 JavaScript 库,它可以让你在 Web 应用程序中简化 MIDI 事件的处理和音频效果的...

    4 年前
  • npm 包 midisrv 使用教程

    midisrv 是一个用于在 Node.js 中运行 MIDI 服务器的 npm 包。它能够创建和管理 MIDI 连接和端口,并支持 Websockets 和 TCP 连接,用于与 MIDI 控制器或...

    4 年前
  • npm 包 midi-wtf 使用教程

    什么是 midi-wtf midi-wtf 是一个处理 MIDI 文件的 JavaScript 库,它是从 midi-json 派生而来,用于从 MIDI 文件中解析出数据,并提供一些便利的功能来操作...

    4 年前
  • npm 包 mimext 使用教程

    在前端开发中,有时需要根据文件的扩展名来判断文件类型,并进行相关操作。NPM 包 mimext 就是一个帮助开发者处理文件类型与扩展名的工具包。 安装 在项目中使用 mimext 前,需要先安装,可以...

    4 年前
  • npm 包 micro-template-loader 使用教程

    在前端开发中,模板引擎是相当常见的工具,因为它可以让我们更加方便地生成 HTML 代码,同时也可以帮助我们实现前后端分离。在使用模板引擎的过程中,可能会遇到需要将模板文件编译为 JS 文件的情况,这时...

    4 年前
  • npm 包 mindmap-node 使用教程

    npm 包 mindmap-node 使用教程 mindmap-node 是一个基于 Node.js 的 npm 包,它可以帮助我们快速创建我们自己的思维导图。在这篇文章中,我们将探讨如何使用 min...

    4 年前
  • npm 包 mindmup-mapjs-layout 使用教程

    在前端开发中,有许多工具可以帮助我们更高效地完成任务。其中,npm 是一个十分重要的工具。npm 官方网站(https://www.npmjs.com/)上有数以万计的包,涵盖了各个领域和技术栈。

    4 年前
  • npm 包 mimo 使用教程

    介绍 mimo 是一个为 web 前端开发者提供的命令行神器工具,可以大大简化前端工程的搭建和管理,减少了很多重复性工作。mimo 内置了许多常用的工具和模板,支持快速创建项目、提供开箱即用的脚手架、...

    4 年前
  • npm 包 mimisbrunnr 使用教程

    简介 mimisbrunnr 是一款适用于前端的 npm 包,用于将多个 js 文件合并成一个 js 文件以用于生产环境。该包使用简单,但其背后的原理却非常复杂。本篇文章将教你如何使用该包,同时探讨其...

    4 年前
  • npm 包 mimodal 使用教程

    在前端开发过程中,我们常常会使用到各种各样的库和框架,其中之一就是 mimodal,它是一个轻量级的 Modal 弹窗插件,具有简单易用、可定制性强等特点,可以帮助我们快速实现弹出层的功能,提高用户体...

    4 年前
  • npm 包 midium 使用教程

    介绍 Midium 是一个轻量级的前端组件库,它提供了一系列基础组件、功能组件和 UI 组件,可以用来快速构建 Web 应用。 Midium 是基于 React 技术栈实现的,它是通过 npm 包的形...

    4 年前
  • npm 包 midium-core 使用教程

    在前端开发中,使用 npm 包已成为日常工作的重要部分。其中,midium-core 是一款非常优秀的 npm 包,可以帮助开发者完成日常开发中的各种需求。本文将详细介绍 midium-core 的使...

    4 年前

相关推荐

    暂无文章