- \n
- Next.js version 12.0.7<\/li>\n
- Node.js 16.18.1<\/li>\n
- Yarn 1.22.9<\/li>\n
- NPM 8.19.2<\/li>\n
- Monorepository<\/li>\n
- Environment for running commands:cli.sh<\/li>\n
- The volume of the final assembly is 700mb<\/li>\n<\/ul>\n
<\/span><\/a>Creating elastic beanstalk<\/span><\/h2>\n
- \n
- Select the region we need in which we will deploy our application<\/li>\n
- Go to the pageelastic beanstalk in the applications tab<\/a><\/li>\n
- If necessary, create a new application by clicking on the Create application button<\/li>\n<\/ol>\n
![\"\"](\"http:\/\/blog.oqtacore.com\/wp-content\/uploads\/2023\/12\/word-image-1180-1.png\")
<\/p>\n- \n
- Enter a name and click the Create button<\/li>\n<\/ol>\n
![\"\"](\"http:\/\/blog.oqtacore.com\/wp-content\/uploads\/2023\/12\/word-image-1180-2.png\")
<\/p>\n- \n
- When you click on the application name, go to the tabEnvironments<\/a>.<\/li>\n
- Click the Create new environment button<\/li>\n<\/ol>\n
![\"\"](\"http:\/\/blog.oqtacore.com\/wp-content\/uploads\/2023\/12\/word-image-1180-3.png\")
<\/p>\n- \n
- We put down the configuration as in the screenshot<\/li>\n
- Application name will be selected automatically if you clicked on the name in the applications tab<\/li>\n<\/ol>\n
![\"\"](\"http:\/\/blog.oqtacore.com\/wp-content\/uploads\/2023\/12\/word-image-1180-4.png\")
<\/p>\n- \n
- Enter yourEnvironment name. Enter your temporary Domain name and check its availability using the Check availability button<\/li>\n<\/ol>\n
![\"\"](\"http:\/\/blog.oqtacore.com\/wp-content\/uploads\/2023\/12\/word-image-1180-5.png\")
<\/p>\n- \n
- For version next.js@12.0.7, you must install version Node.js 16 (this must be observed when creating any environments for version next.js@12.0.7)<\/li>\n<\/ol>\n
![\"\"](\"http:\/\/blog.oqtacore.com\/wp-content\/uploads\/2023\/12\/word-image-1180-6.png\")
<\/p>\n- \n
- Next, leave the checkboxes as in the screenshot and move on to the next step by clicking on the Next button<\/li>\n<\/ol>\n
![\"\"](\"http:\/\/blog.oqtacore.com\/wp-content\/uploads\/2023\/12\/word-image-1180-7.png\")
<\/p>\n- \n
- Next, in the screenshot, select the roles that beanstalk offers us (as in the screenshot below). We do not change them, as the application will launch with an error. If you are creating these roles for the first time, you must refer to the AWS service role instructions.<\/li>\n
- Next, click the Next button and move on to the next step.<\/li>\n<\/ol>\n
![\"\"](\"http:\/\/blog.oqtacore.com\/wp-content\/uploads\/2023\/12\/word-image-1180-8.png\")
<\/p>\n- \n
- Next, select the configured VPC. If your VPC does not already exist, you need to create a new one by clicking on the Create custom VPC button and refer to the AWS VPC documentation<\/li>\n<\/ol>\n
![\"\"](\"http:\/\/blog.oqtacore.com\/wp-content\/uploads\/2023\/12\/word-image-1180-9.png\")
<\/p>\n- \n
- Select the Activated option for the Public IP address. We also select all available regions<\/li>\n<\/ol>\n
![\"\"](\"http:\/\/blog.oqtacore.com\/wp-content\/uploads\/2023\/12\/word-image-1180-10.png\")
<\/p>\n- \n
- Select all available regions for the database. We leave the remaining options in the Database section unchanged.<\/li>\n<\/ol>\n
![\"\"](\"http:\/\/blog.oqtacore.com\/wp-content\/uploads\/2023\/12\/word-image-1180-11.png\")
<\/p>\n- \n
- Next, click the Next button to move to the next stage<\/li>\n
- Depending on the volume of the finished assembly of your project, select the SSD used. In this example, we use a monorepository, the volume of the final assembly is ~700mb (excluding node_modules)<\/li>\n<\/ol>\n
![\"\"](\"http:\/\/blog.oqtacore.com\/wp-content\/uploads\/2023\/12\/word-image-1180-12.png\")
<\/p>\n- \n
- Leave the rest of the options as they are.<\/li>\n<\/ol>\n
![\"\"](\"http:\/\/blog.oqtacore.com\/wp-content\/uploads\/2023\/12\/word-image-1180-13.png\")
<\/p>\n- \n
- Next, select the pre-configured EC2 security group. If this is your first time creating a beanstalk, please refer to the AWS documentation on creating an ec2 security group<\/li>\n<\/ol>\n
![\"\"](\"http:\/\/blog.oqtacore.com\/wp-content\/uploads\/2023\/12\/word-image-1180-14.png\")
<\/p>\n- \n
- Next, from the Environment type drop-down list, select Load Balanced and the Combine purchase options and instances option<\/li>\n
- Leave the remaining options unchanged<\/li>\n<\/ol>\n
![\"\"](\"http:\/\/blog.oqtacore.com\/wp-content\/uploads\/2023\/12\/word-image-1180-15.png\")
<\/p>\n- \n
- We choose x86_64 architecture. ANDselect the instance type<\/a> from the requirements of our project. For a testing\/development bench we will need 2 CPUs and 4gb of memory. You can also customize your instance to your needs and select it in the AMD ID, but to do this, refer to the AWS AMD ID documentation.<\/li>\n<\/ol>\n
![\"\"](\"http:\/\/blog.oqtacore.com\/wp-content\/uploads\/2023\/12\/word-image-1180-16.png\")
<\/p>\n- \n
- We leave the remaining options unchanged.<\/li>\n
- Next, select all available regions<\/li>\n<\/ol>\n
![\"\"](\"http:\/\/blog.oqtacore.com\/wp-content\/uploads\/2023\/12\/word-image-1180-17.png\")
<\/p>\n- \n
- Next, select everything as in the screenshot, and we will return to the listeneres stage at the very end of our instructions<\/li>\n<\/ol>\n
![\"\"](\"http:\/\/blog.oqtacore.com\/wp-content\/uploads\/2023\/12\/word-image-1180-18.png\")
<\/p>\n- \n
- If we want to use a different port when listening to an application, we add it by clicking on the Add process button. Within the framework of this instruction, we will not consider this stage, since by default Beanstalk looks for the command in package.jsonnpm start<\/strong> (more details here)<\/a> and runs it on its default port 8080. This port can be changed by creating a global variable PORT at the last stage of beanstalk configuration. You can check the working port:\n
- \n
- Go to the ec2 instance tab<\/li>\n
- Find the name by our Environment name<\/li>\n
- Click the Connect button at the top<\/li>\n
- Login to an instance from the selected 4 connection options (depending on the instance type created, only one login may be available)<\/li>\n
- Using the command line, we view the application launch ports used<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n
![\"\"](\"http:\/\/blog.oqtacore.com\/wp-content\/uploads\/2023\/12\/word-image-1180-19.png\")
<\/p>\n- \n
- Leave the remaining options unchanged and click Next.<\/li>\n
- We do not consider the following steps for setting up beanstalk within the framework of this instruction because they remain unchanged. At this point you can just add a global PORT variable to configure your application<\/li>\n<\/ol>\n
<\/span><\/a>Creating codePipeline part 1\/2<\/span><\/h2>\n
- \n
- Go to the creation pagepipeline<\/a>. And click the Create Pipeline button<\/li>\n<\/ol>\n
![\"\"](\"http:\/\/blog.oqtacore.com\/wp-content\/uploads\/2023\/12\/word-image-1180-20.png\")
<\/p>\n- \n
- Enter the name of your new pipeline. Service role should be created automatically. Next, click Next<\/li>\n<\/ol>\n
![\"\"](\"http:\/\/blog.oqtacore.com\/wp-content\/uploads\/2023\/12\/word-image-1180-21.png\")
<\/p>\n- \n
- Next, select Github (Version 2) from the drop-down list. We select a pre-created Connection Github from the list that has access to the GitHub repository of our project. Next, select the names and branch. If you have not created a Connection, please refer to the AWS Connection GitHub documentation. Next, click Next.<\/li>\n<\/ol>\n
![\"\"](\"http:\/\/blog.oqtacore.com\/wp-content\/uploads\/2023\/12\/word-image-1180-22.png\")
<\/p>\n- \n
- Next, select AWS CodeBuild from the Build Provider drop-down list. Select the desired region. And click Create Project. We also set global variables and later we will return to continue building the Code Pipeline<\/li>\n<\/ol>\n
![\"\"](\"http:\/\/blog.oqtacore.com\/wp-content\/uploads\/2023\/12\/word-image-1180-23.png\")
<\/p>\n<\/span><\/a>Creating a Build Project.<\/span><\/h2>\n
- \n
- After clicking Create Project, the Build Project configuration interface opens and enter Project Name<\/li>\n<\/ol>\n
![\"\"](\"http:\/\/blog.oqtacore.com\/wp-content\/uploads\/2023\/12\/word-image-1180-24.png\")
<\/p>\n- \n
- Next, select Linux 2. And the parameters are as in the screenshot below. Be sure to select the standard:4.0 version since the standard:5.0 build version will not run for our environment and build.<\/li>\n<\/ol>\n
![\"\"](\"http:\/\/blog.oqtacore.com\/wp-content\/uploads\/2023\/12\/word-image-1180-25.png\")
<\/p>\n- \n
- Leave the options as default<\/li>\n<\/ol>\n
![\"\"](\"http:\/\/blog.oqtacore.com\/wp-content\/uploads\/2023\/12\/word-image-1180-26.png\")
<\/p>\n- \n
- We increase the configuration of the temporary build environment to 7 GB of memory and 4 CPU<\/li>\n<\/ol>\n
![\"\"](\"http:\/\/blog.oqtacore.com\/wp-content\/uploads\/2023\/12\/word-image-1180-27.png\")
<\/p>\n- \n
- Next, leave the selected parameters as default and click Next.<\/li>\n<\/ol>\n
![\"\"](\"http:\/\/blog.oqtacore.com\/wp-content\/uploads\/2023\/12\/word-image-1180-28.png\")
<\/p>\n- \n
- The codeBuild stage is complete. Let’s return to further configuration of Pipeline<\/li>\n<\/ol>\n
<\/span><\/a>Creating codePipeline part 2\/2<\/span><\/h2>\n
- \n
- After successfully creating a Build Project, the name of the created configuration will be highlighted in the name field and click the Next button<\/li>\n<\/ol>\n
![\"\"](\"http:\/\/blog.oqtacore.com\/wp-content\/uploads\/2023\/12\/word-image-1180-29.png\")
<\/p>\n- \n
- Next, select the Elastic Beanstalk option from the Deploy Provider drop-down list. Next, from the list, select Application name, the name of our environment that we created at the Beanstalk configuration stage. Next, select the name of the created application and click Next.<\/li>\n<\/ol>\n
![\"\"](\"http:\/\/blog.oqtacore.com\/wp-content\/uploads\/2023\/12\/word-image-1180-30.png\")
<\/p>\n- \n
- At this point, the codePipeline setup is complete<\/li>\n
- Now we can observe the running assembly of our application<\/li>\n<\/ol>\n
![\"\"](\"http:\/\/blog.oqtacore.com\/wp-content\/uploads\/2023\/12\/word-image-1180-31.png\")
<\/p>\n- \n
- But to successfully build the application, you need to add the build configuration configuration (buildspec.yml) for the pipeline and the deploy configuration for beanstalk (installation of yarn and other packages to successfully launch the next.js application)<\/li>\n<\/ol>\n
<\/span><\/a>Configuration files for pipeline (Buildspec.yml & cli.sh)<\/span><\/h2>\n
- \n
- We create a buildspec.yml file in the root of our project. At the build stage\n
- \n
- We create global variables<\/li>\n
- Call the command from cli.sh – deploy_app<\/li>\n
- We remove node_modules and .next\/cache in order to facilitate the deployment stage on instace beanstalka, since there are memory limits of ~500mb<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n
version: 0.2<\/p>\n
phases:<\/p>\n
install:<\/p>\n
runtime-versions:<\/p>\n
nodejs: 16<\/p>\n
commands:<\/p>\n
– n 16.18.1<\/p>\n
pre_build:<\/p>\n
commands:<\/p>\n
– echo “preBuild APP”<\/p>\n
– rm -rf node_modules **\/node_modules<\/p>\n
– npm cache clean –force<\/p>\n
– yarn cache clean<\/p>\n
– yarn install –frozen-lockfile<\/p>\n
– yarn global add next@12.0.7<\/p>\n
build:<\/p>\n
commands:<\/p>\n
– NAME_VARIABLE_IN_APP=${NAME_VARIABLE_IN_PIPELINE}<\/p>\n
– echo “Build APP”<\/p>\n
– pwd<\/p>\n
– .\/cli.sh deploy_app<\/p>\n
– rm -rf node_modules<\/p>\n
– rm -rf .next\/cache<\/p>\n
artifacts:<\/p>\n
files:<\/p>\n
– ‘**\/*’<\/p>\n
discard-paths: no<\/p>\n
cache:<\/p>\n
paths:<\/p>\n
– node_modules\/**\/*<\/p>\n
- \n
- Create a cli.sh file in the root of our project\n
- \n
- In the deploy_app function we add the \u2018set -e\u2019 command, since during the build pipeline stage, errors that occur during our npm run build command are not processed by the pipeline and go to the next pipeline deploy stage<\/li>\n
- This instruction does not cover setting up the cli.sh file; to do this, contact a search engine or chatGPT<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n
deploy_app() {<\/p>\n
set -It is<\/p>\n
echo “START npm run build mode”<\/p>\n
node -in<\/p>\n
npm -in<\/p>\n
echo ‘AMPLIFY_ENV: ‘ + $NEXT_PUBLIC_AMPLIFY_ENV<\/p>\n
npm run build –workspace=@name_project\/app<\/p>\n
}<\/p>\n
- \n
- The creation and preparation of files at the pipeline stage is completed<\/li>\n<\/ol>\n
<\/span><\/a>Configuration files for elastic beanstalk (.sh file & package.json)<\/span><\/h2>\n
- \n
- We create a directory .platform\/hooks\/prebuild\/ in the root of our project with the file yarn.sh\n
- \n
- You can learn more about hooks and instance beanstalk configuration inofficial AWS documentation<\/a><\/li>\n
- First, we install node.js of the required version (_16.x is the required syntax for downloading the version) since node.js is not yet available at the prebuild stage.<\/li>\n
- Next we install yarn and initialize it for global access<\/li>\n
- Next, using yarn, we install next.js of the required version<\/li>\n
- And if you are using the env-cmd package to work with global variables<\/li>\n
- Next, we re-install all package dependencies of our project, since at the build stage in the builddpec.yml file we removed the deploy pipeline stage for proper operation<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n
#!\/bin\/bash<\/strong><\/p>\n
echo “install node.js”<\/p>\n
sudo curl –silent –location https:\/\/rpm.nodesource.com\/setup_16.x | sudo bash –<\/p>\n
sudo yum -y install nodejs<\/p>\n
sudo wget https:\/\/dl.yarnpkg.com\/rpm\/yarn.repo -O \/etc\/yum.repos.d\/yarn.repo<\/p>\n
sudo yum -y install yarn<\/p>\n
export PATH=”$PATH:$HOME\/.yarn\/bin”<\/p>\n
source ~\/.bashrc<\/p>\n
cd \/var\/app\/staging\/<\/p>\n
sudo yarn global add next@12.0.7<\/p>\n
sudo yarn global add env-cmd<\/p>\n
sudo chown -R webapp:webapp node_modules\/ || true<\/p>\n
sudo yarn install –frozen-lockfile<\/p>\n
- \n
- I assume that you already have a package.json file in the root directory because it should be your default when working with next.js. It must contain the npm start command<\/li>\n<\/ol>\n
“scripts”: {<\/p>\n
“start”: “npm run start –workspace=@name-project\/app”<\/p>\n
}<\/p>\n
- \n
- Now we push all the changes to the github repository and the pipeline assembly should start again<\/li>\n<\/ol>\n
<\/span><\/a>Conclusion<\/span><\/h2>\n
- \n
- We return to codePipeline. We are waiting for the completion of the build stage. If the build was not successful, you can view the logs by clicking on the View logs button at the build stage and scroll to the end.<\/li>\n<\/ol>\n
![\"\"](\"http:\/\/blog.oqtacore.com\/wp-content\/uploads\/2023\/12\/word-image-1180-32.png\")
<\/p>\n- \n
- If the build stage was successful, then we have completed 80% of our journey successfully.<\/li>\n
- If the deploy step fails with an error, you can get the deployed information in Beanstalk by opening your application environment and opening the Logs tab at the bottom (as in the screenshot below) and selecting Full from the drop-down list. And then download by clicking on the Download button. There are a lot of useful command line files and beanstalk hooks there. If this information is not enough, then we can go to the instance itself and try to run the project ourselves and check whether it will work on the temporary beanstalk domain. We discussed the step of how to log into ec2 instance in this instruction<\/li>\n<\/ol>\n
![\"\"](\"http:\/\/blog.oqtacore.com\/wp-content\/uploads\/2023\/12\/word-image-1180-33.png\")
<\/p>\n- \n
- If the deploy was successful, then we return to our environment elastic beanstalk<\/li>\n
- And click the link to our temporary domain<\/li>\n
- The application will open. If this does not happen, check the logs, the port on which the application is launched and try to go to your ec2 instance and run your assembly on port 8080 yourself.<\/li>\n<\/ol>\n
<\/span><\/a>How can you make the application available via https?<\/span><\/h2>\n
- We return to codePipeline. We are waiting for the completion of the build stage. If the build was not successful, you can view the logs by clicking on the View logs button at the build stage and scroll to the end.<\/li>\n<\/ol>\n
- Now we push all the changes to the github repository and the pipeline assembly should start again<\/li>\n<\/ol>\n
- You can learn more about hooks and instance beanstalk configuration inofficial AWS documentation<\/a><\/li>\n
- We create a directory .platform\/hooks\/prebuild\/ in the root of our project with the file yarn.sh\n
- The creation and preparation of files at the pipeline stage is completed<\/li>\n<\/ol>\n
- Create a cli.sh file in the root of our project\n
- We create a buildspec.yml file in the root of our project. At the build stage\n
- But to successfully build the application, you need to add the build configuration configuration (buildspec.yml) for the pipeline and the deploy configuration for beanstalk (installation of yarn and other packages to successfully launch the next.js application)<\/li>\n<\/ol>\n
- Next, select the Elastic Beanstalk option from the Deploy Provider drop-down list. Next, from the list, select Application name, the name of our environment that we created at the Beanstalk configuration stage. Next, select the name of the created application and click Next.<\/li>\n<\/ol>\n
- After successfully creating a Build Project, the name of the created configuration will be highlighted in the name field and click the Next button<\/li>\n<\/ol>\n
- The codeBuild stage is complete. Let’s return to further configuration of Pipeline<\/li>\n<\/ol>\n
- Next, leave the selected parameters as default and click Next.<\/li>\n<\/ol>\n
- We increase the configuration of the temporary build environment to 7 GB of memory and 4 CPU<\/li>\n<\/ol>\n
- Leave the options as default<\/li>\n<\/ol>\n
- Next, select Linux 2. And the parameters are as in the screenshot below. Be sure to select the standard:4.0 version since the standard:5.0 build version will not run for our environment and build.<\/li>\n<\/ol>\n
- After clicking Create Project, the Build Project configuration interface opens and enter Project Name<\/li>\n<\/ol>\n
- Next, select AWS CodeBuild from the Build Provider drop-down list. Select the desired region. And click Create Project. We also set global variables and later we will return to continue building the Code Pipeline<\/li>\n<\/ol>\n
- Next, select Github (Version 2) from the drop-down list. We select a pre-created Connection Github from the list that has access to the GitHub repository of our project. Next, select the names and branch. If you have not created a Connection, please refer to the AWS Connection GitHub documentation. Next, click Next.<\/li>\n<\/ol>\n
- Enter the name of your new pipeline. Service role should be created automatically. Next, click Next<\/li>\n<\/ol>\n
- Go to the creation pagepipeline<\/a>. And click the Create Pipeline button<\/li>\n<\/ol>\n
- If we want to use a different port when listening to an application, we add it by clicking on the Add process button. Within the framework of this instruction, we will not consider this stage, since by default Beanstalk looks for the command in package.jsonnpm start<\/strong> (more details here)<\/a> and runs it on its default port 8080. This port can be changed by creating a global variable PORT at the last stage of beanstalk configuration. You can check the working port:\n
- Next, select everything as in the screenshot, and we will return to the listeneres stage at the very end of our instructions<\/li>\n<\/ol>\n
- We choose x86_64 architecture. ANDselect the instance type<\/a> from the requirements of our project. For a testing\/development bench we will need 2 CPUs and 4gb of memory. You can also customize your instance to your needs and select it in the AMD ID, but to do this, refer to the AWS AMD ID documentation.<\/li>\n<\/ol>\n
- Next, select the pre-configured EC2 security group. If this is your first time creating a beanstalk, please refer to the AWS documentation on creating an ec2 security group<\/li>\n<\/ol>\n
- Leave the rest of the options as they are.<\/li>\n<\/ol>\n
- Select all available regions for the database. We leave the remaining options in the Database section unchanged.<\/li>\n<\/ol>\n
- Select the Activated option for the Public IP address. We also select all available regions<\/li>\n<\/ol>\n
- Next, select the configured VPC. If your VPC does not already exist, you need to create a new one by clicking on the Create custom VPC button and refer to the AWS VPC documentation<\/li>\n<\/ol>\n
- Next, leave the checkboxes as in the screenshot and move on to the next step by clicking on the Next button<\/li>\n<\/ol>\n
- For version next.js@12.0.7, you must install version Node.js 16 (this must be observed when creating any environments for version next.js@12.0.7)<\/li>\n<\/ol>\n
- Enter yourEnvironment name. Enter your temporary Domain name and check its availability using the Check availability button<\/li>\n<\/ol>\n
- Click the Create new environment button<\/li>\n<\/ol>\n
- When you click on the application name, go to the tabEnvironments<\/a>.<\/li>\n
- If necessary, create a new application by clicking on the Create application button<\/li>\n<\/ol>\n
![\"\"](\"http:\/\/blog.oqtacore.com\/wp-content\/uploads\/2023\/12\/word-image-1180-34.png\")
<\/p>\n![\"\"](\"http:\/\/blog.oqtacore.com\/wp-content\/uploads\/2023\/12\/word-image-1180-35.png\")
<\/p>\n![\"\"](\"http:\/\/blog.oqtacore.com\/wp-content\/uploads\/2023\/12\/word-image-1180-36.png\")
<\/p>\n