{"id":32462,"date":"2024-11-19T11:57:41","date_gmt":"2024-11-19T11:57:41","guid":{"rendered":"https:\/\/www.vocso.com\/blog\/?p=32462"},"modified":"2024-11-20T07:26:56","modified_gmt":"2024-11-20T07:26:56","slug":"deploying-a-next-js-application-on-aws-step-by-step-guide","status":"publish","type":"post","link":"https:\/\/www.vocso.com\/blog\/deploying-a-next-js-application-on-aws-step-by-step-guide\/","title":{"rendered":"Deploying a NextJS Application on AWS: Step by Step Guide"},"content":{"rendered":"<div style=\"margin-top: 0px; margin-bottom: 0px;\" class=\"sharethis-inline-share-buttons\" ><\/div>\n<p>Deploying a <strong>NextJS application<\/strong> on AWS allows developers to leverage the full power of cloud infrastructure, offering flexibility, scalability, and security. AWS provides a variety of services that seamlessly integrate with <a href=\"https:\/\/www.vocso.com\/hire-nextjs-developers\" target=\"_blank\" rel=\"noreferrer noopener\">NextJS<\/a>, enabling developers to choose between different deployment models based on the project\u2019s specific needs.<\/p>\n\n\n\n<p>Let&#8217;s go through deploying a NextJS app using Amazon <strong>EC2<\/strong> and Amazon <strong>Lightsail<\/strong>, each paired with Bitnami for ease of use, step by step.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_81 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title ez-toc-toggle\" style=\"cursor:pointer\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.vocso.com\/blog\/deploying-a-next-js-application-on-aws-step-by-step-guide\/#why-choose-aws-for-nextjs\" >Why Choose AWS for NextJS?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.vocso.com\/blog\/deploying-a-next-js-application-on-aws-step-by-step-guide\/#prerequisites\" >Prerequisites<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.vocso.com\/blog\/deploying-a-next-js-application-on-aws-step-by-step-guide\/#aws-account-setup\" >AWS Account Setup<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.vocso.com\/blog\/deploying-a-next-js-application-on-aws-step-by-step-guide\/#aws-cli-installation-and-configuration\" >AWS CLI Installation and Configuration<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.vocso.com\/blog\/deploying-a-next-js-application-on-aws-step-by-step-guide\/#iam-user-and-permissions-setup\" >IAM User and Permissions Setup<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.vocso.com\/blog\/deploying-a-next-js-application-on-aws-step-by-step-guide\/#nodejs-and-nextjs-installation\" >NodeJS and NextJS Installation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.vocso.com\/blog\/deploying-a-next-js-application-on-aws-step-by-step-guide\/#basic-knowledge-of-aws-and-nextjs\" >Basic Knowledge of AWS and NextJS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.vocso.com\/blog\/deploying-a-next-js-application-on-aws-step-by-step-guide\/#version-control-system-git\" >Version Control System (Git)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.vocso.com\/blog\/deploying-a-next-js-application-on-aws-step-by-step-guide\/#quick-checklist\" >Quick Checklist<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.vocso.com\/blog\/deploying-a-next-js-application-on-aws-step-by-step-guide\/#understanding-the-aws-architecture-for-nextjs\" >Understanding the AWS Architecture for NextJS<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.vocso.com\/blog\/deploying-a-next-js-application-on-aws-step-by-step-guide\/#architecture-overview\" >Architecture Overview<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.vocso.com\/blog\/deploying-a-next-js-application-on-aws-step-by-step-guide\/#choosing-a-compute-option-ec2-vs-lightsail\" >Choosing a Compute Option: EC2 vs. Lightsail<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.vocso.com\/blog\/deploying-a-next-js-application-on-aws-step-by-step-guide\/#storage-amazon-s3-for-static-assets\" >Storage: Amazon S3 for Static Assets<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.vocso.com\/blog\/deploying-a-next-js-application-on-aws-step-by-step-guide\/#cdn-amazon-cloudfront-for-global-content-delivery\" >CDN: Amazon CloudFront for Global Content Delivery<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.vocso.com\/blog\/deploying-a-next-js-application-on-aws-step-by-step-guide\/#architecture-summary\" >Architecture Summary<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/www.vocso.com\/blog\/deploying-a-next-js-application-on-aws-step-by-step-guide\/#aws-ec2-with-bitnami-for-nextjs\" >AWS EC2 with Bitnami for NextJS<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/www.vocso.com\/blog\/deploying-a-next-js-application-on-aws-step-by-step-guide\/#step-1-launch-an-ec2-instance-with-bitnami-nodejs-stack\" >Step 1: Launch an EC2 Instance with Bitnami NodeJS Stack<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/www.vocso.com\/blog\/deploying-a-next-js-application-on-aws-step-by-step-guide\/#step-2-connect-to-your-ec2-instance\" >Step 2: Connect to Your EC2 Instance<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/www.vocso.com\/blog\/deploying-a-next-js-application-on-aws-step-by-step-guide\/#step-3-upload-or-clone-your-nextjs-project\" >Step 3: Upload or Clone Your NextJS Project<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/www.vocso.com\/blog\/deploying-a-next-js-application-on-aws-step-by-step-guide\/#step-4-install-dependencies-and-build-your-app\" >Step 4: Install Dependencies and Build Your App<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/www.vocso.com\/blog\/deploying-a-next-js-application-on-aws-step-by-step-guide\/#step-5-configure-nginx-to-serve-your-nextjs-application\" >Step 5: Configure Nginx to Serve Your NextJS Application<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/www.vocso.com\/blog\/deploying-a-next-js-application-on-aws-step-by-step-guide\/#step-6-use-pm2-to-keep-the-nextjs-app-running\" >Step 6: Use PM2 to Keep the NextJS App Running<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/www.vocso.com\/blog\/deploying-a-next-js-application-on-aws-step-by-step-guide\/#step-7-access-your-nextjs-application\" >Step 7: Access Your NextJS Application<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/www.vocso.com\/blog\/deploying-a-next-js-application-on-aws-step-by-step-guide\/#aws-lightsail-with-bitnami-for-nextjs\" >AWS Lightsail with Bitnami for NextJS<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/www.vocso.com\/blog\/deploying-a-next-js-application-on-aws-step-by-step-guide\/#step-1-create-a-lightsail-instance-with-bitnami-stack\" >Step 1: Create a Lightsail Instance with Bitnami Stack<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-26\" href=\"https:\/\/www.vocso.com\/blog\/deploying-a-next-js-application-on-aws-step-by-step-guide\/#step-2-connect-to-your-lightsail-instance\" >Step 2: Connect to Your Lightsail Instance<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-27\" href=\"https:\/\/www.vocso.com\/blog\/deploying-a-next-js-application-on-aws-step-by-step-guide\/#step-3-upload-or-clone-your-nextjs-project-2\" >Step 3: Upload or Clone Your NextJS Project<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-28\" href=\"https:\/\/www.vocso.com\/blog\/deploying-a-next-js-application-on-aws-step-by-step-guide\/#step-4-install-dependencies-and-build-the-nextjs-application\" >Step 4: Install Dependencies and Build the NextJS Application<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-29\" href=\"https:\/\/www.vocso.com\/blog\/deploying-a-next-js-application-on-aws-step-by-step-guide\/#step-5-set-up-the-nginx-as-a-reverse-proxy\" >Step 5. Set Up the Nginx as a Reverse Proxy<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-30\" href=\"https:\/\/www.vocso.com\/blog\/deploying-a-next-js-application-on-aws-step-by-step-guide\/#step-6-use-pm2-to-keep-the-application-running\" >Step 6: Use PM2 to Keep the Application Running<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-31\" href=\"https:\/\/www.vocso.com\/blog\/deploying-a-next-js-application-on-aws-step-by-step-guide\/#step-7-access-the-application\" >Step 7: Access the Application<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-32\" href=\"https:\/\/www.vocso.com\/blog\/deploying-a-next-js-application-on-aws-step-by-step-guide\/#using-amazon-s3\" >Using Amazon S3<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-33\" href=\"https:\/\/www.vocso.com\/blog\/deploying-a-next-js-application-on-aws-step-by-step-guide\/#step-1-preparing-your-nextjs-project-for-s3\" >Step 1: Preparing Your NextJS Project for S3<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-34\" href=\"https:\/\/www.vocso.com\/blog\/deploying-a-next-js-application-on-aws-step-by-step-guide\/#step-2-setting-up-an-s3-bucket\" >Step 2: Setting Up an S3 Bucket<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-35\" href=\"https:\/\/www.vocso.com\/blog\/deploying-a-next-js-application-on-aws-step-by-step-guide\/#step-3-using-s3-for-pre-rendered-html-files\" >Step 3: Using S3 for Pre-rendered HTML Files<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-36\" href=\"https:\/\/www.vocso.com\/blog\/deploying-a-next-js-application-on-aws-step-by-step-guide\/#using-amazon-cloudfront\" >Using Amazon CloudFront<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-37\" href=\"https:\/\/www.vocso.com\/blog\/deploying-a-next-js-application-on-aws-step-by-step-guide\/#step-1-configure-cloudfront-for-static-content\" >Step 1: Configure CloudFront for Static Content<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-38\" href=\"https:\/\/www.vocso.com\/blog\/deploying-a-next-js-application-on-aws-step-by-step-guide\/#step-2-configure-cloudfront-for-ssr-content\" >Step 2: Configure CloudFront for SSR Content<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-39\" href=\"https:\/\/www.vocso.com\/blog\/deploying-a-next-js-application-on-aws-step-by-step-guide\/#conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"why-choose-aws-for-nextjs\"><\/span>Why Choose AWS for NextJS?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\" type=\"1\"><li><strong>Scalability<\/strong>: AWS EC2 provides flexible scaling options with auto-scaling, while Lightsail offers simple scaling with fixed pricing, ideal for smaller apps.<\/li><li><strong>Security<\/strong>: Both EC2 and Lightsail integrate with AWS IAM, allowing for secure access management. EC2 also supports custom security groups for advanced configurations.<\/li><li><strong>Cost Efficiency<\/strong>: Lightsail offers a predictable cost structure with fixed pricing, whereas EC2\u2019s pay-as-you-go model lets you scale according to your needs, optimizing costs for large applications.<\/li><li><strong>Performance<\/strong>: AWS\u2019s global infrastructure ensures faster load times, with EC2 offering high-performance configurations and Lightsail providing a simpler, faster solution for smaller apps.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"prerequisites\"><\/span>Prerequisites<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Before deploying a <a href=\"https:\/\/www.vocso.com\/case-study\/colleges18-college-discovery-web-application-development-with-strapi-nextjs\" target=\"_blank\" rel=\"noreferrer noopener\">NextJS application<\/a> to AWS, it&#8217;s essential to ensure you have the right tools, permissions, and configurations in place. This step will walk you through all the prerequisites to make the deployment process smoother.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"aws-account-setup\"><\/span>AWS Account Setup<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/AWS-free-tier.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"468\" src=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/AWS-free-tier-1024x468.png\" alt=\"\" class=\"wp-image-32613\" srcset=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/AWS-free-tier-1024x468.png 1024w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/AWS-free-tier-300x137.png 300w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/AWS-free-tier-768x351.png 768w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/AWS-free-tier-624x285.png 624w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/AWS-free-tier.png 1363w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>If you don\u2019t already have an AWS account, visit https:\/\/aws.amazon.com and sign up. AWS offers a free tier, which includes limited usage of services like EC2, S3, and CloudFront suitable for testing purposes. Be mindful of usage limits to avoid unexpected charges, especially if this is your first time using AWS.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"aws-cli-installation-and-configuration\"><\/span>AWS CLI Installation and Configuration<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>To set up your NextJS application on AWS, start by configuring the AWS CLI.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>EC2 Setup<\/strong>: In the AWS Management Console, navigate to the EC2 section and set up an EC2 instance. You\u2019ll need to choose an instance type (e.g., t2.micro for free-tier), select an operating system (Amazon Linux, Ubuntu, etc.), and configure security groups (firewall settings) to allow HTTP\/HTTPS traffic.<\/li><li><strong>Lightsail Setup<\/strong>: For Lightsail, simply log into the Lightsail console, choose an instance type, and select an OS blueprint that fits your application needs. Lightsail is particularly beginner-friendly and offers a simplified interface.<\/li><\/ul>\n\n\n\n<p><em><strong>Note<\/strong><\/em>: AWS CLI configuration ensures that all AWS commands issued from your terminal will interact with your account securely.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"iam-user-and-permissions-setup\"><\/span>IAM User and Permissions Setup<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>AWS Identity and Access Management (IAM) lets you create users with specific access permissions. If you&#8217;re deploying on behalf of a team, or handling sensitive data, IAM is essential for secure access control.<\/p>\n\n\n\n<p>1. <strong>Create an IAM User<\/strong>: Navigate to the IAM Console in AWS, create a new user with programmatic access, and assign relevant permissions. For EC2 and Lightsail deployments, assign policies such as AmazonEC2FullAccess, LightsailFullAccess, and AmazonS3FullAccess.<\/p>\n\n\n\n<p>2. <strong>Save Credentials<\/strong>: After the IAM user is created, AWS will generate an Access Key ID and Secret Access Key for the user. Download and securely store these credentials, as they are needed for CLI interactions.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"nodejs-and-nextjs-installation\"><\/span>NodeJS and NextJS Installation<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Since NextJS is a Node-based framework, having the latest version of <a href=\"https:\/\/www.vocso.com\/nodejs-development-services-company\" target=\"_blank\" rel=\"noreferrer noopener\">NodeJS<\/a> is crucial for a seamless experience.<\/p>\n\n\n\n<p>1. <strong>Install NodeJS<\/strong>:Download and install NodeJS from the official website if it isn\u2019t already installed on your system.<\/p>\n\n\n\n<p>2. <strong>Verify your NodeJS installation<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">node -v\n\nnpm -v<\/code><\/pre>\n\n\n\n<p>3. <strong>Install NextJS<\/strong>: If you don\u2019t already have a NextJS project, you can create one with the following command:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">npx create-next-app@latest<\/code><\/pre>\n\n\n\n<p>This command generates a boilerplate NextJS project structure, including essential configuration files and dependencies.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"basic-knowledge-of-aws-and-nextjs\"><\/span>Basic Knowledge of AWS and NextJS<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Before diving into deployment, familiarize yourself with:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>AWS Services<\/strong>: Key services like popular instances\/server options like EC2\/Lightsail and other services are crucial when deploying <a href=\"https:\/\/www.vocso.com\/web-application-development\" target=\"_blank\" rel=\"noreferrer noopener\">web applications<\/a>. Understanding how these services work together will help you make the most of AWS for your NextJS deployment. EC2 is suitable for large-scale or complex applications, while Lightsail offers a more user-friendly, simplified setup for smaller projects.<\/li><li><strong>NextJS Framework<\/strong>: Be familiar with the fundamentals of Server-Side Rendering (SSR) and Static Site Generation (SSG) in NextJS. These concepts play a key role in optimizing your deployment and ensuring your application performs well, especially when it comes to SEO and user experience.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"version-control-system-git\"><\/span>Version Control System (Git)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>For a smooth deployment process, especially if setting up CI\/CD pipelines, ensure your project is under version control with Git. GitHub, GitLab, or Bitbucket are popular hosting platforms that integrate well with AWS deployment processes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"quick-checklist\"><\/span>Quick Checklist<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Before moving forward, ensure you have:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>An AWS account with proper IAM roles and access keys.<\/li><li>AWS CLI configured on your local machine.<\/li><li>NodeJS and NextJS installed.<\/li><li>A basic understanding of AWS services and NextJS fundamentals.<\/li><li>Your project initialized in Git for version control.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"understanding-the-aws-architecture-for-nextjs\"><\/span>Understanding the AWS Architecture for NextJS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>When deploying a NextJS application on AWS, it&#8217;s important to understand how the platform&#8217;s various services work together to support different parts of your application. AWS provides several options for hosting both the backend (server-side rendered pages, API routes) and frontend (static assets, images) aspects of your NextJS app.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"architecture-overview\"><\/span>Architecture Overview<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>A typical deployment setup on AWS for a NextJS application involves three core components:<\/p>\n\n\n\n<p>1. <strong>Compute<\/strong>: For server-side rendering and dynamic API routes, which can be handled by EC2\/Lightsail:<\/p>\n\n\n\n<p>EC2 Instances<strong>:<\/strong> AWS EC2 offers virtual machines that provide full control over the server environment. It\u2019s ideal for complex applications requiring custom configurations, including server-side rendering (SSR) and API routes.<\/p>\n\n\n\n<p>Lightsail Instances<strong>:<\/strong> Lightsail offers a simplified, managed virtual server platform, perfect for small to medium-sized applications. Lightsail is easy to set up and manage, making it an excellent choice for developers who want a more straightforward approach without the complexity of EC2.<\/p>\n\n\n\n<p>2. <strong>Storage<\/strong>: Both EC2 and Lightsail can integrate with Amazon S3 to store static files such as images, JavaScript, and CSS. For applications utilizing Static Site Generation (SSG), S3 can also be used to host pre-rendered HTML files.<\/p>\n\n\n\n<p>3. <strong>Content Delivery Network (CDN)<\/strong>: Amazon CloudFront serves as a CDN for caching and delivering static and server-side rendered (SSR) content globally, improving load times and reducing latency for users around the world.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"choosing-a-compute-option-ec2-vs-lightsail\"><\/span>Choosing a Compute Option: EC2 vs. Lightsail<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/AWS-compute.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"483\" src=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/AWS-compute-1024x483.png\" alt=\"\" class=\"wp-image-32617\" srcset=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/AWS-compute-1024x483.png 1024w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/AWS-compute-300x141.png 300w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/AWS-compute-768x362.png 768w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/AWS-compute-624x294.png 624w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/AWS-compute.png 1360w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>AWS provides many flexible compute options out of which we will go through AWS EC2 and AWS Lightsail, with each one catering to specific deployment needs.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">EC2 Instances:<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Pros:<\/strong> Full control over your server environment, which is ideal for complex deployments or custom configurations needed for SSR and API routes in NextJS.<\/li><li><strong>Cons:<\/strong> Requires more management and can be costlier, as you pay for the instance whether it\u2019s in use or not.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Lightsail Instances:<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Pros:<\/strong> A simplified interface with pre-configured blueprints and easy management, making it an excellent choice for smaller applications or developers looking for a straightforward setup.<\/li><li><strong>Cons:<\/strong> Limited flexibility compared to EC2. Not ideal for highly complex applications that require custom server configurations.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"storage-amazon-s3-for-static-assets\"><\/span>Storage: Amazon S3 for Static Assets<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/Amazon-s3.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"435\" src=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/Amazon-s3-1024x435.png\" alt=\"\" class=\"wp-image-32619\" srcset=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/Amazon-s3-1024x435.png 1024w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/Amazon-s3-300x127.png 300w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/Amazon-s3-768x326.png 768w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/Amazon-s3-624x265.png 624w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/Amazon-s3.png 1362w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Amazon S3 is commonly used for hosting static files like images, CSS, and JavaScript. This storage option is both scalable and cost-efficient, providing high availability and reliability.<\/p>\n\n\n\n<p><strong>Static Export<\/strong>: If your NextJS app uses Static Site Generation (SSG), you can export the app as static HTML, CSS, and JavaScript files and host them directly in S3. This approach removes the need for a server and integrates well with CloudFront for global distribution.<\/p>\n\n\n\n<p><strong>Asset Hosting<\/strong>: If your NextJS application generates images or uses static assets stored in the public folder, they can be stored in an S3 bucket. S3 allows you to offload assets from your server, reducing load and improving performance.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"cdn-amazon-cloudfront-for-global-content-delivery\"><\/span>CDN: Amazon CloudFront for Global Content Delivery<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/Amazon-cloudfront.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"440\" src=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/Amazon-cloudfront-1024x440.png\" alt=\"\" class=\"wp-image-32621\" srcset=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/Amazon-cloudfront-1024x440.png 1024w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/Amazon-cloudfront-300x129.png 300w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/Amazon-cloudfront-768x330.png 768w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/Amazon-cloudfront-624x268.png 624w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/Amazon-cloudfront.png 1364w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>CloudFront serves as a CDN for caching and delivering static content (and, in some cases, SSR content). By caching content in edge locations around the world, CloudFront reduces latency, resulting in faster page loads for end-users.<\/p>\n\n\n\n<p><strong>Setup<\/strong>: Configuring CloudFront with EC2 and Lightsail<\/p>\n\n\n\n<p>To leverage CloudFront for your NextJS app, configure it to serve content from your EC2 instances or Lightsail resources. For EC2, CloudFront can cache both static and dynamic content, while for Lightsail, CloudFront serves as a global caching layer, providing faster access to static assets and dynamic content.<\/p>\n\n\n\n<p><strong>Cache Control: <\/strong>Optimizing Content Delivery<\/p>\n\n\n\n<p>Managing cache behavior through cache-control headers ensures that CloudFront delivers fresh content efficiently while reducing the load on your backend. By configuring cache-control headers, you can determine how long CloudFront caches static content and when it should check for updates, ensuring that users receive the most up-to-date version of your app without unnecessary delays.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"architecture-summary\"><\/span>Architecture Summary<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>In summary, a NextJS deployment architecture on AWS might look like this:<\/p>\n\n\n\n<p>EC2 or Lightsail for handling server-side rendering and API routes (choose EC2 for full server control or Lightsail for a simplified setup).<\/p>\n\n\n\n<p>Amazon S3 for storing static assets and pre-rendered HTML files.<\/p>\n\n\n\n<p>Amazon CloudFront as a CDN to deliver cached static and SSR content globally, ensuring faster load times and improved performance.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"aws-ec2-with-bitnami-for-nextjs\"><\/span>AWS EC2 with Bitnami for NextJS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/amazon-ec2.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"492\" src=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/amazon-ec2-1024x492.png\" alt=\"\" class=\"wp-image-32623\" srcset=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/amazon-ec2-1024x492.png 1024w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/amazon-ec2-300x144.png 300w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/amazon-ec2-768x369.png 768w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/amazon-ec2-624x300.png 624w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/amazon-ec2.png 1366w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"step-1-launch-an-ec2-instance-with-bitnami-nodejs-stack\"><\/span>Step 1: Launch an EC2 Instance with Bitnami NodeJS Stack<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>Access the AWS Console<\/strong>: Log into your AWS Management Console.<\/p>\n\n\n\n<p><strong>Go to the EC2 Dashboard<\/strong>: In the left-hand navigation menu, click on EC2 under the \u201cCompute\u201d section.<\/p>\n\n\n\n<p><strong>Search for Bitnami NodeJS Stack<\/strong>: In the EC2 dashboard, search for the Bitnami NodeJS stack in the AWS Marketplace. This will automatically set up an EC2 instance with the NodeJS pre-installed.<\/p>\n\n\n\n<p><strong>Select an Instance Type<\/strong>: Choose an appropriate instance size, such as t2.micro (free-tier eligible) or larger, depending on your needs.<\/p>\n\n\n\n<p><strong>Configure the Instance<\/strong>: Configure your security groups to allow incoming traffic on HTTP (port 80), HTTPS (port 443), and SSH (port 22). This will enable web traffic and SSH access for server management.<\/p>\n\n\n\n<p><strong>Launch the Instance<\/strong>: Click on Launch and follow the prompts to create your instance.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"step-2-connect-to-your-ec2-instance\"><\/span>Step 2: Connect to Your EC2 Instance<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Once your EC2 instance is running, you\u2019ll need to connect to it using SSH. You can do this with your terminal or command prompt.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">ssh -i \/path\/to\/your-key.pem bitnami@&lt;ec2-public-ip&gt;<\/code><\/pre>\n\n\n\n<p>This will give you command-line access to your instance where you can start setting up your NextJS app.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"step-3-upload-or-clone-your-nextjs-project\"><\/span>Step 3: Upload or Clone Your NextJS Project<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Upload Your Project: Use SCP, SFTP, or Git to upload or clone your NextJS project files to the instance.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">git clone &lt;repository-url&gt;\ncd &lt;project-directory&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"step-4-install-dependencies-and-build-your-app\"><\/span>Step 4: Install Dependencies and Build Your App<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Once your project is on the server, install the necessary dependencies and build your NextJS application:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">npm install\nnpm run build\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"step-5-configure-nginx-to-serve-your-nextjs-application\"><\/span>Step 5: Configure Nginx to Serve Your NextJS Application<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Bitnami stacks typically come with Nginx pre-installed. Since NextJS runs on port 3000 by default, you will need to set up Nginx as a reverse proxy to route traffic from the web server to your NextJS application.<\/p>\n\n\n\n<p>Edit the Nginx configuration file (\/opt\/bitnami\/nginx\/conf\/nginx.conf):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">server {\n    listen 80;\n    server_name &lt;your-domain-or-ip&gt;;\n\n    location \/ {\n        proxy_pass http:\/\/localhost:3000; # NextJS app running on port 3000\n        proxy_http_version 1.1;\n        proxy_set_header Upgrade $http_upgrade;\n        proxy_set_header Connection 'upgrade';\n        proxy_set_header Host $host;\n        proxy_cache_bypass $http_upgrade;\n    }\n}\n<\/code><\/pre>\n\n\n\n<p>Restart Nginx to apply the changes:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">sudo \/opt\/bitnami\/ctlscript.sh restart nginx\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"step-6-use-pm2-to-keep-the-nextjs-app-running\"><\/span>Step 6: Use PM2 to Keep the NextJS App Running<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>It\u2019s a good practice to use PM2, a process manager, to keep your NextJS app running in the background. PM2 will ensure that your app restarts automatically if it crashes.<\/p>\n\n\n\n<p>Install PM2:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">npm install -g pm2<\/code><\/pre>\n\n\n\n<p>Start the application using PM2:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">pm2 start npm --name \"nextjs-app\" -- start<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"step-7-access-your-nextjs-application\"><\/span>Step 7: Access Your NextJS Application<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Now, you can access your the NextJS application by navigating to the public IP address of your EC2 instance in a web browser. If everything is configured correctly, you should see your NextJS app live on the internet.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"aws-lightsail-with-bitnami-for-nextjs\"><\/span>AWS Lightsail with Bitnami for NextJS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/aws-lightsail.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"469\" src=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/aws-lightsail-1024x469.png\" alt=\"\" class=\"wp-image-32625\" srcset=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/aws-lightsail-1024x469.png 1024w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/aws-lightsail-300x138.png 300w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/aws-lightsail-768x352.png 768w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/aws-lightsail-624x286.png 624w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/aws-lightsail.png 1359w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"step-1-create-a-lightsail-instance-with-bitnami-stack\"><\/span>Step 1: Create a Lightsail Instance with Bitnami Stack<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>Log into Lightsail: <\/strong>Go to the AWS Lightsail dashboard.<\/p>\n\n\n\n<p><strong>Choose a Bitnami NodeJS Stack: <\/strong>Search for the Bitnami NodeJS stack and choose it. This pre-configured stack will have NodeJS, Nginx, and other essential software ready to use.<\/p>\n\n\n\n<p><strong>Select an Instance Plan: <\/strong>Choose an appropriate instance size based on your app\u2019s requirements. The Lightsail offers several plans, starting at $3.50\/month.<\/p>\n\n\n\n<p><strong>Create the Instance: <\/strong>After selecting the plan, click Create Instance.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"step-2-connect-to-your-lightsail-instance\"><\/span>Step 2: Connect to Your Lightsail Instance<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>After the instance is up and running, you can connect to it via SSH directly from the Lightsail console:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">ssh -i \/path\/to\/your-key.pem bitnami@&lt;lightsail-public-ip&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"step-3-upload-or-clone-your-nextjs-project-2\"><\/span>Step 3: Upload or Clone Your NextJS Project<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>You\u2019ll need to upload your NextJS application to the Lightsail instance. You can do this by either:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Cloning your Git repository<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">git clone &lt;repository-url&gt;\ncd &lt;project-directory&gt;\n<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Uploading via SFTP or SCP<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"step-4-install-dependencies-and-build-the-nextjs-application\"><\/span>Step 4: Install Dependencies and Build the NextJS Application<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Once your files are on the Lightsail instance, navigate to the project folder and run:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">cd &lt;project-directory&gt;\nnpm install\nnpm run build\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"step-5-set-up-the-nginx-as-a-reverse-proxy\"><\/span>Step 5. Set Up the Nginx as a Reverse Proxy<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Since Bitnami on Lightsail also includes Nginx, you\u2019ll need to configure it to serve your NextJS application by editing the Nginx configuration file:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">sudo nano \/opt\/bitnami\/nginx\/conf\/nginx.conf<\/code><\/pre>\n\n\n\n<p>Make sure the configuration routes requests to your NextJS app running on port 3000:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">server {\n    listen 80;\n    server_name &lt;your-domain-or-ip&gt;;\n\n    location \/ {\n        proxy_pass http:\/\/localhost:3000;\n        proxy_http_version 1.1;\n        proxy_set_header Upgrade $http_upgrade;\n        proxy_set_header Connection 'upgrade';\n        proxy_set_header Host $host;\n        proxy_cache_bypass $http_upgrade;\n    }\n}\n<\/code><\/pre>\n\n\n\n<p>After saving the changes, restart Nginx:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">sudo \/opt\/bitnami\/ctlscript.sh restart nginx\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"step-6-use-pm2-to-keep-the-application-running\"><\/span>Step 6: Use PM2 to Keep the Application Running<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>To ensure that your NextJS app remains active after rebooting the server or crashing, use PM2 to manage the process:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">npm install -g pm2\npm2 start npm --name \"nextjs-app\" -- start\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"step-7-access-the-application\"><\/span>Step 7: Access the Application<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Now, you can access your NextJS application using the Lightsail public IP address or domain (if you&#8217;ve set one up).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"using-amazon-s3\"><\/span>Using Amazon S3<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/aws-s3.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"481\" src=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/aws-s3-1024x481.png\" alt=\"\" class=\"wp-image-32627\" srcset=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/aws-s3-1024x481.png 1024w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/aws-s3-300x141.png 300w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/aws-s3-768x360.png 768w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/aws-s3-624x293.png 624w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/aws-s3.png 1366w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Amazon S3 (Simple Storage Service) is a highly durable and scalable object storage solution ideal for hosting static assets such as images, JavaScript, CSS files, and pre-rendered HTML from your NextJS application. By storing static content in S3, you reduce server load and improve the user experience through faster access to assets.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"step-1-preparing-your-nextjs-project-for-s3\"><\/span>Step 1: Preparing Your NextJS Project for S3<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Build your NextJS project:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">npm run build\nnpm run export<\/code><\/pre>\n\n\n\n<p>The export command generates a \/out folder containing static assets and pre-rendered HTML files for pages using Static Site Generation (SSG).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"step-2-setting-up-an-s3-bucket\"><\/span>Step 2: Setting Up an S3 Bucket<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>Create a Bucket:<\/strong><\/p>\n\n\n\n<p>Go to the the S3 Console and click on &#8220;Create bucket.&#8221;<\/p>\n\n\n\n<p>Name the bucket (e.g., nextjs-static-assets ) and choose a region close to your server or primary user base.<\/p>\n\n\n\n<p><strong>Configure Bucket Settings:<\/strong><\/p>\n\n\n\n<p>Enable versioning to track changes to assets.<\/p>\n\n\n\n<p>Disable public access if you intend to use CloudFront for content delivery.<\/p>\n\n\n\n<p><strong>Upload Files to S3:<\/strong> Use the AWS CLI or AWS Management Console to upload your static files.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">aws s3 cp .\/out s3:\/\/nextjs-static-assets --recursive\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"step-3-using-s3-for-pre-rendered-html-files\"><\/span>Step 3: Using S3 for Pre-rendered HTML Files<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Pre-rendered HTML pages generated during the NextJS export process can be served from S3 directly or through CloudFront. This approach is particularly beneficial for static pages that do not rely on server-side rendering.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"using-amazon-cloudfront\"><\/span>Using Amazon CloudFront<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/aws-cloudfront.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"477\" src=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/aws-cloudfront-1024x477.png\" alt=\"\" class=\"wp-image-32629\" srcset=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/aws-cloudfront-1024x477.png 1024w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/aws-cloudfront-300x140.png 300w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/aws-cloudfront-768x358.png 768w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/aws-cloudfront-624x291.png 624w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2024\/11\/aws-cloudfront.png 1365w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Amazon CloudFront is a Content Delivery Network (CDN) that accelerates content delivery by caching static files and server-rendered pages at edge locations around the world. With CloudFront, you can reduce latency, improve performance, and provide a seamless user experience globally.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"step-1-configure-cloudfront-for-static-content\"><\/span>Step 1: Configure CloudFront for Static Content<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>Create a CloudFront Distribution:<\/strong><\/p>\n\n\n\n<p>Go to CloudFront Console and create a new distribution.<\/p>\n\n\n\n<p>Choose your S3 bucket as the origin for static assets.<\/p>\n\n\n\n<p><strong>Set Cache Behavior:<\/strong> Use default cache settings for assets like CSS, JS, and images.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">Cache-Control: max-age=31536000, public<\/code><\/pre>\n\n\n\n<p>Enable compression for text-based files (e.g., HTML, CSS, JavaScript).<\/p>\n\n\n\n<p><strong>Attach Custom Domain (Optional):<\/strong> Use Route 53 or your DNS provider to map your CloudFront distribution to a custom domain.<\/p>\n\n\n\n<p><strong>Enable HTTPS:<\/strong> Use AWS Certificate Manager to add an SSL certificate for your domain.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"step-2-configure-cloudfront-for-ssr-content\"><\/span>Step 2: Configure CloudFront for SSR Content<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>Add EC2 or Lightsail as an Origin:<\/strong><\/p>\n\n\n\n<p>Configure your CloudFront distribution to point to your EC2 or Lightsail instance for dynamic content.<\/p>\n\n\n\n<p>Use the public IP or domain name of your instance as the origin.<\/p>\n\n\n\n<p><strong>Optimize Cache Policies:<\/strong> For server-rendered content, set shorter TTL (Time-to-Live) values to ensure freshness:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">Cache-Control: max-age=60, must-revalidate\n<\/code><\/pre>\n\n\n\n<p><strong>Use Path Patterns:<\/strong> Define path patterns in CloudFront to route requests appropriately. For example:<\/p>\n\n\n\n<p>\/*.html \u2192 EC2 or Lightsail origin.<\/p>\n\n\n\n<p>\/static\/* \u2192 S3 origin.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Both EC2 and Lightsail offer powerful, reliable, and scalable solutions for deploying a NextJS application, but each has its own advantages. EC2 provides more control and scalability, making it suitable for larger or more complex applications. Lightsail, on the other hand, is simpler to set up and manage, with a more predictable pricing model, making it an excellent choice for smaller projects or those looking for ease of use. Bitnami simplifies the deployment process on both platforms by offering pre-configured stacks, enabling developers to quickly get their NextJS applications up and running.<\/p>\n\n\n\n<p>Deploying a NextJS application using AWS EC2 or Lightsail with Bitnami simplifies the process while leveraging AWS&#8217;s powerful infrastructure. EC2 with Bitnami offers extensive control and scalability, making it ideal for complex and larger-scale applications. Meanwhile, Lightsail with Bitnami provides a streamlined, beginner-friendly solution with predictable pricing, perfect for smaller projects or developers seeking simplicity. By utilizing the pre-configured Bitnami stacks, you can focus on building and deploying your NextJS application without worrying about configuring the underlying software stack. Regardless of the option you choose, these platforms empower you to deliver scalable, performant, and efficient applications tailored to your needs. Happy deploying! <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Deploying a NextJS application on AWS allows developers to leverage the full power of cloud infrastructure, offering flexibility, scalability, and security. AWS provides a variety of services that seamlessly integrate with NextJS, enabling developers to choose between different deployment models based on the project\u2019s specific needs. Let&#8217;s go through deploying a NextJS app using Amazon <\/p>\n","protected":false},"author":23,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1415],"tags":[242],"class_list":["post-32462","post","type-post","status-publish","format-standard","hentry","category-nextjs","tag-web-development"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.vocso.com\/blog\/wp-json\/wp\/v2\/posts\/32462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vocso.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vocso.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vocso.com\/blog\/wp-json\/wp\/v2\/users\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vocso.com\/blog\/wp-json\/wp\/v2\/comments?post=32462"}],"version-history":[{"count":0,"href":"https:\/\/www.vocso.com\/blog\/wp-json\/wp\/v2\/posts\/32462\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.vocso.com\/blog\/wp-json\/wp\/v2\/media?parent=32462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vocso.com\/blog\/wp-json\/wp\/v2\/categories?post=32462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vocso.com\/blog\/wp-json\/wp\/v2\/tags?post=32462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}