Razzle.js部署到AWS教程：EC2与S3方案对比
项目地址: https://gitcode.com/gh_mirrors/ra/razzle 你还在为Razzle.js应用的AWS部署方案纠结吗？本文将对比EC2（服务器渲染）与S3（静态托管）两种部署方案，帮助你根据项目需求选择最适合的架构。读完本文你将掌握：两种方案的完整部署流程、性能与成本对比、以及基于场景的选型建议。
方案架构对比
EC2方案：完整服务器渲染架构
EC2方案保留Razzle.js的服务器渲染（SSR）能力，适合需要SEO优化和复杂服务端逻辑的应用。架构如下：
关键特性：
- 支持服务端渲染和客户端 hydration
- 需要管理服务器配置和扩展性
- 适合动态内容和复杂交互应用
S3方案：静态导出架构
S3方案通过razzle export将应用预渲染为静态HTML，适合内容变化不频繁的营销页或文档站：
关键特性：
- 纯静态资源，无需服务器运行时
- 无限扩展性和近乎零维护成本
- 仅支持预定义路由的静态内容
EC2部署步骤
1. 准备Razzle应用
以基础示例为起点创建项目：
npx create-razzle-app --example basic my-razzle-app
cd my-razzle-app
2. 配置生产环境
创建.env.production文件设置环境变量：
NODE_ENV=production
PORT=3000
3. 启动脚本配置
确保package.json包含正确的启动命令：
"scripts": {
"start": "node build/server.js",
"build": "razzle build"
}
4. EC2实例配置
- 启动t2.micro实例（符合AWS免费套餐）
- 配置安全组开放3000端口和SSH访问
- 通过SCP传输项目文件或配置Git拉取
# 本地构建项目
yarn build
# 传输构建文件
scp -r build/ ec2-user@your-ec2-ip:/home/ec2-user/my-razzle-app/
5. 启动应用
在EC2实例上安装依赖并启动：
# 安装生产依赖
yarn install --production
# 使用PM2启动服务
npm install -g pm2
pm2 start build/server.js --name "razzle-app"
S3部署步骤
1. 创建静态导出配置
修改razzle.config.js添加静态导出配置：
module.exports = {
export: {
path: 'build/static',
// 列出所有需要预渲染的路由
routes: ['/', '/about', '/contact']
}
};
2. 生成静态文件
执行导出命令生成静态资源：
yarn build
yarn export
导出文件将生成在build/static目录，结构如下：
build/static/
├── index.html
├── about.html
├── contact.html
└── static/
├── js/
├── css/
└── media/
3. 配置S3存储桶
- 创建S3存储桶并禁用"阻止公共访问"
- 启用静态网站托管，设置索引文档为
index.html - 配置存储桶策略允许公共读取：
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::your-bucket-name/*"
}
]
}
4. 上传静态文件
使用AWS CLI或控制台上传构建产物：
aws s3 sync build/static/ s3://your-bucket-name/ --delete
性能与成本对比
性能指标
| 指标 | EC2方案 | S3方案 |
|---|---|---|
| 首屏加载 | 较慢（需服务端渲染） | 极快（CDN分发静态资源） |
| TTFB | 50-300ms | 10-50ms |
| 可扩展性 | 需手动配置Auto Scaling | 自动无限扩展 |
| 维护复杂度 | 中（服务器管理、更新） | 低（仅静态文件更新） |
成本估算（月）
| 资源 | EC2方案 | S3方案 |
|---|---|---|
| 计算资源 | $15-30（t2.micro + 弹性IP） | $0（无服务器） |
| 存储 | $1-5（应用代码和依赖） | $0.5-2（静态资源，50GB内） |
| 数据传输 | $0.15/GB | $0.15/GB |
| CloudFront | 可选（$0.02/GB） | 推荐（$0.02/GB） |
| 总计 | $16-37 | $1-4 |
场景选型指南
选择EC2的典型场景
- 动态内容网站（如电商、社交应用）
- 需要用户认证和个性化内容
- 服务端API集成（如数据库访问）
- 示例项目：examples/basic-server
选择S3的典型场景
- 营销 landing 页
- 文档站点和博客
- 产品展示页
- 示例项目：examples/basic-spa
常见问题解决
EC2实例无法访问
- 检查安全组配置，确保3000端口开放
- 验证应用是否通过PM2正确启动：
pm2 status - 查看应用日志：
pm2 logs razzle-app
S3路由404错误
- 确保启用静态网站托管并设置正确索引文档
- 检查CloudFront缓存是否需要刷新
- 对于SPA路由，配置错误页面指向index.html
性能优化建议
- EC2：配置Nginx作为反向代理并启用gzip压缩
- S3：配合CloudFront启用缓存和HTTPS
- 通用：优化Razzle构建配置，减小bundle体积：
// razzle.config.js
module.exports = {
webpack: (config, { dev, target }) => {
if (!dev && target === 'web') {
config.optimization.splitChunks = {
chunks: 'all',
minSize: 20000,
maxSize: 244000
};
}
return config;
}
};
总结
EC2和S3方案分别满足Razzle.js应用的不同部署需求：EC2提供完整的服务器渲染能力，适合动态应用；S3则以近乎零维护成本提供静态托管，适合内容站点。实际项目中可结合两者优势，采用"静态资源S3+API服务EC2"的混合架构，兼顾性能与功能需求。
部署架构没有绝对优劣，关键在于匹配项目的技术需求和预算约束。通过本文提供的步骤，你可以快速实现两种方案的部署，并根据实际运行情况进行优化调整。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
