wan2land / serverless-nuxt

AWS Lambda + Serverless + Nuxt = Serverless Nuxt πŸš€πŸš€

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

`cdnPath` on the built seems to not work as expected.

wan2land opened this issue Β· comments

Hi @wan2land hope you're doing great, thanks for the work on this plugin! I'm writing because everything seems to be working fine, but the cdnPath on the built seems to not work as expected.

The weird thing is that in the .nuxt/dist/server/server.js for example the __webpack_public_path__ is properly set but when I navigate to the site (I'm using a custom domain) all the assets seems to be loaded from the /__nuxt/....

Do you have any idea where to look in order to fix this?

I have in the nuxt.config.js:

module.exports = {
  telemetry: false,
  mode: 'universal',
  target: 'server',
  srcDir: 'src/',
  server: {
    port: 4400,
  },
  head: {
    ...
  },
  build: {
    // The "publicPath" value is automatically generated by the serverless-nuxt plug-in
    // If the "publicPath" value is set, delete it.
  },
  buildModules: [
    ['@nuxtjs/google-analytics', { id: 'UA-XXX' }],
    '@nuxtjs/google-fonts',
    '@nuxtjs/tailwindcss',
  ],
}

and in the serverless.yml

service: service-name

frameworkVersion: '2'

plugins:
  - serverless-nuxt-plugin
  - serverless-s3-sync
  - serverless-dotenv-plugin
  - serverless-apigw-binary
  - serverless-offline
  - serverless-domain-manager

package:
  individually: true
  excludeDevDependencies: true
  exclude:
    - src/**
    - .nuxt/**
    - package.json
    - package-lock.json
    - .gitignore
    - .env.example
    - node_modules/**
    - src/static/**
  include:
    - .nuxt/dist/**

provider:
  name: aws
  runtime: nodejs12.x
  lambdaHashingVersion: 20201221
  region: us-east-2
  stage: ${env:STAGE}
  versionFunctions: false
  apiGateway:
    shouldStartNameWithService: true
  environment:
    NODE_ENV: ${env:NODE_ENV}

custom:
  buckets:
    ASSETS_BUCKET_NAME: ${self:service}-${self:provider.stage}
    STATIC_BUCKET_NAME: ${self:service}-static
  apigwBinary:
    types:
      - '*/*'
  serverless-offline:
    noPrependStageInUrl: true
    httpPort: 4400
  customDomain:
    domainName: ${env:DOMAIN}
    basePath: ''
    stage: ${self:provider.stage}
    createRoute53Record: true
  s3Sync:
    - bucketName: ${self:custom.buckets.STATIC_BUCKET_NAME}
      localDir: src/static
      acl: public-read
  nuxt:
    version: v${file(./package.json):version}
    bucketName: ${self:custom.buckets.ASSETS_BUCKET_NAME}
    # cdnPath:
    # assetsPath:
    # assetsCacheMaxAge:

resources:
  Resources:
    AssetsBucket:
      Type: AWS::S3::Bucket
      Properties:
        BucketName: ${self:custom.nuxt.bucketName}
        CorsConfiguration:
          CorsRules:
            - AllowedMethods:
              - GET
              - HEAD
              AllowedOrigins:
              - https://${env:DOMAIN}
    StaticBucket:
      Type: AWS::S3::Bucket
      Properties:
        BucketName: ${self:custom.buckets.STATIC_BUCKET_NAME}
        CorsConfiguration:
          CorsRules:
            - AllowedMethods:
              - GET
              - HEAD
              AllowedOrigins:
              - https://${env:DOMAIN}

functions: ...

Everything is being uploaded correctly, but the rendered site is looking the assets in /__nuxt/..., πŸ€” 😩

Any help is appreciate it!! thanks again

Originally posted by @cavi21 in #74 (comment)

commented

Hi @wan2land thanks for the followup on this! the versions are:

nuxt 2.15.1
nuxt-start 2.15.1
serverless-nuxt 1.1.1
serverless-nuxt-plugin 1.2.0

And serverless 2.23.0 (standalone)

There is no problem in nuxt <= v2.14, but the same problem as the issue occurred in nuxt v2.15.

I am trying to figure out an issue with nuxt v2.15. Please wait. πŸ™πŸ™

Ref. https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-build/#publicpath

In Nuxt 2.15+, changing the value of this property at runtime will override the configuration of an app that has already been built.

πŸ€¦β€β™‚οΈ

@cavi21 

First, update the serverless-nuxt-plugin package.

npm install serverless-nuxt-plugin@1.3.0 -D

And in the nuxt.config.js file, set env variables in the publicPath as follows.

https://github.com/wan2land/serverless-nuxt/blob/main/docs/installation.md

// Change "export default" => "module.exports ="
module.exports = {
  target: 'server',
  head: {
    /* ... */
  },
  build: {
    // The "publicPath" value is automatically generated by the serverless-nuxt plug-in
    publicPath: process.env.SERVERLESS_NUXT_PUBLIC_PATH,
  },
}
commented

Hi @wan2land you're amazing!! everything is working now as expected! thank you so much! If you are ok we can close this issue.

Thanks!!