# 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 的镜像。对于本教程来说这是可以的。但对于生产环境的应用，您需要对其进行优化： ```dockerfile 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 后，就可以创建镜像了。您可以通过运行以下命令轻松完成： {% hint style="warning" %} 对于 ARM CPU（Mac M1、M2 等）用户，请参阅 [专用页面](https://docs.edgegap.com/zh/docs/sample-projects/broken-reference). {% endhint %} ```sh docker build . -t regsitry.edgegap.com//demo-nuxt-edgegap: ``` 最好按照语义化版本控制添加版本号，但如果您不打算在首次部署后在 Edgegap 上更新构建，也可以完全省略版本号。但在那之前，您需要将新创建的 Docker 镜像推送到您选择的镜像仓库。请记住，我们通过 Harbor 提供私有仓库，为您提供一系列安全优势，这些优势使用默认 Docker 仓库时未必能获得。但在那之前，您需要将新创建的 Docker 镜像推送到您选择的镜像仓库。请记住，我们通过 Edgegap Registry 提供私有仓库，为您提供一系列安全优势，这些优势使用默认 Docker 仓库时未必能获得。要将镜像推送到我们的仓库，您需要先使用以下命令凭证登录： ```sh docker login regsitry.edgegap.com ``` 现在，剩下的就是像下面这样推送您的镜像： ```sh docker push regsitry.edgegap.com//demo-nuxt-edgegap: ``` 太棒了！现在，您只差一步就能在 Edgegap 平台上部署您的 Nuxt 应用。 ### 在 Edgegap 上部署您的应用在 Edgegap 上部署应用有两种方式。无论哪种方式，您都需要拥有我们的帐户，您可以通过此处的链接免费创建一个。首先，让我们看看如何通过我们的网站部署已容器化的应用。 #### 通过 Edgegap 仪表板部署应用：您需要前往以下 Web 地址并输入凭证。完成后，您将被自动重定向到仪表板。如果您刚创建帐户，您会看到立即启动第一个应用的选项。如果没有，只需在屏幕左侧菜单中转到“Applications and games”选项卡。您会在右上角看到创建新应用的选项：

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

您应填写所有必填字段，填写完成后，有几项默认设置需要您修改： * 端口号：此应用需要开放 3000 端口，请在创建表单的“ports”部分添加该端口。 * 最大部署时间：如本教程前面所述，我们的 NuxtJS 镜像约为 1GB。要在 Edgegap 上部署如此大的镜像，您需要将最大部署时间增加到大约 300 秒。填写完表单并提供适当信息后，只需提交，您就可以准备部署。只需选择区域和您希望模拟的玩家数量。

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

这将打开一个新标签页，您将在其中看到 Nuxt 应用的默认登录页面。 #### 通过 Edgegap 的 API 部署应用虽然我们的 Web 仪表板是部署应用最用户友好的方式，但您也可以通过一个非常简单的 API 请求来完成。为此，您可以使用 Postman。重要的是您要访问仪表板以 [创建 API 令牌](https://docs.edgegap.com/zh/docs/sample-projects/broken-reference) 通过个人资料中的选项。以下是创建 API 令牌的简单指南。一旦您拿到 API 令牌，剩下要做的就是使用应用名称、版本、IP 地址、要部署的区域以及作为授权参数一部分的令牌来构造部署请求。您可以在我们的文档中查看完整请求示例。发送请求后，您应在命令行或 Postman 上看到如下响应：

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