CODEWITHSUNDEEP
nuxt.jsamazon-cloudfront
Viral
Viral

Reputation: 461

Amazon Cloudfront CDN integration Into NUXT.js

I have website developed into nuxtjs. I have created AWS Cloudfront CDN instance and configured it.

Cloudfront cdn url is working fine and showing exact copy of my nuxtjs domain website.

My Requirement : I want nuxtjs project templates to serve all static content such as images, css and js from cloudfront instead of my existing domain folder. Can anyone guide me how to do that?

Steps I did :

I have used

build: {
   publicPath: 'https://AWS_CDN_ID.cloudfront.net' 
}

AWS_CDN_ID is my cloudfront.net instance id.

When I do npm run build It generates dist folder, But i could not found CDN url used anywhere for static content.

Can anyone please guide me what else i have to do here to use Amazon Cloudfront CDN url into static content during nuxt build ??

How to use content from cloudfront into NUXT.js templates ??

Thanks

ref. https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-build

Upvotes: 1

Views: 1948

Answers (1)

Chrisimir
Chrisimir

Reputation: 27

From the docs:

Then, when launching nuxt build, upload the content of .nuxt/dist/client directory to your CDN and voilà!

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

When configuring Cloudfront you have chosen an origin of your data, from what I understand your intention is to use S3. So in your case you should run the build command and afterwards copy the contents of .nuxt/dist/client to your S3 bucket.

The public link to the CDN is shown when setting it up, not sure if the AWS_CDN_ID you're trying to use is valid. Public link to CDN is here:

enter image description here

Upvotes: 0

Related Questions