laravel interia.js-与13714不同的端口上运行SSR-DEV365 开发者社区

我正在进入Inertia.js，到目前为止，它的简单性以及它带来的巨大优势，可以在现代堆栈上建立现代网站，这是由您选择的JavaScript框架以及Laravel和PHP的JavaScript框架所驱动的现代堆栈。在后端。

我的主要关注点之一是惯性是否会成为SEO的好解决方案。原来：是！ ð凭借其内置的SSR功能，设置一个完全服务器端，SEO友好的前端是轻而易举的，它仍然从所有惯性魔术中获利。

设置SSR为well documented，易于执行。设置一切时，运行

php artisan inertia:start-ssr

将启动SSR服务器，Laravel将为您提供普通的HTML，所有客户端功能仍在工作。但是：它将始终在端口13714上运行SSR服务器，我找不到任何现有资源显示如何更改。

更改默认的SSR端口

我可能会有多种原因更改端口。一些示例：

该端口已经采用。这不太可能仅在服务器上（或本地）运行一个网站，但是一旦您有两个项目运行，跑步者就会相互冲突。
禁止该端口。一些螺旋桨将不允许您分配给定范围外的任何端口。
您不喜欢这个数字。也不太可能，但也许您只是以13.

将端口更改为其他东西需要两个步骤。您需要

重新配置SSR构建以使SSR服务器在所需端口和
更改Laravel运行时配置

这是（据我所知）没有记录，我必须深入研究inertia server runner和Laravel command to start the server的源代码，以了解发生了什么。我们去。

更改SSR构建的端口

步骤1：鉴于您已遵循SSR设置指南，运行

npm run build

启动SSR服务器时将执行的捆绑包中的配置（您可以在bootstrap/ssr/ssr.js上找到此捆绑包）。默认情况下，没有传递端口，因此使用默认端口。

为了更改以后将使用的端口，必须在resources/js/ssr.js文件中更改。可以通过将其传递给createServer函数的第二个参数来更改端口。所以

createServer(page =>
  createInertiaApp({
    page,
    render: renderToString,
    resolve: name => {
      const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
      return pages[`./Pages/${name}.vue`]
    },
    setup({ App, props, plugin }) {
      return createSSRApp({
        render: () => h(App, props),
      }).use(plugin)
    },
  }),
  8080
)

此处默认值的更改是上线。我将作为第二个参数传递到端口。使用此设置，再次运行npm run build，下次运行php artisan inertia:start-ssr时，您将看到：

Starting SSR server on port 8080...
Inertia SSR server started.

真棒。但是：仅此更改就不会。 Laravel仍将尝试与端口13714上的SSR服务器交谈。让我们更改此。

更改Laravel后端的港口

Laravel惯性适配器具有默认情况下未发布的配置文件。如果您还没有这样做，请运行

php artisan vendor:publish --provider "Inertia\ServiceProvider"

这将将名为inertia.php的文件发布到您的config文件夹。打开此并说明，您可以在那里更改Laravel正在与之交谈的SSR服务器URL。将URL更改为

'url' => 'http://127.0.0.1:8080',

你们都设定了。 ð

使端口更容易配置

在两个地方更改端口似乎有些乏味，此端口也应该取决于您的环境。因此，让我们成为环境变量。

在您的config/inertia.php中，更改此行

'url' => 'http://127.0.0.1:8080',

'url' => 'http://127.0.0.1:'.env('VITE_INERTIA_SSR_PORT', 13714),

和在您的ssr.js中，而不是硬编码端口也注入env变量。

createServer(page =>
  createInertiaApp({
    // config here...
  }),
  process.env.VITE_INERTIA_SSR_PORT || 13714
)

有两个更改，您现在可以将VITE_INERTIA_SSR_PORT变量添加到.env文件并将其设置在此处。

VITE_INERTIA_SSR_PORT=8080

笔记

是的，ENV变量名称的VITE_前缀是必不可少的
请记住，在运行npm run build时，SSR服务器的端口仍在构建捆绑包中。仅更改ENV变量，如果您不重新创建捆绑包，则不会更改服务器正在运行的端口。
是的，应该在某个地方记录这一点。如果您有能力将其添加到文档中，请这样做。