README

🚨 使用此包时请谨慎，因为我仍在对其进行工作

此包基于 hammerstonedev/sidecar-inertia。Aaron 在 Sidecar 方面做得非常出色，他的原始包让我想出了如何将其与 Vite 一起使用。

概述

此包提供 Sidecar 功能，以在 AWS Lambda 上运行 Inertia 服务器端渲染。

Sidecar 包、部署和执行 AWS Lambda 函数，来自您的 Laravel 应用程序。

启用 SSR

遵循启用 SSR 的官方 Inertia 文档是一个好的起点，但有一些事情你可以跳过

您不需要运行 npm install @inertiajs/server
当您到达“构建您的应用程序”部分时，请回到这里

我不会详细介绍如何使用 Vite 和 Laravel 设置 SSR，但即将推出的 Inertia 文档中有更详细的信息，以及 Laravel 文档

默认情况下，SSR 网关是禁用的，您可以通过在 .env 中设置 SIDECAR_INERTIA_VITE_ENABLED=true 或调整配置文件来启用此功能。

安装

要使用此包，请运行以下命令

composer require robertboes/sidecar-inertia-vite

这将安装 Sidecar。

使用 Sidecar 网关

如果配置 sidecar-inertia-vite.ssr_gateway_enabled 为 true，此包将自动覆盖 Inertia SSR 网关。

如果由于某种原因网关没有被正确覆盖，您可以在自己的服务提供商中这样做

namespace App\Providers;

use RobertBoes\SidecarInertiaVite\SidecarGateway;
use Illuminate\Support\ServiceProvider;
use Inertia\Ssr\Gateway;

class AppServiceProvider extends ServiceProvider
{
    public function register()
    {
        // Use Sidecar to run Inertia SSR.
        $this->app->instance(Gateway::class, new SidecarGateway);
    }
}

发布配置

您可以使用以下命令发布配置

php artisan vendor:publish --provider="RobertBoes\SidecarInertiaVite\ServiceProvider" --tag="config"

配置 Sidecar

如果您还没有这样做，您需要配置 Sidecar。

通过运行以下命令发布 sidecar.php 配置文件

php artisan sidecar:install

要交互式配置您的 Sidecar AWS 凭据，您可以运行

php artisan sidecar:configure

官方 Sidecar 文档有更详细的介绍。

现在更新您的 config/sidecar.php 以包含此包提供的函数。

<?php

return [
    'functions' => [
        \RobertBoes\SidecarInertiaVite\SSRFunction::class,
    ],
    
    // ...
];

更新您的 JavaScript

这仅涉及 Vue3，请遵循 Inertia 文档中的 Vue2 或 React，并请打开任何问题。

此包假设您正在使用接近原始的 vite.config.js，这意味着路径由 Laravel 插件定义。

并将您的 resources/js/ssr.js 更新如下。具体细节可能因您的应用程序而异。如果您使用 Ziggy，您将想要取消注释 Ziggy 代码。（这是基于 Inertia 文档的，略有修改。）

import {createSSRApp, h} from 'vue'
import {renderToString} from '@vue/server-renderer'
import {createInertiaApp} from '@inertiajs/inertia-vue3'
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
// import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';

const appName = 'Laravel';

export async function handler(page) {
    return await createInertiaApp({
        page,
        render: renderToString,
        title: (title) => `${title} - ${appName}`,
        resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue', { eager: false })),
        setup({ app, props, plugin }) {
            return createSSRApp({ render: () => h(app, props) })
                .use(plugin)
                // .use(ZiggyVue, {
                //     ...page.props.ziggy,
                //     location: new URL(page.props.ziggy.location),
                // })
        },
    })
}

捆绑 / node_modules

默认情况下，配置选项 sidecar-inertia-vite.bundle 设置为 true。这将使用 @vercel/ncc 对您的 SSR 函数进行捆绑，它生成一个文件，不需要包含 node_modules 文件夹。使用此方法，它将生成一个 index.mjs 文件以及动态导入的模块。

如果您不想使用此功能，可以将选项设置为false。这将创建一个具有以下内容的 Lambda 函数：

- assets/
- node_modules/
- ssr.mjs

部署您的 SSR 函数

在您将 SSR 函数添加到 sidecar.php 文件后，您应该运行 php artisan sidecar:deploy --activate 以部署您的函数。

这将在 beforeDeployment 钩子中为您编译 JavaScript，因此您不必担心忘记先进行此操作。

调试 SSR

建议您在本地部署 Sidecar 函数，以便您可以更快地测试 SSR。您可以从本地机器运行 php artisan sidecar:deploy --activate，您的 SSR 函数将被部署到 Lambda。

您还可以在 config/sidecar-inertia-vite.php 文件中将 debug 设置为 true，这样当 SSR 失败时，Sidecar 将抛出异常，而不是回退到客户端渲染。这将帮助您快速诊断问题。

关于 Ziggy 的注意事项

我个人没有使用 Ziggy，但我确实在一个 Laravel Jetstream 应用程序中尝试了它，一切似乎都正常。如果有什么地方不起作用或文档需要更多解释，请随时提交 PR。

robertboes / sidecar-inertia-vite

维护者

详细信息