在使用gcloud将nuxt应用程序部署到App engine后，会显示错误吗？

Question

我正在尝试将Nuxtjs应用程序部署到谷歌云(应用程序引擎)，但在部署后，当我浏览它时，它显示服务器错误500 (请访问：https://vetution.oa.r.appspot.com/)，当我使用gcloud app logs tail -s default命令记录错误时，它在下图中给出了响应

​

我不知道如何在应用程序引擎上安装此程序包才能使其无错误地运行。

这是我的Nuxt.config.js文件：

import redirectSSL from 'redirect-ssl'
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')

require('dotenv').config()

// const { NODE_ENV = 'production' } = process.env

// const isDev = NODE_ENV === 'development'
// here is update 
export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    titleTemplate: '%s | Vetution',
    title: 'Veterinary Online Marketplace',
    htmlAttrs: {
      lang: 'en',
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content:
          'Vetution is the online platform for veterinarians to explore and buy supplies and products in Egypt. Order your veterinary clinic or farm needs now!',
      },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.svg' }],
  },
  serverMiddleware: [
    redirectSSL.create({
      enabled: process.env.NODE_ENV === 'production',
    }),
  ],
  loading: {
    color: '#1776f2',
    height: '5px',
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    'vue-slick-carousel/dist/vue-slick-carousel.css',
    'vue-slick-carousel/dist/vue-slick-carousel-theme.css',
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    { src: '~plugins/vue-slick', ssr: false },
    { src: '~plugins/vueSlickCarousel', ssr: false },
    { src: '~plugins/axios.js' },
    { src: '~plugins/validate.js', mode: 'client' },
    { src: '~plugins/vuex-persist.js', ssr: false },
    // { src: '~plugins/facebook-events.js', mode: 'client' },
  ],

  // https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap
  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/eslint
    // '@nuxtjs/eslint-module',

    [
      '@nuxtjs/google-analytics',
      {
        id: 'UA-162964146-1',
        ecommerce: {
          enabled: true,
        },
      },
    ],
  ],

  // gtm: {
  //   id: 'GTM-KNXFGQN',
  // },

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    '@nuxt/image',
    '@nuxtjs/vuetify',
    '@nuxtjs/axios',
    // '@nuxtjs/gtm',
    '@nuxtjs/sitemap',
    '@nuxtjs/robots',
    'nuxt-webfontloader',
    // [
    //   '@nuxtjs/google-adsense',
    //   {
    //     id: 'ca-pub-3060908587492903',
    //   },
    // ],
    ['@nuxtjs/dotenv', { filename: `.env.production` }],
    'nuxt-polyfill',
  ],
  image: {
    domains: ['https://vetution.online'],
  },
  webfontloader: {
    google: {
      families: ['Inter:300,400,500,600,700,800,900&display=swap'],
    },
  },
  polyfill: {
    features: [
      /* 
            Feature without detect:

            Note: 
              This is not recommended for most polyfills
              because the polyfill will always be loaded, parsed and executed.
        */
      {
        require: 'url-polyfill', // NPM package or require path of file
      },

      /* 
            Feature with detect:

            Detection is better because the polyfill will not be 
            loaded, parsed and executed if it's not necessary.
        */
      {
        require: 'intersection-observer',
        detect: () => 'IntersectionObserver' in window,
      },

      /*
            Feature with detect & install:

            Some polyfills require a installation step
            Hence you could supply a install function which accepts the require result
        */
      {
        require: 'smoothscroll-polyfill',

        // Detection found in source: https://github.com/iamdustan/smoothscroll/blob/master/src/smoothscroll.js
        detect: () =>
          'scrollBehavior' in document.documentElement.style &&
          window.__forceSmoothScrollPolyfill__ !== true,

        // Optional install function called client side after the package is required:
        install: (smoothscroll) => smoothscroll.polyfill(),
      },
    ],
  },

  // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify

  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    treeShake: true,
    theme: {
      dark: false,
      iconfont: 'md',
      theme: {
        primary: '#1776F2',
        secondary: '#3D4759',
        accent: '#82B1FF',
        error: '#FF3D51',
        info: '#2196F3',
        success: '#4CAF50',
        warning: '#FFC107',
        grey: '#616161',
      },
    },
    defaultAssets: {
      icons: false,
    },
  },
  configureWebpack: {
    plugins: [
      new VuetifyLoaderPlugin({
        /**
         * This function will be called for every tag used in each vue component
         * It should return an array, the first element will be inserted into the
         * components array, the second should be a corresponding import
         *
         * originalTag - the tag as it was originally used in the template
         * kebabTag    - the tag normalized to kebab-case
         * camelTag    - the tag normalized to PascalCase
         * path        - a relative path to the current .vue file
         * component   - a parsed representation of the current component
         */
        match(originalTag, { kebabTag, camelTag, path, component }) {
          if (kebabTag.startsWith('core-')) {
            return [
              camelTag,
              `import ${camelTag} from '@/components/core/${camelTag.substring(
                4
              )}.vue'`,
            ]
          }
        },
      }),
    ],
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  

  build: {
    analyze: true,
    extractCSS: true,
    babel: {
      plugins: [['@babel/plugin-proposal-private-methods', { loose: true }]],
    },
  },
}

这是我的package.json文件

    {
  "name": "vetution-nuxt-ssr",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint": "yarn lint:js",
    "lint:fix": "eslint --ext .js,.vue . --fix"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.13.1",
    "@nuxtjs/google-adsense": "^1.3.0",
    "@nuxtjs/google-analytics": "^2.4.0",
    "@nuxtjs/gtm": "^2.4.0",
    "@nuxtjs/robots": "^2.5.0",
    "@nuxtjs/sitemap": "^2.4.0",
    "@nuxtjs/vuetify": "^1.11.3",
    "core-js": "^3.9.1",
    "intersection-observer": "^0.12.0",
    "jquery": "^3.6.0",
    "nuxt": "^2.15.3",
    "nuxt-dropzone": "^1.0.4",
    "nuxt-polyfill": "^1.0.3",
    "nuxt-webfontloader": "^1.1.0",
    "redirect-ssl": "^3.0.0",
    "smoothscroll-polyfill": "^0.4.4",
    "store": "^2.0.12",
    "url-polyfill": "^1.1.12",
    "vee-validate": "^3.4.5",
    "vue-slick": "^1.1.16",
    "vue-slick-carousel": "^1.0.6",
    "vuex-persist": "^3.1.3",
    "webpack-node-externals": "^3.0.0"
  },
  "devDependencies": {
    "@fullhuman/postcss-purgecss": "^4.0.3",
    "@nuxt/image": "^0.5.0",
    "@nuxtjs/dotenv": "^1.4.1",
    "@nuxtjs/eslint-config": "^6.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "babel-eslint": "^10.1.0",
    "css-byebye": "^3.0.0",
    "deepmerge": "^4.2.2",
    "dotenv": "^8.6.0",
    "eslint": "^7.22.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.7.0",
    "prettier": "^2.2.1",
    "sass": "^1.32.12",
    "sass-loader": "^10.1.1"
  }
}

Answer 1

查看错误消息代码，我在Quickstart using logging tools上发现了这一点。

很难确定500错误的原因，也称为服务器错误。在云日志下查找日志，或单击此link直接进入控制台。确保你在GAE app > your service name > App Engine Version中。首先检查尝试访问程序时出现的问题，然后查找错误原因的描述。如果您仍然无法发现任何内容，请尝试切换到所有日志。

根据您收到的错误，我查看了一些可能对您有帮助的文档：sdk_gcloud_reference、nuxt_installation。

正如我在您的代码中看到的，您可以尝试添加如下模块：

modules: ['@nuxt/image']`
image: {
 domains: ['https://vetution.online']

我可以提供的另一个建议是从devDependencies中删除nuxt模块。

添加类似的案例：https://githubmemory.com/repo/nuxt/image/issues/433