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

Question

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

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

我还想知道我的本地主机地址发生了什么变化？如果我在“Nuxt”和“strapi”服务器配置中配置它们，我可以访问 https://my-app.com-hamid:3800 和 https://my-app-hamid.com:1337/admin 中的这些地址是否正确？我的意思是，仅更改“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'
}

strapi ./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', '*******'),
    },
  },
});

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

Answer 1

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

您可以跟进 this tutorial 至少将其托管在 Heroku 上。
当它在那里时，您可以尝试Nuxt strapi module的命令。

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

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

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

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