mirror of
https://github.com/wasp-lang/open-saas.git
synced 2025-04-10 21:09:04 +02:00
Tighten up S3 CORS configuration
This commit is contained in:
parent
dd334e28c6
commit
dbca3a20c1
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 permissions from '@assets/file-uploads/permissions.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 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.
|
||||
|
||||
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
|
||||
<Image src={createBucket} alt="create bucket" loading="lazy" />
|
||||
<Image src={createBucket} alt="create bucket" loading="lazy" />
|
||||
3. Fill in the bucket name and region
|
||||
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
|
||||
|
||||
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
|
||||
<Image src={newBucket} alt="new bucket" loading="lazy" />
|
||||
<Image src={newBucket} alt="new bucket" loading="lazy" />
|
||||
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`
|
||||
<Image src={cors} alt="cors" loading="lazy" />
|
||||
5. Paste the following CORS configuration and click `Save changes`:
|
||||
```json
|
||||
[
|
||||
{
|
||||
"AllowedHeaders": [
|
||||
"*"
|
||||
],
|
||||
"AllowedMethods": [
|
||||
"PUT",
|
||||
"GET"
|
||||
],
|
||||
"AllowedOrigins": [
|
||||
"*"
|
||||
],
|
||||
"ExposeHeaders": []
|
||||
}
|
||||
]
|
||||
```
|
||||
<Image src={cors} alt="cors" loading="lazy" />
|
||||
5. Insert the correct CORS configuration and click `Save changes`. You can
|
||||
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.
|
||||
```json {11,12}
|
||||
[
|
||||
{
|
||||
"AllowedHeaders": [
|
||||
"*"
|
||||
],
|
||||
"AllowedMethods": [
|
||||
"PUT",
|
||||
"GET"
|
||||
],
|
||||
"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
|
||||
|
||||
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`
|
||||
<Image src={username} alt="username" loading="lazy" />
|
||||
<Image src={username} alt="username" loading="lazy" />
|
||||
2. Scroll down to the `Access keys` section
|
||||
3. Click on `Create 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:
|
||||
```sh
|
||||
AWS_S3_IAM_ACCESS_KEY=ACK...
|
||||
|
Loading…
x
Reference in New Issue
Block a user