#Nextjs Deploy to AWS S3

1 messages · Page 1 of 1 (latest)

prime arch
#

Im deploying 2 MFEs (static) nextjs app to AWS S3.

when Im done building the apps it goes to dist folder (p/s: im using nx tool to im running nx run-many --target=build --all --skip-nx-cache)

my question is, should we upload all files and folder of the MFEs apps into the s3 bucket?

this is my cmd:

aws s3 sync ./dist/apps/mfe1 s3://${{ env.AWS_S3_BUCKET }}/core --region ${{ secrets.AWS_REGION }} --delete

aws cloudfront create-invalidation --distribution-id ${{ env.AWS_CLOUDFRONT_DISTRIBUTION_ID }} --paths "/mfe1/*"
sly solsticeBOT
#

Hi @prime arch. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the information provided in the knowledge sources, I don't have specific details about deploying static Next.js apps to AWS S3 using the nx tool. However, I can provide some general guidance on deploying static Next.js apps to AWS S3.

When deploying static Next.js apps to AWS S3, you typically need to upload all the files generated in the build output directory (in your case, the dist folder) to the S3 bucket. This includes HTML, CSS, JavaScript, and any other assets required by your application.

Your command for syncing the dist folder to the S3 bucket looks correct. Here is a breakdown of the commands you provided:

  1. Syncing the build output to the S3 bucket:

    aws s3 sync ./dist/apps/mfe1 s3://${{ env.AWS_S3_BUCKET }}/core --region ${{ secrets.AWS_REGION }} --delete

    This command uploads the contents of the ./dist/apps/mfe1 directory to the specified S3 bucket and path (s3://${{ env.AWS_S3_BUCKET }}/core). The --delete flag ensures that any files in the S3 bucket that are not present in the dist directory are removed.

  2. Creating a CloudFront invalidation:

    aws cloudfront create-invalidation --distribution-id ${{ env.AWS_CLOUDFRONT_DISTRIBUTION_ID }} --paths "/mfe1/*"

    This command creates an invalidation for the specified CloudFront distribution, ensuring that the cached content is refreshed with the new files you just uploaded.

If you need more detailed instructions or run into specific issues, you might want to refer to the AWS documentation or the Next.js documentation for deploying static sites.