如何用SvelteKit实现类Django/Flask的经典SSR并部署到AWS EC2？

一、配置SvelteKit为经典SSR模式 #

1. 初始化项目 #

npm create svelte@latest classic-ssr-app
cd classic-ssr-app
npm install

选择项目类型时选Skeleton project，避免引入不必要的客户端交互代码。

2. 全局禁用Hydration并强制SSR #

在项目根目录创建src/hooks.server.js，统一控制所有页面的渲染行为：

export async function handle({ event, resolve }) {
  const response = await resolve(event, {
    hydrate: false, // 完全关闭客户端Hydration
    ssr: true       // 强制所有页面使用服务端渲染
  });
  return response;
}

如果需要单独配置某页面，可在对应+page.svelte中添加：

<script>
  export const ssr = true;
  export const hydrate = false;
</script>

<h1>纯服务端渲染页面</h1>
<p>此页面无任何客户端JS执行，完全由服务端生成HTML返回</p>

3. 配置Adapter-Node #

使用adapter-node生成可部署的Node服务：

npm install @sveltejs/adapter-node --save-dev

修改svelte.config.js替换默认适配器：

import adapter from '@sveltejs/adapter-node';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: vitePreprocess(),
  kit: {
    adapter: adapter({
      out: 'build' // 构建输出目录
    })
  }
};

export default config;

4. 构建项目 #

npm run build

构建完成后，build目录即为可运行的Node服务代码。

二、AWS EC2环境准备 #

1. 创建EC2实例 #

• 选择Ubuntu Server 22.04 LTS（或其他Linux发行版）
• 安全组开放端口：22（SSH）、80（HTTP）、443（HTTPS，可选）、3000（Node服务端口）
• 下载密钥对，用于SSH连接实例

2. 安装依赖 #

SSH连接实例后执行：

# 更新系统
sudo apt update && sudo apt upgrade -y

# 安装Node.js（v20版本为例）
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs

# 安装Nginx
sudo apt install nginx -y

# 安装PM2（管理Node进程）
sudo npm install -g pm2

三、部署SvelteKit应用 #

1. 上传构建文件 #

用SCP将本地build目录传到EC2（替换密钥路径和实例IP）：

scp -i /path/to/your-key.pem -r build ubuntu@your-ec2-ip:/home/ubuntu/

2. 启动Node服务 #

cd /home/ubuntu/build
pm2 start index.js --name classic-ssr-app

验证服务状态：

pm2 status
# 查看运行日志
pm2 logs classic-ssr-app

此时访问http://your-ec2-ip:3000即可看到渲染后的页面。

四、配置Nginx反向代理 #

1. 创建Nginx配置文件 #

sudo nano /etc/nginx/sites-available/classic-ssr-app

添加以下配置：

server {
    listen 80;
    server_name your-domain.com; # 替换为你的域名，无域名则留空用EC2 IP

    location / {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # 静态资源单独配置（如有）
    location /static {
        root /home/ubuntu/build;
        expires 30d;
    }
}

2. 启用配置并重启Nginx #

# 链接配置到启用目录
sudo ln -s /etc/nginx/sites-available/classic-ssr-app /etc/nginx/sites-enabled/

# 检查配置语法
sudo nginx -t

# 重启Nginx
sudo systemctl restart nginx

现在访问http://your-ec2-ip或你的域名，即可通过Nginx反向代理访问经典SSR服务。

五、可选：配置HTTPS（Let's Encrypt） #

sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d your-domain.com

Certbot会自动生成SSL证书并修改Nginx配置，完成HTTPS部署。

内容的提问来源于stack exchange，提问作者Alok