将 Nuxt JS SSR 应用程序部署到 Google Cloud App Engine 标准答案

【问题标题】：Deploying Nuxt JS SSR app to Google Cloud App Engine Standard将 Nuxt JS SSR 应用程序部署到 Google Cloud App Engine 标准
【发布时间】：2021-09-23 20:22:05
【问题描述】：

我无法将我的 Nuxt JS SSR 应用部署到 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 SSR 应用部署到 Google Cloud App Engine 的正确 app.yaml 配置吗？

【问题讨论】：

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

标签： node.js google-app-engine google-cloud-platform nuxt.js

【解决方案1】：

有人知道将 Nuxt JS SSR 应用部署到 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 SSR：

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 字段中检查您的应用是否已启用。

【讨论】：