阿里云实现Serverless+ Express的服务端渲染

AWS通过lambda实现后端服务的serverless部署。阿里云对标的函数计算也可以实现相应的功能。

预备知识:

  • nodejs
  • express
  • 阿里云函数计算
  • 阿里云API网关
实现:
一、 安装依赖

首先我们需要初始化一个工程。

npm init

使用alicloud-serverless-express

npm install express  alicloud-serverless-express
二、

安装完依赖后,我们需要开始编写一个helloworld 代码。
首先我们需要一个express实例

// app.js
const express = require('express')
const app = express()

app.get('/', function (req, res) {
      res.send('Hello World!')
})

//app.listen(8080);
module.exports = app;

然后我们需要通过alicloud-serverless-express来启动express server。其中exports.handler是函数计算的入口函数。详见 Nodejs 函数入口

// index.js
const alicloudServerlessExpress = require('alicloud-serverless-express');
const app = require('./app');
const server = alicloudServerlessExpress.createServer(app);
 
exports.handler = (event, context, callback) =>{
    try{
        event = JSON.parse(event.toString());
    }catch(err){
        console.log('local event')
    }
    alicloudServerlessExpress.proxy(server, event, callback);
}

在阿里云的serverless express实现过程中。我们使用API 网关(以函数计算作为API网关后端服务)暴露外部API, 使用函数计算命令行工具 fun实现API 网关和函数计算的一键部署。

三、 fun 部署

首先,需要编写template.yml:
template.yml:

Resources:
  fc-demo:
    Type: 'Aliyun::Serverless::Service'
    Properties:
      Description: 'fc service '
    feedback: 
      Type: 'Aliyun::Serverless::Function'
      Properties:
        Handler: index.handler
        Runtime: nodejs8
        CodeUri: './'
        Timeout: 60
  apigateway_demo:
    Type: 'Aliyun::Serverless::Api'
    Properties:
      StageName: RELEASE
      DefinitionBody:
        '/':
          get: 
            x-aliyun-apigateway-api-name: demo 
            x-aliyun-apigateway-description: api gateway of demo
            x-aliyun-apigateway-request-config:
              requestMode: "PASSTHROUGH"
              requestProtocol: "http,https"
            x-aliyun-apigateway-visibility: PUBLIC
            x-aliyun-apigateway-fc:
              arn: acs:fc:::services/${fc-demo.Arn}/functions/${feedback.Arn}/
              timeout: 3000

注意,这里的template.yml的存放路径和函数计算的CodeUri: './'是具有直接联系的,当CodeUri'./'时,需要将template.ymlindex.js放在同级目录下。
最后,在template.yml所在的目录下执行:

fun deploy
<think>嗯,用户想了解做动态网站最好的方式。首先,我需要考虑动态网站的基本构成,通常包括前端、后端、数据库和服务器。然后,得想想当前流行的技术栈,比如前端可能有React、Vue,后端有Node.js、Python的Django或Flask,数据库的话MySQL、PostgreSQL或者MongoDB之类的。还有,是否需要考虑全栈框架,比如Next.js或者Nuxt.js,这些可能简化开发流程。 用户可能对技术选型不太熟悉,可能需要比较不同技术的优缺点。比如,Node.js适合实时应用,Python的Django适合快速开发,但性能可能不如Go。数据库方面,关系型和非关系型的区别也很重要,得根据项目需求选择。 另外,部署和运维也是关键。云服务如AWS、阿里云,或者使用Serverless架构,比如Vercel、Netlify,这些都可能影响开发方式。安全性、性能优化、SEO等因素也不能忽视,特别是对于动态内容,可能需要服务端渲染(SSR)或静态站点生成(SSG)。 用户可能关心学习曲线和社区支持,所以推荐成熟、文档丰富的技术会更合适。还有,是否需要考虑前后端分离,RESTful API还是GraphQL,这些架构决策也很重要。最后,案例或最佳实践可能会有帮助,比如介绍一个典型的MERN或MEAN栈项目流程。</think>好的,我将从技术栈选择、开发流程和最佳实践三个方面为您介绍动态网站开发的主流方式: 一、技术栈选择(2023主流方案) 1. 前端框架: - React + Next.js(推荐SSR服务端渲染) - Vue3 + Nuxt.js - SvelteKit(新兴轻量框架) 2. 后端开发: ▎全栈方案: - Next.js(Node.js)API Routes - Nuxt.js Server Handlers - Remix(新兴全栈框架) ▎独立后端: - Node.js(Express/NestJS) - Python(Django/Flask/FastAPI) - Go(Gin/Echo) 3. 数据库: - PostgreSQL(关系型首选) - MySQL/MariaDB - MongoDB(文档型数据库) - Redis(缓存数据库) 4. 部署方案: - Vercel(Next.js官方部署平台) - Netlify - AWS EC2/Lambda - Docker + Kubernetes(复杂项目) 二、开发流程建议 1. 现代开发范式: ```jsx // 示例:Next.js页面 + Prisma ORM export async function getServerSideProps() { const posts = await prisma.post.findMany(); return { props: { posts } }; } export default function Home({ posts }) { return ( <div> {posts.map(post => ( <article key={post.id}> <h2>{post.title}</h2> <p>{post.content}</p> </article> ))} </div> ) } ``` 2. 推荐架构模式: - JAMStack:JavaScript + API + Markup - Serverless架构(AWS Lambda/Vercel Functions) - 混合渲染(SSG+SSR+CSR组合使用) 三、最佳实践建议 1. 性能优化: - 使用CDN加速静态资源 - 实现代码分割(Code Splitting) - 添加SWR/React-Query客户端缓存 2. 安全防护: - 实施CORS策略 - 使用helmet等安全中间件 - 定期更新依赖库(npm audit) 3. 开发效率工具: - TypeScript(强类型检查) - Prisma(现代ORM工具) - Storybook(组件驱动开发) 案例参考:中型电商网站技术选型 1. 前端:Next.js + TypeScript 2. 后端:NestJS(Node.js框架) 3. 数据库:PostgreSQL(主库) + Redis(缓存) 4. 搜索:ElasticSearch 5. 部署:Vercel(前端) + AWS ECS(后端) 学习路线建议: 1. 先掌握HTML/CSS/JavaScript基础 2. 选择React或Vue其中一个深入 3. 学习Node.js基础和后端开发原理 4. 实践全栈框架(如Next.js) 5. 掌握数据库设计和优化 当前趋势: - 边缘计算(Edge Computing) - 服务端组件(React Server Components) - 渐进式Web应用(PWA) - WebAssembly集成 建议从Next.js开始入门,其文件路由系统、混合渲染模式和Vercel的无缝部署能快速构建生产级应用。对于需要更高定制化的项目,可采用前后端分离架构(如React + Express)。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值