You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/assignments/hw5-25.md
+18-15
Original file line number
Diff line number
Diff line change
@@ -18,7 +18,7 @@ You and your team have modified and tested a basic calculator app. Now, you're g
18
18
In this assignment, you will use AWS to deploy your webapp. Specifically, you'll use:
19
19
- AWS lambda to run your backend code.
20
20
- API Gateway to expose your calculator API to the web.
21
-
- S3 to host your frontend code.
21
+
- S3/Amplify to host your frontend code.
22
22
- Github actions to automatically deploy updated frontend/backend code to S3/lambda.
23
23
24
24
We'll describe each of these components in more detail next.
@@ -68,7 +68,7 @@ and (1) upload it and (2) invoke it using the AWS CLI. [The lambda portion](http
68
68
69
69
Finally, coordinate with your team to:
70
70
- Upload the lambda code automatically using a Github action and
71
-
- Modify the lambda code so that it's [invoked by requests to your API's `calculate` function](https://docs.aws.amazon.com/lambda/latest/dg/services-apigateway-tutorial.html#services-apigateway-tutorial-function).
71
+
- Modify the lambda code so that it's [invoked by requests to your API's `calculate` function](https://docs.aws.amazon.com/lambda/latest/dg/services-apigateway-tutorial.html#services-apigateway-tutorial).
72
72
73
73
### 2. Use API Gateway to create a REST API
74
74
@@ -79,25 +79,27 @@ This API will expose the `calculate` function.
79
79
80
80
Start from [this tutorial](https://docs.aws.amazon.com/lambda/latest/dg/services-apigateway-tutorial.html#services-apigateway-tutorial-api) or the AWS docs above to create a REST API that exposes `calculate`.
81
81
82
-
After setting up API Gateway, locate the API call logic in your frontend code (where it currently calls localhost). Replace the localhost URL with the API Gateway endpoint URL.
82
+
After setting up API Gateway, locate the API call logic in your frontend code (where it currently calls localhost). Replace the localhost URL with the API Gateway endpoint URL---though you likely want to preserve a version of the app that runs locally for testing.
83
83
84
84
Then, coordinate with your team to make sure that invocations of `calculate` call the calculator's backend lambda code.
85
85
86
86
### 3. Use S3 and Amplify to host your frontend code
87
87
88
88
[S3](https://aws.amazon.com/s3/) is cloud storage for basically anything.
89
-
You'll be using it to host your calculator frontend code. With this you will be able to store the files that govern the frontend logic of your code. To deploy and expose these files at a publicly available URL endpoint, you will have to integrate this to AWS Amplify.
89
+
You'll be using it to store the files that govern the frontend logic of your code. To deploy and expose these files at a publicly available URL endpoint, you will have to integrate with Amplify as well. [AWS Amplify](https://aws.amazon.com/amplify/) makes it easy to e.g., deploy app frontends and integrate with version control. In this assignment, you will use Amplify to manage deployment of the frontend of your calculator application.
90
90
91
-
[AWS Amplify](https://aws.amazon.com/amplify/) is a cloud-based development platform that simplifies frontend and full-stack web application deployment. In this assignment, you will use Amplify to manage deployment of the frontend of your calculator application.
91
+
Amplify integrates with [Amazon S3](https://docs.aws.amazon.com/amplify/latest/userguide/hosting.html) to store and serve static assets like HTML, CSS, and JavaScript files. It provides an automated deployment pipeline that syncs with your GitHub repository and updates the frontend whenever changes are, for example, pushed to your main branch.
92
92
93
-
Amplify integrates with [Amazon S3](https://docs.aws.amazon.com/amplify/latest/userguide/hosting.html) to store and serve static assets like HTML, CSS, and JavaScript files. It provides an automated deployment pipeline that syncs with your GitHub repository and updates the frontend whenever changes are pushed to the main branch.
93
+
Your task is to:
94
+
- Create an S3 bucket for storing frontend logic.
95
+
- Upload your frontend code's to the AWS S3 bucket.
96
+
- Set up Amplify to host the application frontend.
94
97
95
-
Your task is to create a S3 bucket, upload frontend code in build/ folder to AWS S3 bucket, and set up Amplify to host the frontend of your application. To complete this part of the assignment, refer to the following AWS documentation:
96
-
-[Getting started with Amplify hosting with S3](https://docs.aws.amazon.com/amplify/latest/userguide/deploy-website-from-s3.html)
98
+
To complete this part of the assignment, refer to the [AWS documentation](https://docs.aws.amazon.com/amplify/latest/userguide/deploy-website-from-s3.html).
97
99
98
100
### 4. Use Github actions to automatically deploy on each push to main
99
101
100
-
After getting hands on experience with each service, you will use a Github action to ensure that updates are deployed automatically on each commit to the main branch
102
+
After getting hands on experience with each service, you will use a Github action to deploy updates automatically on each commit to your main branch.
101
103
102
104
The CD pipeline will perform the following tasks:
103
105
1. Deploy the packaged backend Lambda code.
@@ -108,11 +110,10 @@ In order to do this, you will need to allow Github to authenticate to AWS.
108
110
Follow the [Github documentation](https://docs.github.com/en/actions/security-for-github-actions/security-guides/using-secrets-in-github-actions) to safely use your AWS secrets in CD. [This AWS blog post](https://aws.amazon.com/blogs/compute/using-github-actions-to-deploy-serverless-applications/) describes some (basic) best practices for generating and handling AWS authentication secrets in CI; navigate to the "Configuring AWS credentials in GitHub" section of the tutorial.
109
111
110
112
Next, you will create one or more .yml files under the .github/workflows/ directory in your repository.
Sample GitHub Actions Workflow (Ensures secure authentication by retrieving necessary AWS credentials from GitHub Secrets.)
116
+
You can use the following sample Github workflow for reference:
116
117
```yaml
117
118
name:
118
119
@@ -145,9 +146,11 @@ You should create a [Github workflow](https://docs.github.com/en/actions/writing
145
146
- Uses the AWS CLI to update the lambda code (giving the CLI access to your authentication secret and AWS region through the environment).
146
147
147
148
#### Deploying frontend code
148
-
- Use Node.js to deploy frontend code.
149
+
150
+
You should create a Github workflow that takes the following steps:
151
+
- Checks out the code, sets up Node, and builds the code.
149
152
- Deploys the built application to an AWS S3 bucket.
150
-
- Triggers AWS Amplify to redeploy the latest frontend version from S3. [Using Amplify With Github](https://docs.aws.amazon.com/amplify/latest/userguide/setting-up-GitHub-access.html)
153
+
- Triggers AWS Amplify to redeploy the latest frontend version from S3. See [the AWS documentation](https://docs.aws.amazon.com/amplify/latest/userguide/setting-up-GitHub-access.html) for more.
0 commit comments