时间戳

首页 > 解决方案 > 在哪里部署我的前端和后端应用程序？

nuxt.js - 在哪里部署我的前端和后端应用程序？

问题描述

. 目前我正在开发一个 Nuxt 应用程序，该应用程序使用 strapi “无头 CMS” 作为其后端。我知道如何在本地 PC 中设置开发环境。目前我的 Nuxt 应用程序在http://localhost:3800/上运行，而我的 Strapi 管理面板在http://localhost:1337/admin上运行。

我阅读了一些博客文章和一些关于strapi 和 Nuxt 文档的页面，并且还在网上搜索了我的问题，但我没有找到任何适合我的答案。我真正的问题是，将来我想在这样的在线地址中部署我的应用程序（例如在我的国家/地区的主机服务器中）时：https ://my-app-hamid.com我需要更改我的文件夹结构？目前我为我的应用程序的正面和背面使用了两个单独的文件夹，每个文件夹都有“Nuxt”和“strapi”的标准结构。我的意思是我必须将它们合并到一个文件夹结构中，或者对于在线应用程序来说可以吗？

另外我想知道我的本地主机地址发生了什么变化？如果我在“ Nuxt ”和“strapi”服务器配置？我的意思是只更改“nuxt.config.js”和strapi“./config/server.js”文件中的主机名就足够了，或者我需要更改很多或者可能使用两个主机? 任何人都可以帮我在将来的在线应用程序中插入哪些代码以访问相同的 URL 吗？或者，如果我错了，请向我解释整个在线应用程序的结构？如果您认为我的问题不适合您，我深表歉意，但我对托管网站知之甚少，在这种情况下需要帮助。通常教程和文章不会给我这个过程的细节，只说我们必须运行诸如之类的命令npm run build。所以我决定问这个问题。

我认为必须更改的内容显示在以下代码中：

nuxt.config.js 文件：

// current nuxt configuration
server: {
    port: 3800 
},

// future online configuration
server: {
  port: 3800,
  host: 'https://my-app.com'
}

带子 ./config/server.js

// current code in server.js
module.exports = ({ env }) => ({
  host: env('HOST', '0.0.0.0'),
  port: env.int('PORT', 1337),
  admin: {
    auth: {
      secret: env('ADMIN_JWT_SECRET', '*******'),
    },
  },
});

// future online app
module.exports = ({ env }) => ({
  host: env('HOST', 'https://my-app.com'),
  port: env.int('PORT', 1337),
  admin: {
    auth: {
      secret: env('ADMIN_JWT_SECRET', '*******'),
    },
  },
});

但也许这是完全错误的。我只是猜测。

标签： nuxt.jshostingstrapi

解决方案

您需要使用 Node.js 服务器将它托管在某个地方，所以假设是 Heroku。然后，当它在那里运行时，您可以更新您的应用正在寻找的 URL，使其具有与在本地运行时相同的用法。

您可以按照本教程至少将其托管在 Heroku 上。
当它在那里时，您可以尝试Nuxt Strapi 模块的命令。

我不确定是否有关于 Strapi + Nuxt + Heroku 的教程，但即使您遇到困难，安装也应该是可行的。花点时间看一些视频，你会到达那里的！

至于 URL，Heroku 可以提供给你，如果你想要一个自定义域https://my-app-hamid.com，你可以找一个像https://porkbun.com/这样的注册商，购买一个域并做一堆 A/CNAME 记录我猜（Heroku 可能也可以在这方面为您提供帮助）。

PS：应该没有区别server.js，使用 env 变量具有环境之间的灵活性。在本地，您将使用一个.env文件，在远程，您将这些文件输入到 Heroku 的仪表板部分。
（当然，您可以在任何地方托管它，但 Heroku 仍然是您开始使用时最好的，但您有点迷路了）

TDLR：尝试一步一步地到达那里。

推荐阅读