Get more updates and further details about your project right in your mailbox.
The best time to establish protocols with your clients is when you onboard them.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
This post will teach you how to use AWS services like CodePipeline, CodeCommit, and CodeBuild to establish a continuous integration and deployment (CI/CD) pipeline for a Flutter web application.
Software development techniques and tools known as Continuous Integration and Continuous Deployment, or CI/CD, automate software development, testing, and deployment.
Software is delivered more quickly and reliably when the software development process is streamlined, releases are made faster, code quality is increased, and manual intervention is decreased thanks to CI/CD.
Common CI/CD tools and services include Jenkins, Travis CI, CircleCI, GitLab CI/CD, and other cloud-based CI/CD systems provided by AWS, Azure, and Google Cloud. In this post, we’ll use the AWS CodePipeline service as one of those.
You should need an AWS account and an IAM role with the following access:
Have your Flutter project with Web support on a separate repository on CodeCommit.
To automatically deploy the Flutter web project when new changes are pushed into the master branch.
Step 1 : Add the buildspec.yml file to your project’s root directory, as shown in the below image.
Create a new S3 bucket for your project with static website hosting enabled and specify your bucket name instead of YOUR-BUCKET-NAME in the buildspec file.
Make a fresh Cloudfront distribution, then include its ID instead of YOUR-DISTRIBUTION-ID in the buildspec.
Since AWS CodeBuild doesn’t support Flutter, instead of mentioning the runtime versions in the buildspec, we need to install the custom environment and setup the path for Flutter.
In the install phase, we are cloning the latest flutter repository, installing flutter as a custom environment since AWS CodeBuild doesn’t support flutter by default, and installing the dependencies required for our flutter project.
In the build phase, we are building our Flutter project for the web in release mode.
In the post_build phase, we are deleting the old build files stored in the S3 bucket and uploading the new build files to that, then creating a new invalidation in the cloudfront.
.png)
Step 2 : Setup the CodePipeline
Login to your AWS console, search for the CodePipeline service, and click that.
Click Create Pipeline
Give your pipeline a preferred name in the pipeline settings. Additionally, you have two choices in the service role section. A new service role is one, and an existing service role is the other. It is best to create a new service role for each pipeline so that you can grant each pipeline unique permissions and have the role name automatically filled in. If you already have a service role in your account, you can also choose it. Click next after keeping other settings as they are.
In the source stage, select AWS CodeCommit for the source provider. Search and select your repository and branch name. It is preferred to select the master branch. And in the change detection option, it is recommended to select Amazon CloudWatch events since it will launch the pipeline whenever the change is detected in the source. You have another option called AWS CodePipeline, which will check periodically for changes. Keep others as they are, and then click next.
In the Build Stage, Select AWS CodeBuild in the build provider. Select Create Project, If you want to create a new build project for this pipeline, Select an existing build project. And in the Build Type, select Single Build.
Creating a new build project — Give a project name for the build and restrict the number of concurrent builds for this project.
In the Environment Section, select Managed Image if you want to use an image that is managed by AWS CodeBuild; otherwise, select Custom Image if you want to use a specific Docker image. For the operating system, select your preferred OS. In this pipeline, I am selecting Amazon Linux 2. For runtime and image versions Select Standard Runtime and the latest image version.
As in the codePipeline setting, here you can also select your preferred service role and act upon it. I am selecting a new service role for this build project. Add additional configurations, like environment variables and compute type, if necessary.
In the BuildSpec section, you have two options. One is to use a buildspec file; it will search for a buildspec file in your project root folder, and another is to insert a build command. By selecting this, you can directly insert your build commands here. If you have a different name for your buildspec file instead of buildspec.yml, give it the buildspec name; otherwise, leave it blank. I am selecting Use a buildspec file option, since i am having buildsec.yml file in my project root folder.
In the Logs section, specify the log configurations you want, and click Continue to CodePipeline. I am selecting CloudWatch logs.
In the deploy stage, select Skip deploy stage, as we have specified the deployment in the buildspec.yml file in the build stage itself.
Review your pipeline and select Create Pipeline.
Step 3 : Adding necessary permissions to the service role of your build project.
Since we are accessing s3 bucket and CloudFront in the buildspec file, we need to give AmazonS3FullAccess and CloudFrontFullAccess for this service role.
To do so, go to Build projects -> Build details -> Environment -> Service role.
Select the service role and attach necessary permission to this role. (It is advised to provide only the necessary permissions required; Administrator Access provides complete access to all the available AWS services.) Select Add Permissions-> Attach policies
Select AmazonS3FullAccess and CloudFrontFullAccess, and then select Attach policies (the required permissions can be added in a similar manner).
So, whenever the master branch encounters a change to it, the CodePipeline is triggered, which in turn triggers the CodeBuild, and your Flutter project is deployed automatically, as shown in the below image.
We can also see the build logs, like in the below image, by clicking the build details in the above image.
Congrats! We have successfully deployed our Flutter Web Application.
.webp)
.png)