Page flagged as 404 not found despite statically built site and page existing?

Versions

  • nuxt: v2.14.12
  • node: v10.x
  • @nuxtjs/pwa: v3.3.3
  • @nuxtjs/component-cache: v1.1.6
  • @nuxt/content: v1.11.1

Reproduction

nuxt.config.js:

require('dotenv').config();
import axios from 'axios'
import getRoutes from './utils/getRoutes'

// exlcude sitemap pathd
const excludePaths = [
  '/account/recovery',
  '/account/reset',
  '/account/profile',
  '/account/domains/add',
  '/account/domains',
  '/account/monitors/add',
  '/account/monitors',
  '/help/account/introduction',
  '/help/monitors/introduction',
  '/help/domains/introduction'
]

export default {
  /*
  ** Nuxt rendering mode
  ** See https://nuxtjs.org/api/configuration-mode
  */
  mode: 'universal',
  /*
  ** Nuxt target
  ** See https://nuxtjs.org/api/configuration-target
  */
  target: 'static',
  /*
  ** Env variables
  */
  env: {
    BASE_URL: process.env.BASE_URL || "https://domain-monitor.io",
    API_URL: process.env.API_URL || "http://127.0.0.1:8000",
    ONESIGNAL_PUSH_APP_ID: process.env.ONESIGNAL_PUSH_APP_ID || "",
    ONESIGNAL_SAFARI_WEB_ID: process.env.ONESIGNAL_SAFARI_WEB_ID || "",
    GA_ID: process.env.GA_ID || ""
  },
  /*
  ** Headers of the page
  ** See https://nuxtjs.org/api/configuration-head
  */
  head: {
    title: 'Domain Monitor',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'og:title', name: 'og:title', content: 'Domain Monitor' },
      { hid: 'description', name: 'description', content: 'Keep track of your expiring domains today for FREE with our FREE domain monitoring product.' },
      { hid: 'og:description', name: 'og:description', content: 'Keep track of your expiring domains today for FREE with our FREE domain monitoring product.' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap' },
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons' }
    ],
    script: [
      { src: '/mailchimp.js' },
      { src: '/reddit-pixel.js' }
    ]
  },
  /*
  ** Global CSS
  */
  css: [
    '@/assets/scss/domain-monitor.scss'
  ],
  /*
  ** Bootstrap Vue
  */
  bootstrapVue: {
    bootstrapCSS: false,
    bootstrapVueCSS: false
  },
  /*
  ** Plugins to load before mounting the App
  ** https://nuxtjs.org/guide/plugins
  */
  plugins: [
    { mode: 'client', src: '@/plugins/filters' },
    { mode: 'client', src: '@/plugins/bootstrap-vue-icons' },
    { mode: 'client', src: '@/plugins/vue-axios' },
    { mode: 'client', src: '@/plugins/vee-validate' },
    { mode: 'client', src: '@/plugins/vue-moment' },
    { mode: 'client', src: '@/plugins/content-images' },
    { mode: 'client', src: '@/plugins/content-videos' }
  ],
  /*
  ** Auto import components
  ** See https://nuxtjs.org/api/configuration-components
  */
  components: true,
  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [
    ['@nuxtjs/google-analytics', {
      id: process.env.GA_ID
    }]
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
    'bootstrap-vue/nuxt',
    '@nuxtjs/axios',
    '@nuxtjs/auth',
    '@nuxtjs/onesignal',
    '@nuxtjs/pwa',
    '@nuxt/content',
    '@nuxtjs/sitemap',
    ['@nuxtjs/component-cache', { maxAge: 1000 * 60 * 5 }] // 5 minutes
  ],
  /*
  ** Auth config
  */
  auth: {
    redirect: {
      login: '/account/login',
      logout: '/account/login',
      callback: '/account/login',
      home: '/account/domains'
    },
    strategies: {
      local: {
        login: { url: 'auth/login', method: 'post', propertyName: 'token' },
        logout: { url: 'account/logout', method: 'post' },
        user: { url: 'auth/user', method: 'get', propertyName: 'user' }
      }
    }
  },
  /*
  ** One Signal
  */
  oneSignal: {
    init: {
      appId: process.env.ONESIGNAL_PUSH_APP_ID,
      safari_web_id: process.env.ONESIGNAL_SAFARI_WEB_ID,
      allowLocalhostAsSecureOrigin: true,
      welcomeNotification: {
          disable: true
      }
    }
  },
  /*
  ** Axios module configuration
  ** See https://axios.nuxtjs.org/options
  */
  axios: {
    baseURL: process.env.API_URL
  },
  /*
  ** Build configuration
  ** See https://nuxtjs.org/api/configuration-build/
  */
  build: {
    extractCSS: true,

    extend (config, ctx) {
      const vueLoader = config.module.rules.find((rule) => rule.loader === 'vue-loader')
      vueLoader.options.transformAssetUrls = {
        video: ['src', 'poster'],
        source: 'src',
        img: 'src',
        image: 'xlink:href',
        'b-img': 'src',
        'b-img-lazy': ['src', 'blank-src'],
        'b-card': 'img-src',
        'b-card-img': 'img-src',
        'b-card-img-lazy': ['src', 'blank-src'],
        'b-carousel-slide': 'img-src',
        'b-embed': 'src'
      }
    },

    babel: {
      compact: true
    }
  },
  /*
  ** Generate configuration
  ** See https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-generate
  */
  generate: {
    fallback: '404.html'
  },
  /*
  ** Sitemap configuration
  ** See https://www.npmjs.com/package/@nuxtjs/sitemap#setup
  */
  sitemap: {
    hostname: process.env.BASE_URL, // https://www.yoursite.com
    trailingSlash: true,
    exclude: excludePaths,
    routes() {
      return getRoutes(excludePaths);
    },
  }
}

Steps to reproduce

  1. Load up the reproduction URL which has been statically built using npm run build && npm run generate
  2. Observe the fact that the page has loaded
  3. Consider viewing network in console
  4. Reload the page

What is Expected?

The page should load correctly and be indexable by Google with all of the relevant resources, it should be reachable by a search engine.

What is actually happening?

For some strange reason, despite my URL being accessible by me, by Google PageSpeed Insights and via the search engine, Google is having trouble indexing this page and is flagging the page as being a 404 page not found.

When I click into the error, and choose the option to Test live url then then everything comes back okay, so I imagine Google is able to get to it, but for whatever reason is then failing at some point because of how the content is generated?

I’m not sure whether I’m missing something, Google hasn’t flagged any of the other pages as of yet, so my only guess is that there’s something wrong with my configuration?

In addition, I’m having issues loading images from my assets folder via the Nuxt JS Content module, I wonder whether this is related? I’ve opened an issue regarding this so it might be worth checking that out as well to aid with identifying a potential issue becuase I’m having to resolve the assets directory via a component, and I wonder whether they need to be placed inside of the static folder instead?

I’ll attach a screenshot, but would appriciate some guidance or suggestions here, thanks 👍

Screenshot 2021-01-12 at 10 04 37

1 possible answer(s) on “Page flagged as 404 not found despite statically built site and page existing?

  1. @danielroe I think I’ve got it, I removed Indexes from httpd.conf on the server on the line which lists options and symlinks, that now gives me a Forbidden error when trying to get to just the /_nuxt/ directory and I assume others