NUXT SSR 到 Serverless 全站部署-JavaScript中文网-JavaScript教程资源分享门户

NUXT SSR 到 Serverless 全站部署

随着云计算技术的不断发展，Serverless 架构开始成为互联网应用的新趋势。相比传统的后端部署方式，Serverless 架构不仅可以将成本和流量成本降低至最低，还能够为前端提供更加稳定高效的服务。在这篇文章中，我们将会探讨 NUXT 在 Serverless 环境下的部署方式及其优缺点。

一、NUXT SSR 原理简述

NUXT 是一个基于 Vue.js 的高级应用框架，它通过对 Vue.js 进行扩展，让我们能够使用它来开发 SSR（服务器端渲染）应用。简单来说，它能够让我们的 Vue.js 框架在服务器端被渲染，并将它返回给客户端浏览。这样客户端可以直接获取到渲染出来的 HTML 和 JS，而不需要等待浏览器完成加载 JS 后再去渲染页面，从而提高了应用的初始加载速度和 SEO 优化效果。

二、NUXT SSR 到 Serverless 部署全程

2.1. 使用 Serverless 框架初始化项目

使用 Serverless Framework，我们可以快速地创建一个 Serverless 应用程序。

通过 npm 安装 Serverless 中央套件：

npm install -g serverless

然后在终端中运行以下命令，初始化项目：

serverless create --template aws-nodejs --path my-service

2.2. 创建 NUXT SSR 项目

在终端中运行以下命令，用 NUXT-cli 创建一个空的 NUXT 项目：

npx create-nuxt-app my-app

2.3. 将 NUXT SSR 项目部署到 AWS Lambda

要将我们的 NUXT SSR 项目部署到 AWS Lambda 服务上，可以借助于 AWS 的 serverless-http 库。以下是完整的 serverless.yml 文件：

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

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

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

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

该文件中，我们需要指定 name, runtime, region, stage, functions, 和 plugins 等信息，其中，functions 节点中的 handler 指定了用于处理请求的 Lambda 函数，events 节点指定了 API Gateway 的 URL path，这里使用了一个通配符 {proxy+} 表示除了我们指定的 API endpoint 之外的所有请求都会被处理。同时，为了实现最佳的 Caching、性能和可扩展性，我们可以在 Configuration UI 中为此服务配置使用自己帐户下的域名。

2.4. 上传代码

上传代码到 AWS 中：

sls deploy

2.5. 访问服务

访问 URLs:

# API Gateway static URLs:
# - https://{id}.execute-api.{region}.amazonaws.com/dev
# - https://{id}.execute-api.{region}.amazonaws.com/dev/{proxy}

注意: 这种方式下 Lambda 代码实现中不需要额外配置 Nginx 或 Apache，但存在一定的缺点：Lambda 内存和 CPU 限制高，且无法本地调试。

三、优缺点分析

3.1. 优点

NUXT SSR 可以极大的提高网站的 SEO 优化效果，搜索引擎抓取页面内容比单页应用更容易
NUXT SSR 在浏览器加载过程中能够提供更好的初始加载性能，因为页面的整个页面内容已经在服务端渲染并由服务器直接返回
Serverless 架构的应用可以动态分配计算资源（在 AWS 中为 Lambda 函数），允许应用根据当前所需最优情况提供计算能力
Serverless 架构允许应用按请求进行扩展，让应用根据活动需求来提供计算能力

3.2. 缺点

Serverless 架构的应用在开发阶段需要克服学习 Serverless 架构的学习曲线和规范性
由于 Serverless 架构运行在云端，因此需要对服务提供商的限制，例如 Lambda 针对 Node.js 的版本和限制等
部署和调试会比部署到传统服务器上复杂得多

四、总结

在这篇文章中，我们探讨了如何通过 Serverless 架构将 NUXT SSR 项目进行部署，并分析了 Serverless 架构的优缺点。Serverless 架构极大地促进了前端开发效率的提高和服务架构的升级，但在使用中仍需要重视性能、安全和资源管理的问题。我们期望这篇文章能够帮助您理解 NUXT SSR 到 Serverless 全站部署，并启发您在实际应用中进行实践。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/647ead0248841e9894e6068b