{"id":22733745,"url":"https://github.com/marcesdan/next-aws-demo","last_synced_at":"2025-07-22T10:36:51.060Z","repository":{"id":178748700,"uuid":"662208999","full_name":"marcesdan/next-aws-demo","owner":"marcesdan","description":null,"archived":false,"fork":false,"pushed_at":"2023-07-05T10:32:37.000Z","size":143,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-30T02:11:13.386Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/marcesdan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-07-04T15:35:33.000Z","updated_at":"2023-07-04T15:38:28.000Z","dependencies_parsed_at":null,"dependency_job_id":"a95c0f23-0b9a-4e78-a990-63ad17f4a092","html_url":"https://github.com/marcesdan/next-aws-demo","commit_stats":null,"previous_names":["marcesdan/next-aws-demo"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/marcesdan/next-aws-demo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcesdan%2Fnext-aws-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcesdan%2Fnext-aws-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcesdan%2Fnext-aws-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcesdan%2Fnext-aws-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marcesdan","download_url":"https://codeload.github.com/marcesdan/next-aws-demo/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcesdan%2Fnext-aws-demo/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266476856,"owners_count":23935317,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-10T20:15:59.885Z","updated_at":"2025-07-22T10:36:51.009Z","avatar_url":"https://github.com/marcesdan.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Production-ready NextJS App with AWS\n\nThis is a summary of how to start your own NextJS app, create the repo on Github, upload later in an AWS EC2 Instance and automate the process with AWS Codebuild, CodeDeploy, \u0026 CodePipeline.\n\nAfter following these instructions you should be able to:\n\n- Create a NextJS App\n- Create an AWS EC2 instance\n- Be able to SSH to an EC2 instance\n- Prepare the instance as a Node environment\n- Configure Nginx service for proper routing\n- Configure domain and add SSL\n- Automate the source push, build, deploy process using AWS CodeBuild, CodeDeploy, \u0026 CodePipeline\n\n## Step 1 - Create a NextJS App with AWS Scripts and Configs\n\n```zsh\n\nnpx create-next-app my-app\ncd my-app\n\n// instructions for AWS CodeBuild, file content below\ntouch buildspec.yml // creates a file\n\n// instructions for AWS CodeDeploy, file content below\ntouch appspec.yml // creates a file\n\nmkdir scripts\ncd scripts\ntouch before_install.sh\ntouch after_install.sh\ntouch application_start.sh\n\n```\n\nUpload this to Github\n\n**buildspec.yml** - used by AWS CodeBuild\n\n```yml\nversion: 0.2\n\nphases:\n  install:\n    runtime-versions:\n      nodejs: 12\n\n    commands:\n      # install npm\n      - npm install\n\n  build:\n    commands:\n      # run build script\n      - npm build\n\nartifacts:\n  # include all files required to run application\n  # notably excluded is node_modules, as this will cause overwrite error on deploy\n  files:\n    - assets/**/*\n    - components/**/*\n    - containers/**/*\n    - pages/**/*\n    - public/**/*\n    - scripts/**/*\n    - settings/**/*\n    - styles/**/*\n    - jsconfig.json\n    - package.json\n    - appspec.yml\n    - postcss.config.js\n    - tailwind.config.js\n\n```\n\n**appspec.yml** - used by AWS CodeDeploy\n\n```yml\n\nversion: 0.0\nos: linux\nfiles:\n  - source: /\n    destination: /home/ec2-user/app-frontend\n    overwrite: true\npermissions:\n  - object: /\n    pattern: \"**\"\n    owner: ec2-user\n    group: ec2-user\n\nhooks:\n  BeforeInstall:\n    - location: scripts/before_install.sh\n      timeout: 300\n      runas: root\n  AfterInstall:\n    - location: scripts/after_install.sh\n      timeout: 300\n      runas: root\n  ApplicationStart:\n    - location: scripts/application_start.sh\n      timeout: 300\n      runas: root\n```\n\n### before_install.sh\n\n```bash\n\n#!/bin/bash\ncd /home/ec2-user/server\ncurl -sL https://rpm.nodesource.com/setup_14.x | sudo -E bash -\nyum -y install nodejs npm\n```\n\n### after_install.sh\n\n```bash\n\n#!/bin/bash\ncd /home/ec2-user/app-frontend\nnpm install\nnpm install pm2 -g\n```\n\n### application_start.sh\n\n```bash\n#!/bin/bash\ncd /home/ec2-user/app-frontend\nnpm run build\npm2 start npm --name \"sweetcollective\" -- start\npm2 startup\npm2 save\npm2 restart all\n\n```\n\n## Step 2 - Create and test SSH to an AWS EC2 instance\n\n**Create an IAM Role : AWS IAM**\n*AWS service roles are used to grant permissions to an AWS service so it can access AWS resources.*\n\n1. Create Role\nRole name: EC2RoleForS3\nDescription: Allows EC2 instances to access AWS S3 Bucket\nPolicies: AWSS3ReadOnlyAccess\n\n2. Create Role\nRole name: EC2RoleForCodeDeploy\nDescription: Allows EC2 instances to access AWS CodeDeploy\nPolicies: AWSCodeDeployRole\n\n### Create an EC2 Instance : AWS EC2\n\nIn AWS Console, head over to EC2 and create an instance, select t2.micro\nAdd Tag key:\"Name\", Value: \"nextjs-app\"\nSecurity group, create one or use an existing\nBefore launching, you will be prompted to create an RSA key pair\nSave this securely in your local machine (don't lose this)\n\n```zsh\n// go to the keypair folder location\nsudo chmod 400 keypair.pem (or keypair.cer)\nssh -i keypair.pem ec2-user@\u003cec2-instance-public-ip\u003e\n```\n\nOnce you're in SSH terminal,\n\n```zsh\n// install nvm\ncurl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash\n\n// install LTS (Gallium version)\nnvm install 16.13.0 \n\n// install node\nnvm install node\n\n// install pm2 (Process Manager)\nnpm i -g pm2\n\n// install nginx\nsudo amazon-linux-extras install nginx1\n```\n\n## Step 4 - Set and Configure Nginx\n\nin etc/nginx/nginx.conf\n\n```zsh\nsudo vim nginx.conf\n\n...\nlocation / {\n        # reverse proxy for next server\n         proxy_pass http://127.0.0.1:3005; # your nextJs service and port\n         proxy_http_version 1.1;\n         proxy_set_header X-Real-IP $remote_addr;\n         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n         proxy_set_header X-Forwarded-Proto $scheme;\n         # we need to remove this 404 handling\n        # because next's _next folder and own handling\n         # try_files $uri $uri/ =404;\n     }\n...\n\n// restart service\nsudo systemcl restart nginx\n\n```\n\n### Step 5 - AWS CodeBuild, CodeDeploy, CodePipeline\n\n**Create a new CodeDeploy Application - AWS CodeDeploy**\nCreate New Application\nAdd Name then finish\n\nCreate Deployment Group\nAdd name\nSelect ServiceRole - EC2RoleForCodeDeploy we created above\nDeployment Type - leave default\n\n- Environment Configuration\nCheck Amazon EC2 Instance\nAdd Key: Name, Value: nextjs-app // refer above\n- Agent Configuration\nInstall AWS CodeDeploy Agent - Only Once\n- Deployment settings - leave default\n- Load Balancing - uncheck box\nCreate Deployment Group\n\n#### Create a new Pipeline - AWS CodePipeline\n\n1) Choose Pipeline Settings\nAdd a Name\nCreate New Service Role and check Allow AWS CodePipeline to create a service role\nNext\n\n2) Choose Source\nSelect Github (v2)\nConnect your Github\nSelect the app repository\nSelect branch\nCheck start pipeline on source code change\nLeave CodePipeline default selected\nNext\n\n3) **Add Build Stage - AWS CodeBuild**\nSelect AWS CodeBuild\nCreate Project\nCodeBuild tab opens\nFill in CodeBuild Details\n\nEnvironment\n\n- Managed Image\n- Select OS Amazon Linux 2\n- Runtime: Standard\n- Create ServiceRole, any name\n\nBuildspec (default)\nContinue to pipeline\n// CodeBuild tab closes\n\nDont refresh the page\nSelect Previous, then Next\nSelect Project name you just created on a different tab\nNext\n\n1) Add Deploy Stage\nSelect AWS CodeDeploy\nSelect Application Name\nSelect Deployment Group\nReview then Create\n\nCongratulations! Pipeline should run right away after creation, if all steps were followed, everything should go smoothly.\n\n**Known Errors:**\n\n- Connection refused when visiting ec2 public ip address\n  solution 1: check if 12.12.12.12 is http or https in browser url\n  solution 2: check EC2 security group attached and see inbound rules, add HTTP, TCP, Port 80, 0.0.0.0/0\n  \n  It's also possible that you've turned off/on the instance without having an Elastic IP address attached to it\n  In this case then attach an elastic ip so that it doesn't change every on/off\n- Connection refused when trying to SSH\n  solution 1: check EC2 security group attached and see inbound rules, add SSH, TCP, Port 22, My IP Address\n- Port 3000 already in use\n  solution 1: I've so far edited package.json and changed the npm run start command to\n\n  ```json\n  \"start\": \"next start -p 3005\",\n  ```\n  \n## References\n\n\u003chttps://docs.aws.amazon.com/codedeploy/latest/userguide/codedeploy-agent-operations-install-linux.html\u003e\n\n\u003chttps://blog.devgenius.io/deploy-a-reactjs-application-to-aws-ec2-instance-using-aws-codepipeline-3df5e4157028\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcesdan%2Fnext-aws-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarcesdan%2Fnext-aws-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcesdan%2Fnext-aws-demo/lists"}