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

Where to deploy my front and backend apps?

。目前我正在开发一个 Nuxt 应用程序,它的后端使用 strapi “headless CMS”。我知道如何在本地 PC 上设置 development 环境。目前我的 Nuxt 应用程序 运行ning 在 http://localhost:3800/,我的 strapi 管理面板 运行ning 在 http: //localhost:1337/admin.

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

我还想知道我的本地主机地址发生了什么变化?如果我在“Nuxt”和“strapi”服务器配置中配置它们,那么我可以访问 https://my-app.com-hamid:3800 and https://my-app-hamid.com:1337/admin 中的那些地址是否正确?我的意思是 足够 仅更改“nuxt.config.js”和 strapi“./config/server.js”文件中的主机名,否则我需要更改很多或者可能使用两个主机?谁能帮我知道我应该在这些文件中插入哪些代码才能在未来的在线应用程序中访问相同的 url?或者,如果我错了,请解释一下整个在线应用程序的结构?如果您认为我的问题不合适,我深表歉意,但我对托管网站知之甚少,在这种情况下需要帮助。通常教程和文章不会给我详细的过程,只说我们必须 运行 命令,如 npm run build 等。所以我决定问这个问题。

我认为必须更改的代码如下所示:

nuxt.config.js files:

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

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

您需要使用 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:尝试逐步实现。