This AWS Amplify project deploys a full-stack web application with an UI based on Cloudscape and backend authentication services using Amazon Cognito.
This app allows you to view datastores, search ImageSets, view ImageSet metadata, and view images. There are also multiple ways to load image frames, including default (full image frames), progressive (chunk by chunk) and tile level marker (discrete tile level markers).
The Tile Level Marker (TLM) Proxy and/or Amazon CloudFront Delivery projects can be incorporated into the image viewer as an alternative method of image loading.
During the AWS HealthImaging public preview, your account must be allow-listed into the program.
Packages needed for manual deployments only:
AWS Cloud9 has the requirement packages already installed and can be used to deploy this project from the cloud.
By default, the app is configured to use AWS HealthImaging in the us-east-1 region. To change the region or endpoint, log into the app and use the Settings page to modify the region.
This deployment method uses the AWS Amplify console to deploy the web app.
- Navigate to the AWS console for AWS CodeCommit
- Select Create repository
- Give the repository a name and select Create. Note the repository name can be different from this repository's name
- Push the entirety of this repository (
aws-health-imaging-samples) to the AWS CodeCommit repository. Refer to the documentation on instructions. - Navigate to the AWS console for AWS Amplify
- Select New app, then Host web app
- Select AWS CodeCommit, then select Continue
- Select the AWS CodeCommit repository you created earlier, and verify that the branch is correct
- Select Next
- Feel free to change the app name on the Build settings screen
- Verify
amplify.ymlis detected in the Build and test settings section - In the IAM Role section, select Use an existing service role if you've used Amplify before, and have an existing service role. Otherwise keep the default option Create and use a new service role.
- Select Next
- Review the app settings, and select Save and deploy
- If a build fails, you can review the logs from the AWS Amplify console. You can also attempt a rebuild by selecting the failed build, then selecting the Redeploy this version button. Note: if the error says Amplify app ID not found, modify the build service IAM role to include the AdministratorAccess-Amplify AWS-managed policy. You can find the build service IAM role by selecting General in the Amplify app console.
- The web app URL is named
https://<backend env name>.<app id>.amplifyapp.comand can be found in the Hosting environments tab
Manual deployment uses the Amplify CLI. You also need to have IAM user with programmatic access, with the AdministratorAccess-Amplify AWS-managed IAM policy attached. Deployment requires a *nix environment.
Configure IAM User
- Navigate to the AWS Console for IAM users
- Select Add users
- Give your user a descriptive user name, e.g. amplifyDeployUser, and select ONLY Access key - Programmatic access for the credential type
- In the Set permissions section, select Attach existing policies directly
- Search for AdministratorAccess-Amplify in the Filter policies section
- Select AdministratorAccess-Amplify
- Select Next: Tags
- Add any tags to this user as needed
- Select Next: Review
- Make sure AWS access type only lists Programmatic access and the permissions list contains AdministratorAccess-Amplify
- Select Create User
- Do not close this page
Configure AWS CLI
- On the command line, run aws configure --profile [profile name]
- Copy and paste the Access key ID from the IAM console
- Copy and paste the Secret access key from the IAM console and continue
- Select the default region, e.g. us-east-1, and continue
- Optionally, select an output format, e.g. json, and continue
- Back at the command line, run the following to test your access: aws --profile [profile name] sts get-caller-identity
Update the IAM User for CLI issue
- Navigate to the AWS Console for IAM users
- Select the user you created during the first step
- Select Add inline policy
- Select the JSON tab
- Paste the following into the JSON editor, replacing the existing text: { "Version": "2012-10-17", "Statement": [ { "Effect": "Allow", "Action": [ "cloudfront:GetCloudFrontOriginAccessIdentity" ], "Resource": "*" } ] }
- Give the policy a name, e.g. Workaround-For-Amplify-Cli-9911, then select Create policy
- Check out the git repository.
- Change current directory to project directory:
cd imaging-viewer-ui - Initialize the Amplify environment:
amplify init - Enter a name for the environment, e.g.
dev - Select the default code editor. If you do not plan on editing the code, select the default.
- For authentication method, select
AWS profile - If you have more than one AWS CLI profile, use the arrow keys to select the AWS CLI profile you configured earlier.
- Amplify will now deploy its base scaffolding via AWS CloudFormation.
- Add hosting:
amplify add hosting - Use the arrow keys to select
Amazon CloudFront and S3 - Use the arrow keys to select
PROD (S3 with CloudFront using HTTPS) - Optionally use a custom hosting bucket name. This is a private S3 bucket that is used to host static content
- Prior to running the next step, make sure you have added the additional IAM policy via the Update the IAM User for CLI issue section above
- Publish the app:
amplify publish - Verify that an Auth and Hosting resource will be deployed. Input
Y, then enter to continue - Amplify will now deploy Amazon Cognito, S3 and CloudFront. It will also run react-scripts via npm to build the web app and deploy it to S3 to be hosted by CloudFront. Note this may take a few minutes.
- The web app URL is displayed during deployment as
Hosting endpoint. Alternatively, you can find it in the Amazon CloudFront console
Amplify deploys a public-accessible website. When you first visit the site, select the Sign In link at the top right of the page. From there, select Create Account and fill in the required information. Once authenticated, you have access to all features of this web app. Note that you can view additional contextual information on any page by selecting the information icon on the right side of the screen.
This app is tightly-coupled with the Amplify JavaScript library for authentication with AWS. Credentials provided by this library are used to sign requests to the AWS HealthImaging Service. In order to replace this mechanism, look for references to the aws-exports.js file, which is generated by AWS Amplify.
Yes, see deployment security. This document describes how you can deploy this application using IAM permissions, focused on least-privilege for IAM.
Yes. There are two methods. First is removing the sign up UI from the frontend. Modify the Auth component using the Amplify documentation. The second method is to disable sign-ups on Amazon Cognito. To do this, modify the Amplify auth override file and within the override function, add the following code:
resources.userPool.adminCreateUserConfig = {
allowAdminCreateUserOnly: true,
};
Because this is sample code that deploys into a public-facing site, token refresh durations has been shortened from their defaults to 60 minutes. This means your app credentials are only valid for an hour. To modify this, update override.ts. Reference the Amplify documentation for a list of options.
Yes. You must have deployed the application using the AWS Amplify console. See restricting access to branches documentation here.
During deployment, Amplify creates two IAM roles: unauthenticated and authenticated. The unauthenticated role is configured to have no access to AWS services. The authenticated role is configured to have access to services configured to Amplify, as well as medical-imaging read only actions, defined in the project level's override.ts.
- Navigate to the AWS console for AWS Amplify
- Select the web app
- On the top right, select Actions, then Delete app