# 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 等）用户，请参阅 [专用页面](broken://pages/363416186bc562ffffb244aa3f6e5106002bd8cc). {% 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 令牌](broken://pages/63c51b0385ef1748b3681fe05c8bc45ccab89b94) 通过个人资料中的选项。以下是创建 API 令牌的简单指南。 一旦您拿到 API 令牌，剩下要做的就是使用应用名称、版本、IP 地址、要部署的区域以及作为授权参数一部分的令牌来构造部署请求。您可以在我们的文档中查看完整请求示例。 发送请求后，您应在命令行或 Postman 上看到如下响应：
这就是通过 CLI 部署应用所需做的全部操作。要确认应用已部署，您可以再次前往仪表板，并通过单击“Active deployments”选项卡查看正在运行的部署。 --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.edgegap.com/zh/docs/sample-projects/nuxt-on-edgegap.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.