Deploying Flutter Web with Amplify Hosting

I was looking for a hosting service to easily deploy Flutter web apps and compared several options. I found AWS Amplify Hosting to be a good fit for the following reasons:

• Automatic deployment triggered by pushing to GitHub.
• Ability to build using the container environment provided by Amplify during deployment.
  • Eliminates the need for local builds.
• Basic authentication is available for access control of the deployed web app.
  • Convenient for controlling access during PoC or prototype validation.

https://aws.amazon.com/jp/amplify/hosting/

It also offers the following features, making it capable of handling complex requirements:

• Custom domains
• Automatic creation of preview environments for each pull request
• SPA support (routing configuration)

Preparation

Create a repository on GitHub and push the app you want to deploy (private repositories are also fine).

Amplify Hosting Setup

Log in to AWS and open Amplify from the console.

Change the region to Tokyo (depending on your case).

Scroll down to the bottom of the screen and select Get Started under Amplify Hosting.

Select GitHub from the hosting settings and click Continue.

Check the displayed information and the GitHub account to be authorized via OAuth, then select Authorize.

If multiple organizations are linked to your GitHub account, select the installation destination.

Choose whether to grant Amplify access to all repositories or select specific ones, then click Install & Authorize.

Select the repository and branch name to deploy, then click Next.

Click Edit from the build settings.

The YAML editing screen will open. Paste the following content (overwrite the existing content) and save. The changes and additions from the default content are as follows:

• Install Flutter SDK in preBuild:
• Build Flutter Web in build:
• Specify build/web in baseDirectory:
• Cache the Flutter SDK in cache: to reuse it in subsequent builds

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - |
            if [ ! -d _amplify_flutter_root ]; then
                git clone https://github.com/flutter/flutter.git --depth 1 -b 3.10.5 _amplify_flutter_root
            fi
    build:
      commands:
        - |
            _amplify_flutter_root/bin/flutter build web
  artifacts:
    baseDirectory: build/web
    files:
      - '**/*'
  cache:
    paths:
      - _amplify_flutter_root

The required Flutter SDK version (the example above uses 3.10.5) varies depending on the project, so please change it as necessary.

Verify that the YAML content has been updated and click Next.

Review the content and click Save and Deploy to start the deployment.

You can check the deployment status from the dashboard.

Click on the branch name to view detailed logs.

Select Frontend from Build to check the build logs; you can verify build errors and other details here.

When the deployment status turns green, it is complete.

Click the URL in the bottom left to access the deployed app.

From now on, whenever you push to the GitHub branch, a build and deployment will trigger, and the app will be updated automatically.

Basic Authentication Settings

Select Access control from the app settings and click Manage access.

There are two ways to configure this: common settings for all branches or settings for individual branches (likely because Amplify supports deployment for each branch in the repository).

1. Common settings for all branches

Click Apply global password, enter the ID and password, then Save.

2. Settings for each branch

Change the branch's Access setting to Restricted - password required, enter the ID and password, then Save.

Confirm that the settings are saved.

Confirm that an ID and password are required when accessing the deployment URL.

Custom Domain Settings (Route53)

Setting up a custom domain allows you to access your application using a user-friendly URL.

In this article, we will set up a custom domain in Amplify Hosting using a hosted zone (domain) managed by Route53. When you configure custom domain settings in Amplify, a CNAME record is automatically registered in the Route53 hosted zone.

Select Domain management from the menu and click Add domain.

When you click the Domain input field, the hosted zones (domains) managed in Route53 will be displayed. Select the hosted zone you want to use and click Configure domain.

Subdomain settings will be displayed.

• If you do not want to use the root domain, select Exclude root.
• Enter your desired hostname (CNAME) where www is shown in the image.
• The main in the image represents the branch to be deployed. It seems you can select it if there are multiple branches to deploy.

Click Save to start the deployment (the layout appearing a bit broken seems to be normal). When using Route53, it took a few minutes to complete.

Once deployment is complete, you will be able to access the app using the specified domain and hostname.

Pull Request Preview

Using previews allows you to see changes before merging a pull request. When a pull request is opened, the application is deployed to a server separate from the main deployment server, enabling previewing.

Click Enable previews.

When the following screen appears, follow the same steps as the initial setup to integrate with GitHub.

Select a branch and click Manage.

Check the box and save.

It is complete when the status changes to Enabled.

Now, create a pull request on GitHub.

The preview deployment will then occur automatically as shown below.

Once deployment is complete, the preview deployment URL will be displayed on the pull request screen.

Preview environments are automatically deleted when the pull request is merged or closed.

Note

When applying Basic authentication in the Access control settings, if you select Apply global password, Basic authentication will also be applied to the preview deployment URLs. Please note that if you select individual branches, Basic authentication will not be applied to the preview deployment URLs.

Even if you have set up a Custom domain, preview deployments will still occur, but the preview deployment URL will be the default Amplify URL, not the custom domain.

Pricing

https://aws.amazon.com/jp/amplify/pricing/?nc=sn&loc=4

There is a free tier, but it seems to be pay-as-you-go based on deployment (build) time, storage, data transfer, and requests. Please check the link above for the most accurate information 🙏

That's all. I hope you found this helpful. If so, I'd appreciate a "Like"!