搬瓦工部署 Remix 全栈框架教程

Remix 是一款基于 React 的全栈 Web 框架，强调 Web 标准和渐进增强。它提供了优秀的数据加载模式、嵌套路由和表单处理能力，能够构建高性能的 Web 应用。本文将介绍如何在搬瓦工 VPS 上部署 Remix 应用。购买搬瓦工 VPS 请参考全部方案，使用优惠码 NODESEEK2026 可享受 6.77% 的折扣。

一、环境准备

apt update && apt upgrade -y
curl -fsSL https://deb.nodesource.com/setup_20.x | bash -
apt install -y nodejs git
npm install -g pm2

二、创建 Remix 项目

cd /opt
npx create-remix@latest myapp
cd myapp
npm install

2.1 项目结构

# /opt/myapp/
#   app/
#     routes/      - 路由文件
#     root.tsx     - 根布局
#   public/        - 静态资源
#   remix.config.js

三、构建应用

cd /opt/myapp
npm run build

四、使用 PM2 运行

cat > /opt/myapp/ecosystem.config.js << 'EOF'
module.exports = {
  apps: [{
    name: 'remix-app',
    script: 'npm',
    args: 'start',
    cwd: '/opt/myapp',
    env: {
      NODE_ENV: 'production',
      PORT: 3000
    },
    instances: 1,
    autorestart: true,
    max_memory_restart: '500M'
  }]
};
EOF

pm2 start ecosystem.config.js
pm2 save
pm2 startup

五、Nginx 反向代理

apt install nginx -y

cat > /etc/nginx/sites-available/remix.conf << 'EOF'
server {
    listen 80;
    server_name yourdomain.com;

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        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;
        proxy_cache_bypass $http_upgrade;
    }

    location /build/ {
        alias /opt/myapp/public/build/;
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}
EOF

ln -sf /etc/nginx/sites-available/remix.conf /etc/nginx/sites-enabled/
rm -f /etc/nginx/sites-enabled/default
nginx -t && systemctl restart nginx

六、SSL 证书

apt install certbot python3-certbot-nginx -y
certbot --nginx -d yourdomain.com

七、自动部署

cat > /opt/myapp/deploy.sh << 'EOF'
#!/bin/bash
cd /opt/myapp
git pull origin main
npm install
npm run build
pm2 restart remix-app
echo "[$(date)] Remix app deployed"
EOF
chmod +x /opt/myapp/deploy.sh

八、常用 PM2 命令

# 查看应用状态
pm2 status

# 查看日志
pm2 logs remix-app

# 重启应用
pm2 restart remix-app

# 监控资源
pm2 monit

九、常见问题

应用启动失败

查看 PM2 日志排查错误：pm2 logs remix-app --lines 50。常见原因包括端口被占用、构建产物缺失等。确保先执行 npm run build。

静态资源 404

确认 Nginx 配置中 /build/ 路径指向正确的目录。Remix 的静态资源默认构建到 public/build/。

总结

Remix 是构建全栈 Web 应用的优秀框架，强调 Web 标准和性能。在搬瓦工 VPS 上配合 PM2 和 Nginx 可以稳定运行。其他全栈框架教程还有 Nuxt.js、SvelteKit 等。购买搬瓦工 VPS 请访问 bwh81.net，使用优惠码 NODESEEK2026 可享受 6.77% 的折扣。