Preparation

Before we get to the main content of this workshop, we need to reset the web application.

1. Download the below source code.

   Source code

   fcj-book-store-sam-ws6.zip (24397 ko)

2. Unzip the source code, open template.yaml.

   • Change chaunguyen.site value to your domain name.

     route53HostedZoneName:
       Type: String
       Default: chaunguyen.site
     

     

3. Run the below commands.

   Ensure you have the AWS CLI and SAM CLI installed on your machine, configure AWS credentials before running the commands.

   sam build
   sam validate
   sam deploy --guided
   

4. Enter the following content. Leave as default.

   • Stack Name []: fcj-book-store
   • AWS Region []: us-east-1
   • Confirm changes before deploy [Y/n]: y
   • Allow SAM CLI IAM role creation [Y/n]: y
   • Disable rollback [y/N]: n
   • Save arguments to configuration file [Y/n]: y

5. Follow this instruction if your domain registrar isn’t AWS.

   Making Route 53 the DNS service for a domain that’s in use

   • Copy these NS type records from your Route53 hosted zone.
   • Paste those NS records to your DNS domain registrar.

6. Open template.yaml in the source code you downloaded before.

   • Uncomment this code block.

     # FcjCertificate:
     #   Type: AWS::CertificateManager::Certificate
     #   Properties:
     #     DomainName: !Sub "*.${route53HostedZoneName}"
     #     SubjectAlternativeNames:
     #       - !Ref route53HostedZoneName
     #     ValidationMethod: DNS
     #     DomainValidationOptions:
     #       - DomainName: !Sub "*.${route53HostedZoneName}"
     #         HostedZoneId: !Ref FcjRoute53HostedZone
     
     # FcjCloudFrontDistribution:
     #   Type: AWS::CloudFront::Distribution
     #   Properties:
     #     DistributionConfig:
     #       Enabled: true
     #       Origins:
     #         - DomainName: !GetAtt FcjBookShop.RegionalDomainName
     #           Id: !Ref FcjBookShop
     #           CustomOriginConfig:
     #             HTTPPort: 80
     #             HTTPSPort: 443
     #             OriginProtocolPolicy: match-viewer
     #             OriginSSLProtocols:
     #               - TLSv1
     #               - TLSv1.1
     #               - TLSv1.2
     #       Aliases:
     #         - !Sub "www.${route53HostedZoneName}"
     #         - !Ref route53HostedZoneName
     #       DefaultCacheBehavior:
     #         CachePolicyId: !Ref cachePolicyId
     #         ViewerProtocolPolicy: redirect-to-https
     #         TargetOriginId: !Ref FcjBookShop
     #         AllowedMethods:
     #           - GET
     #           - HEAD
     #       DefaultRootObject: index.html
     #       ViewerCertificate:
     #         AcmCertificateArn: !Ref FcjCertificate
     #         SslSupportMethod: sni-only
     
     # FcjRoute53RecordSet:
     #   Type: AWS::Route53::RecordSet
     #   Properties:
     #     HostedZoneId: !Ref FcjRoute53HostedZone
     #     Name: !Sub "www.${route53HostedZoneName}."
     #     Type: A
     #     AliasTarget:
     #       DNSName: !GetAtt FcjCloudFrontDistribution.DomainName
     #       HostedZoneId: !Ref cloudFrontHostedZoneId
     

   

7. Run the below commands.

   Cloudfront Distribution can take a while to complete, so please be patient.

   sam build
   sam validate
   sam deploy
   

   

8. Download the FCJ-Serverless-Workshop code to your device.

   • Open a terminal on your computer in the folder where you want to save the source code.

   • Copy the below command.

     git clone https://github.com/AWS-First-Cloud-Journey/FCJ-Serverless-Workshop.git
     cd FCJ-Serverless-Workshop
     

   • Open FCJ-Serverless-Workshop with VSCode and edit.

     • Open src/App.js and edit isAdmin: true as below.

   • Back to FCJ-Serverless-Workshop root path and run the commands below.

     yarn
     yarn build
     

9. We have finished building the front-end. Next execute the following command to upload the build folder to S3.

   aws s3 cp build s3://fcj-book-shop-by-myself --recursive
   

10. Enter the following links in a new tab in your web browser: http://www.DOMAIN, replace all DOMAIN with your domain name. All those links redirect to the new path, replace http with https.

So we have rebuilt the web application.