NuxtJS

入门指南

Edgegap 为您提供了一个非常直观的平台，可在所需位置部署无服务器 Web 应用。在本教程中，我们将讲解部署 Nuxt 应用的步骤。在检查其他内容之前，请确保您已安装 yarn 或其他包管理软件（如 npm 或 npx）。本教程将使用 yarn。它必须在您的应用目录中运行，该目录起初可以只是一个空文件夹。

在终端中定位到该文件夹位置，然后运行以下命令：

C:\Users\JohnDoe\Documents\demo-nuxt-edgegap> yarn

安装完所有依赖后，通过运行此命令确认其已正确安装：

C:\Users\JohnDoe\Documents\demo-nuxt-edgegap> yarn dev

如果一切顺利，yarn dev 应返回已安装的 yarn 版本。到此，我们可以查看成功完成本教程的其余要求。

需求

将应用容器化

将大多数应用容器化很简单。您需要创建一个 Dockerfile，然后在 Docker 上运行该文件以创建镜像。Visual Studio Code 是创建 Dockerfile 的好平台，因为默认情况下它不会为我们创建的每个新文件添加扩展名。这正是我们需要的。只需创建一个新文件并命名为 Dockerfile，您会看到旁边出现小 Docker 图标。

现在，您可以将此脚本复制并粘贴到其中以获取主要依赖。请记住，这将创建一个大小略超过 1GB 的镜像。对于本教程来说这是可以的。但对于生产环境的应用，您需要对其进行优化：

FROM node:lts as builder

WORKDIR /app

COPY . .

RUN yarn install \
  --prefer-offline \
  --frozen-lockfile \
  --non-interactive \
  --production=false

RUN yarn build

RUN rm -rf node_modules && \
  NODE_ENV=production yarn install \
  --prefer-offline \
  --pure-lockfile \
  --non-interactive \
  --production=true

FROM node:lts

WORKDIR /app

COPY --from=builder /app  .

ENV HOST 0.0.0.0
EXPOSE 80

CMD [ "yarn", "start" ]

保存 Dockerfile 后，就可以创建镜像了。您可以通过运行以下命令轻松完成：

对于 ARM CPU（Mac M1、M2 等）用户，请参阅 专用页面.

docker build . -t regsitry.edgegap.com/<YOUR_REPO>/demo-nuxt-edgegap:<YOUR_VERSION_NUMBER>

最好按照语义化版本控制添加版本号，但如果您不打算在首次部署后在 Edgegap 上更新构建，也可以完全省略版本号。

但在那之前，您需要将新创建的 Docker 镜像推送到您选择的镜像仓库。请记住，我们通过 Harbor 提供私有仓库，为您提供一系列安全优势，这些优势使用默认 Docker 仓库时未必能获得。

但在那之前，您需要将新创建的 Docker 镜像推送到您选择的镜像仓库。请记住，我们通过 Edgegap Registry 提供私有仓库，为您提供一系列安全优势，这些优势使用默认 Docker 仓库时未必能获得。

要将镜像推送到我们的仓库，您需要先使用以下命令凭证登录：

docker login regsitry.edgegap.com

现在，剩下的就是像下面这样推送您的镜像：

docker push regsitry.edgegap.com/<YOUR_REPO>/demo-nuxt-edgegap:<YOUR_VERSION_NUMBER>

太棒了！现在，您只差一步就能在 Edgegap 平台上部署您的 Nuxt 应用。

在 Edgegap 上部署您的应用

在 Edgegap 上部署应用有两种方式。无论哪种方式，您都需要拥有我们的帐户，您可以通过此处的链接免费创建一个。首先，让我们看看如何通过我们的网站部署已容器化的应用。

通过 Edgegap 仪表板部署应用：

您需要前往以下 Web 地址并输入凭证。完成后，您将被自动重定向到仪表板。如果您刚创建帐户，您会看到立即启动第一个应用的选项。如果没有，只需在屏幕左侧菜单中转到“Applications and games”选项卡。您会在右上角看到创建新应用的选项：

单击后，将出现以下表单：

您应填写所有必填字段，填写完成后，有几项默认设置需要您修改：

• 端口号：此应用需要开放 3000 端口，请在创建表单的“ports”部分添加该端口。

• 最大部署时间：如本教程前面所述，我们的 NuxtJS 镜像约为 1GB。要在 Edgegap 上部署如此大的镜像，您需要将最大部署时间增加到大约 300 秒。

填写完表单并提供适当信息后，只需提交，您就可以准备部署。只需选择区域和您希望模拟的玩家数量。

确认选择后，您的应用很快就会上线。部署后您将看到如下内容。您可以通过单击我们在图片中圈出的图标自行访问它。

这将打开一个新标签页，您将在其中看到 Nuxt 应用的默认登录页面。

通过 Edgegap 的 API 部署应用

虽然我们的 Web 仪表板是部署应用最用户友好的方式，但您也可以通过一个非常简单的 API 请求来完成。为此，您可以使用 Postman。重要的是您要访问仪表板以 创建 API 令牌 通过个人资料中的选项。以下是创建 API 令牌的简单指南。

一旦您拿到 API 令牌，剩下要做的就是使用应用名称、版本、IP 地址、要部署的区域以及作为授权参数一部分的令牌来构造部署请求。您可以在我们的文档中查看完整请求示例。

发送请求后，您应在命令行或 Postman 上看到如下响应：

这就是通过 CLI 部署应用所需做的全部操作。要确认应用已部署，您可以再次前往仪表板，并通过单击“Active deployments”选项卡查看正在运行的部署。