将 Nuxt JS s-s-r 应用程序部署到 Google Cloud App Engine 标准

Posted 2023-03-07

【中文标题】将 Nuxt JS s-s-r 应用程序部署到 Google Cloud App Engine 标准

【英文标题】：Deploying Nuxt JS s-s-r app to Google Cloud App Engine Standard

【发布时间】：2021-09-23 20:22:05

【问题描述】：

我无法将我的 Nuxt JS s-s-r 应用部署到 Google Cloud App Engine。 该应用可以在开发和生产模式下本地运行。

Nuxt JS 文档建议使用app.yaml，如下所示：

runtime: nodejs10

instance_class: F2

handlers:
  - url: /_nuxt
    static_dir: .nuxt/dist/client
    secure: always

  - url: /(.*\.(gif|png|jpg|ico|txt))$
    static_files: static/\1
    upload: static/.*\.(gif|png|jpg|ico|txt)$
    secure: always

  - url: /.*
    script: auto
    secure: always

env_variables:
  HOST: '0.0.0.0'

但是，Google Cloud 文档建议使用 nodejs14 以及 env_variables 作为存储桶名称，我认为它与 Google App Engine 自动创建的暂存存储桶名称相同。

runtime: nodejs14 # or another supported version

instance_class: F2

env_variables:
  BUCKET_NAME: "staging.myapp.appspot.com"

handlers:
  - url: /_nuxt
    static_dir: .nuxt/dist/client
    secure: always

  - url: /(.*\.(gif|png|jpg|ico|txt))$
    static_files: static/\1
    upload: static/.*\.(gif|png|jpg|ico|txt)$
    secure: always

  - url: /.*
    script: auto
    secure: always

当使用这两种app.yaml 配置进行部署时，它会成功部署到 Google App Engine，但是在访问实例的 URL (myapp.uk.r.appspot.com) 时，我遇到了错误如下：

Error: Server Error
The server encountered an error and could not complete your request.
Please try again in 30 seconds.

当我访问 staging.myapp.appspot.com 时，我遇到了从一般的 Google 404 错误到证书错误的一系列错误。有人知道将 Nuxt JS s-s-r 应用部署到 Google Cloud App Engine 的正确 app.yaml 配置吗？

【问题讨论】：

请包含来自 Cloud Logging 的错误详细信息或在终端中使用 gcloud app logs tail，就像 @FauziFadillah 的回答一样。

【参考方案1】：

有人知道将 Nuxt JS s-s-r 应用部署到 Google Cloud App Engine 的正确 app.yaml 配置吗？

我复制了您的案例并使用您提供的 app.yaml 配置在 App Engine 中部署 Nuxt JS 应用程序的基本教程。即使我将instance_class 从F2 减少到F1，这两种配置都可以正常工作，它仍然可以正常工作。

到目前为止，nodejs 的推荐版本是nodejs14，但即使版本是nodejs10，该应用程序仍在App Engine Standard 中运行。 env_variables 是可选的，您可以在 app.yaml 文件中定义环境变量以使其可用或在您的应用中使用。

错误：

Error: Server Error
The server encountered an error and could not complete your request.
Please try again in 30 seconds.

500 error 或server error 很难找到原因。在Cloud Logging 中查找日志或单击此link 以直接转到控制台。确保您处于 GAE 应用程序 > 您的服务名称 > App Engine 版本。开始寻找访问您的应用程序时出现的错误并寻找错误原因描述。如果您没有找到任何尝试切换到所有日志。

请注意，它还需要已启用以下 API：

App 引擎 API 计算引擎 API 云构建 API

其他故障排除，请仔细检查应用程序的侦听端口。

【参考方案2】：

请检查应用程序日志以确保 GAE 上发生了什么

gcloud app logs tail

然后尝试我的 yaml 文件来获取 nuxt s-s-r：

runtime: nodejs14
service: nuxt

instance_class: F1

handlers:
  - url: /_nuxt
    static_dir: .nuxt/dist/client
    secure: always

  - url: /(.*\.(gif|png|jpg|ico|txt))$
    static_files: static/\1
    upload: static/.*\.(gif|png|jpg|ico|txt)$
    secure: always

  - url: /.*
    script: auto
    secure: always

【参考方案3】：

解决了在 nuxt.config.js 中指定不同的服务器端口 8000 而不是默认的似乎是疏忽的问题。

通过查看日志使用：

gcloud app logs tail

这个错误很明显：

 ✖ Nuxt Fatal Error
Error: listen EADDRNOTAVAIL: address not available *.*.*.*:8000

【参考方案4】：

试试这个配置：

runtime: nodejs12

instance_class: F2

handlers:
  - url: /_nuxt
static_dir: .nuxt/dist/client
    secure: always

  - url: /(.*\.(gif|png|jpg|ico|txt))$
    static_files: static/\1
    upload: static/.*\.(gif|png|jpg|ico|txt)$
    secure: always

  - url: /.*
    script: auto
    secure: always

env_variables:
  HOST: '0.0.0.0'

我有一个在 App Engine 中运行的 nuxt 应用，这是我的 Yaml 配置。

建议您在 GCP/App Engine/Configurations=>Deactivate App 字段中检查您的应用是否已启用。