Corsal8
commented
1 year ago Hello! I've encountered the same problem, and here is my solution. Probably I'm late, but in case I leave this comment for other people facing the same issue.
TL;DR:
From the Cloud9 terminal run the following commands:
CFD_ID=$(aws cloudformation describe-stack-resource --stack-name theme-park-backend --logical-resource-id CloudFrontDistribution --query "StackResourceDetail.PhysicalResourceId" --output text)
echo $CFD_ID
WEB_APP_DOMAIN=$(aws cloudfront list-distributions | jq -r --arg CFD_ID "$CFD_ID" '.DistributionList.Items[] | select(.Id==$CFD_ID) | .DomainName')
echo $WEB_APP_DOMAINUpdate the environment variables of the theme-park-photos-postprocess Lambda function by adding the variable WEB_APP_DOMAIN with the value obtained in the last command. The images you upload from now on should be visible in the photo gallery.
Explanation
Looking at the code in the theme-park-photos-postprocess Lambda function (around line 60), an environment variable called WEB_APP_DOMAIN is used to compute the URL that is saved in the DynamoDB table. This variable is not set and so the generated URL has the "undefined" string in its path, which of course is an invalid value and the reason why the frontend cannot load the image.
The WEB_APP_DOMAIN variable needed is actually the CloudFront distribution domain name. In fact, in the first module of the workshop, the SAM template configures the FinalBucket (theme-park-backend-finalbucket) in such a way that it is not public, but can only be accessed from the CloudFront distribution. This change has been introduced in the commit 2178ee86539994cfc886418b9bf03742752d2210. For this reason you need to get the CloudFront distribution domain name used for this project.
You can find it directly in the console by going to Services -> CloudFront -> Distributions, selecting the one used in the project and looking at the field "Distribution domain name" (should be something like "xxxxxxxxxx.cloudfront.net"). Be careful to copy just the name, without the "https://" since this is already included in the Lambda code.
Another way is by using the commands listed above which should be enough generalized for anyone. In fact, with the first command, I retrieve the CloudDistribution Id from the theme-park-backend stack and set is as an environment variable called CFD_ID. With the second command, I list the CloudFront distributions, selecting the one with the proper ID and retrieving the field DomainName, which is the one that must be set as the WEB_APP_DOMAIN environment variable.
So, once you get this value, just place it in the environment variables of your theme-park-photos-postprocess Lambda function and you should be good to go. Of course the old uploads won't be fixed by this change, but your new uploads should be work fine.
Hope it helps, cheers!
Describe the bug After the photos processed, they should be send to "theme-park-backend-DynamoDBTable", they are there indeed. However, the URL value is not correct, it like this "https://undefined/2023-04-17-14-11-18-34C8AC36E5DFD6B5", therefore, the gallery can't get the correct url to display processed photos.
Link to workshop URL A link to the workshop URL with the issue. https://www.eventbox.dev/published/lesson/innovator-island/3-photos/2-backend/3-postprocess.html
To Reproduce Steps to reproduce the behavior:
Expected behavior A clear and concise description of what you expected to happen. The URL is correct and valid, can be used to display the photo Screenshots If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
Smartphone (please complete the following information):
Additional context Add any other context about the problem here.