Razzle项目单端口开发模式配置指南

Razzle项目单端口开发模式配置指南

razzle ✨ Create server-rendered universal JavaScript applications with no configuration 项目地址: https://gitcode.com/gh_mirrors/ra/razzle

什么是Razzle单端口模式

Razzle是一个现代化的服务端渲染(SSR)框架构建工具，它默认会在开发模式下使用两个端口：一个用于前端资源服务(通常是3001端口)，另一个用于Node.js服务器(通常是3000端口)。这种双端口模式虽然方便，但在某些特定场景下可能会带来不便。

单端口模式通过配置让所有开发请求都通过同一个端口(通常是3000)进行处理，这特别适合以下场景：

1. 需要模拟生产环境单端口行为
2. 开发环境存在跨域限制
3. 需要与转发服务(如Nginx)配合使用

快速开始单端口模式

要创建一个使用单端口模式的Razzle项目，可以执行以下命令：

npx create-razzle-app --example with-single-exposed-port my-single-port-app
cd my-single-port-app
yarn start

启动后，访问 http://localhost:3001/ 即可看到应用运行在单端口模式下。

核心配置解析

单端口模式的核心在于修改Razzle的webpack开发服务器配置，使其将所有请求代理到Express服务器。这通过razzle.config.js文件实现：

'use strict';

module.exports = {
  modifyWebpackConfig(opts) {
    const config = opts.webpackConfig;

    if (opts.env.target === 'web' && opts.env.dev) {
      // 配置代理，将所有请求转发到3000端口
      config.devServer.proxy = {
        context: () => true,
        target: 'http://localhost:3000'
      };
      // 禁用默认的index页面
      config.devServer.index = '';
    }

    return config;
  },
};

这段配置做了两件事：

1. 设置webpack开发服务器将所有请求代理到3000端口的Express服务器
2. 禁用开发服务器默认提供的index页面

高级配置：与Nginx转发服务配合

在实际生产环境中，我们经常需要将应用部署在Nginx等转发服务后面。以下配置展示了如何在子路径(/razzle-dev)下运行Razzle应用：

Razzle配置

'use strict';

module.exports = {
  modifyWebpackConfig(opts) {
    const config = opts.webpackConfig;

    if (target === 'web' && dev) {
      config.devServer.public = 'localhost:8080' // 转发服务器地址
      config.devServer.proxy = {
        context: () => true,
        target: 'http://localhost:3000'
      };
      // 修改websocket路径
      config.devServer.sockPath = '/razzle-dev/sockjs-node';
    }

    return config;
  },
};

启动时需要指定公共路径：

CLIENT_PUBLIC_PATH=http://localhost:8080/razzle-dev/ yarn start

Nginx配置

http {
    server {
        listen       8080;
        server_name  _;
        
        # 处理/razzle-dev重定向
        location /razzle-dev {
            return 302 /razzle-dev/;
        }
        
        # 转发主应用
        location /razzle-dev/ {
            proxy_pass   http://127.0.0.1:3001/;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
        }
        
        # 转发websocket连接
        location /razzle-dev/sockjs-node/ {
            proxy_pass   http://127.0.0.1:3001;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
        }
    }
}

注意事项

1. razzle.config.js文件不会被转译，必须使用Node.js兼容的JavaScript语法
2. 开发模式下修改配置后需要重启服务才能生效
3. 生产环境部署时不需要这些配置，因为生产构建会生成静态资源
4. 当使用子路径部署时，确保所有资源路径都正确包含子路径前缀

通过单端口配置，Razzle项目可以更好地模拟生产环境行为，简化开发调试流程，特别是在需要与后端API交互或存在跨域限制的场景下非常有用。

razzle ✨ Create server-rendered universal JavaScript applications with no configuration 项目地址: https://gitcode.com/gh_mirrors/ra/razzle