mirror of
https://github.com/wasp-lang/open-saas.git
synced 2025-11-24 22:47:32 +01:00
Tighten up S3 CORS configuration
This commit is contained in:
BIN
opensaas-sh/blog/src/assets/file-uploads/cors-example.png
Normal file
BIN
opensaas-sh/blog/src/assets/file-uploads/cors-example.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 728 KiB After Width: | Height: | Size: 60 KiB |
@@ -11,6 +11,7 @@ import defaultSettings from '@assets/file-uploads/default-settings.png';
|
|||||||
import newBucket from '@assets/file-uploads/new-bucket.png';
|
import newBucket from '@assets/file-uploads/new-bucket.png';
|
||||||
import permissions from '@assets/file-uploads/permissions.png';
|
import permissions from '@assets/file-uploads/permissions.png';
|
||||||
import cors from '@assets/file-uploads/cors.png';
|
import cors from '@assets/file-uploads/cors.png';
|
||||||
|
import corsExample from '@assets/file-uploads/cors-example.png';
|
||||||
import username from '@assets/file-uploads/username.png';
|
import username from '@assets/file-uploads/username.png';
|
||||||
import keys from '@assets/file-uploads/keys.png';
|
import keys from '@assets/file-uploads/keys.png';
|
||||||
|
|
||||||
@@ -61,52 +62,58 @@ To do so, follow the steps in this external guide: [Creating IAM users and S3 bu
|
|||||||
Once you are logged in with your IAM user, you'll need to create an S3 bucket to store your files.
|
Once you are logged in with your IAM user, you'll need to create an S3 bucket to store your files.
|
||||||
|
|
||||||
1. Navigate to the S3 service in the AWS console
|
1. Navigate to the S3 service in the AWS console
|
||||||
<Image src={findS3} alt="find s3" loading="lazy" />
|
<Image src={findS3} alt="find s3" loading="lazy" />
|
||||||
2. Click on the `Create bucket` button
|
2. Click on the `Create bucket` button
|
||||||
<Image src={createBucket} alt="create bucket" loading="lazy" />
|
<Image src={createBucket} alt="create bucket" loading="lazy" />
|
||||||
3. Fill in the bucket name and region
|
3. Fill in the bucket name and region
|
||||||
4. **Leave all the settings as default** and click `Create bucket`
|
4. **Leave all the settings as default** and click `Create bucket`
|
||||||
<Image src={defaultSettings} alt="bucket settings" loading="lazy" />
|
<Image src={defaultSettings} alt="bucket settings" loading="lazy" />
|
||||||
|
|
||||||
### Change the CORS settings
|
### Change the CORS settings
|
||||||
|
|
||||||
Now we need to change some permissions on the bucket to allow for file uploads from your app.
|
Now we need to change some permissions on the bucket to allow for file uploads from your app.
|
||||||
|
|
||||||
1. Click on the bucket you just created
|
1. Click on the bucket you just created
|
||||||
<Image src={newBucket} alt="new bucket" loading="lazy" />
|
<Image src={newBucket} alt="new bucket" loading="lazy" />
|
||||||
2. Click on the `Permissions` tab
|
2. Click on the `Permissions` tab
|
||||||
<Image src={permissions} alt="permissions" loading="lazy" />
|
<Image src={permissions} alt="permissions" loading="lazy" />
|
||||||
3. Scroll down to the `Cross-origin resource sharing (CORS)` section and click `Edit`
|
3. Scroll down to the `Cross-origin resource sharing (CORS)` section and click `Edit`
|
||||||
<Image src={cors} alt="cors" loading="lazy" />
|
<Image src={cors} alt="cors" loading="lazy" />
|
||||||
5. Paste the following CORS configuration and click `Save changes`:
|
5. Insert the correct CORS configuration and click `Save changes`. You can
|
||||||
```json
|
copy-paste most of the config below, but **you must edit the
|
||||||
[
|
`AllowedOrigins` field** to fit your app. Include `http://localhost:3000` for
|
||||||
{
|
local development, and `https://<your domain>` for production.
|
||||||
"AllowedHeaders": [
|
```json {11,12}
|
||||||
"*"
|
[
|
||||||
],
|
{
|
||||||
"AllowedMethods": [
|
"AllowedHeaders": [
|
||||||
"PUT",
|
"*"
|
||||||
"GET"
|
],
|
||||||
],
|
"AllowedMethods": [
|
||||||
"AllowedOrigins": [
|
"PUT",
|
||||||
"*"
|
"GET"
|
||||||
],
|
],
|
||||||
"ExposeHeaders": []
|
"AllowedOrigins": [
|
||||||
}
|
"http://localhost:3000",
|
||||||
]
|
"https://<your-domain>"
|
||||||
```
|
],
|
||||||
|
"ExposeHeaders": []
|
||||||
|
}
|
||||||
|
]
|
||||||
|
```
|
||||||
|
As an example, here are the CORS permissions for this site - https://opensaas.sh:
|
||||||
|
<Image src={corsExample} alt="cors-example" loading="lazy" />
|
||||||
|
|
||||||
### Get your AWS S3 credentials
|
### Get your AWS S3 credentials
|
||||||
|
|
||||||
Now that you have your S3 bucket set up, you'll need to get your S3 credentials to use in your app.
|
Now that you have your S3 bucket set up, you'll need to get your S3 credentials to use in your app.
|
||||||
|
|
||||||
1. Click on your username in the top right corner of the AWS console and select `Security Credentials`
|
1. Click on your username in the top right corner of the AWS console and select `Security Credentials`
|
||||||
<Image src={username} alt="username" loading="lazy" />
|
<Image src={username} alt="username" loading="lazy" />
|
||||||
2. Scroll down to the `Access keys` section
|
2. Scroll down to the `Access keys` section
|
||||||
3. Click on `Create Access Key`
|
3. Click on `Create Access Key`
|
||||||
4. Select the `Application running on an AWS service` option and create the access key
|
4. Select the `Application running on an AWS service` option and create the access key
|
||||||
<Image src={keys} alt="keys" loading="lazy" />
|
<Image src={keys} alt="keys" loading="lazy" />
|
||||||
5. Copy the `Access key ID` and `Secret access key` and paste them in your `src/app/.env.server` file:
|
5. Copy the `Access key ID` and `Secret access key` and paste them in your `src/app/.env.server` file:
|
||||||
```sh
|
```sh
|
||||||
AWS_S3_IAM_ACCESS_KEY=ACK...
|
AWS_S3_IAM_ACCESS_KEY=ACK...
|
||||||
|
|||||||
Reference in New Issue
Block a user