在 Elixir/Phoenix 中重用 nuxt 代码答案

【问题标题】：reusing nuxt codes in Elixir/Phoenix在 Elixir/Phoenix 中重用 nuxt 代码
【发布时间】：2020-04-23 18:04:04
【问题描述】：

背景

我一直在构建前端，使用 nuxt 和 elixir/phoenix 作为后端，使用 nginx 作为反向代理。

但是，为了提高性能，我想在 Elixir/Phoenix 中部署整个东西。

我的目标

我想在 Elixir/Phoenix 中使用我的 nuxt 代码。

我不明白的地方

我不知道如何保留在 nuxt.config.js 中进行的路由、服务器端渲染和配置。虽然如果我让组件保持全局访问，我可以放弃其他配置。

【问题讨论】：

我不明白为什么应该改变任何东西（也许除了 Phoenix 应该在另一个端口上运行），我完全误解了为什么 nuxt 任何前端都应该打扰.只需摆脱nginx，您就应该做好准备。我错过了什么吗？

标签： javascript elixir phoenix-framework nuxt.js

【解决方案1】：

如果您认为在生产中使用它，那么不要！ :)。从我的角度来看，不值得让phoenix app 负责node.js app。但是，如果您想在开发过程中将所有这些作为单个 mix phx.server 命令运行，请按照以下步骤操作。

创建GenServer，它将启动 nuxt 应用程序并将该 genserver 添加到应用程序监督树。 assets_path 应该是您的 nuxt 应用程序 package.json 文件所在的路径，此 assets_path 不必在您的凤凰应用程序中


    defmodule NuxtServer do
      use GenServer, restart: :permanent
      require Logger

      def start_link(assets_path, opts \\ []) do
        GenServer.start(\__MODULE__, [assets_path], opts)
      end

      def init([assets_path]) do
        # in assets folder package.json should contain under scripts node
        # scripts: {
        #   ...
        #   "nuxt": "nuxt"
        # }
        port = Port.open({:spawn, "npm run nuxt"}, [{:cd, assets_path}])
        ref = Port.monitor(port)
        {:ok, %{port: port, ref: ref, assets_path: assets_path}}
      end

      def handle_info({:DOWN, _, :port, _, _}, %{assets_path: assets_path, ref: ref, port: port}) do
        Logger.error("Nuxt server is down, restarting ...")

        Port.close(port)

        Port.demonitor(ref)
        {:ok, state} = init([assets_path])
        {:noreply, state}
      end

      def handle_info({_prot, {:data, msg}}, s) do
        Logger.debug msg
        {:noreply, s}
      end

      def handle_info(msg, state), do: super(msg, state)
    end

然后按照说明如何在 phoenix 中使用例如添加反向代理。这个lib 如果你需要通过phoenix http 端口访问所有内容。

【讨论】：