next-tinacms-s3 4.0.0 → 5.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +50 -38
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -5,18 +5,20 @@ Manage **S3 Bucket media assets** in TinaCMS.
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
### With Yarn
|
|
8
|
+
|
|
8
9
|
```bash
|
|
9
10
|
yarn add next-tinacms-s3
|
|
10
11
|
```
|
|
11
12
|
|
|
12
13
|
### With NPM
|
|
14
|
+
|
|
13
15
|
```bash
|
|
14
16
|
npm install next-tinacms-s3
|
|
15
17
|
```
|
|
16
18
|
|
|
17
19
|
## Connect with S3 Bucket
|
|
18
20
|
|
|
19
|
-
You need some credentials provided to access AWS S3 Bucket to set this up properly.
|
|
21
|
+
You need some credentials provided to access AWS S3 Bucket to set this up properly.
|
|
20
22
|
|
|
21
23
|
**next-tinacms-s3** uses environment variables within the context of a Next.js site to properly access your S3 Bucket account.
|
|
22
24
|
|
|
@@ -35,46 +37,57 @@ You need to setup S3 Bucket and IAM user correctly.
|
|
|
35
37
|
|
|
36
38
|
- The IAM user should have at least the following permissions for your bucket.
|
|
37
39
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
40
|
+
"s3:ListBucket",
|
|
41
|
+
"s3:PutObject",
|
|
42
|
+
"s3:PutObjectAcl",
|
|
43
|
+
"s3:DeleteObject"
|
|
41
44
|
|
|
42
45
|
- The S3 bucket should have ACLs enabled.
|
|
43
|
-
|
|
44
|
-
You should be able to go to the AWS S3 console and navigate to the bucket details for the bucket you try to write objects to. You'll see a tab called 'Permissions'. There you have the option to change the "Object Ownership" at a block with the same title.
|
|
45
46
|
|
|
46
|
-
|
|
47
|
+
You should be able to go to the AWS S3 console and navigate to the bucket details for the bucket you try to write objects to. You'll see a tab called 'Permissions'. There you have the option to change the "Object Ownership" at a block with the same title.
|
|
48
|
+
|
|
49
|
+
Once there, you can choose the option "ACLs enabled".
|
|
47
50
|
|
|
48
51
|
- You should ensure objects in the S3 bucket are readable by anonymous users and writable by the IAM user.
|
|
49
52
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
53
|
+
i.e. You can disable `block public access settings` and set up the bucket policy like following:
|
|
54
|
+
|
|
55
|
+
```
|
|
56
|
+
{
|
|
57
|
+
"Version": "2012-10-17",
|
|
58
|
+
"Statement": [
|
|
59
|
+
{
|
|
60
|
+
"Sid": "PublicRead",
|
|
61
|
+
"Effect": "Allow",
|
|
62
|
+
"Principal": "*",
|
|
63
|
+
"Action": "s3:GetObject",
|
|
64
|
+
"Resource": "arn:aws:s3:::<S3-Bucket-NAME>/*"
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
"Sid": "LimitedWrite",
|
|
68
|
+
"Effect": "Allow",
|
|
69
|
+
"Principal": {
|
|
70
|
+
"AWS": "<ARN of the IAM user>"
|
|
71
|
+
},
|
|
72
|
+
"Action": [
|
|
73
|
+
"s3:PutObject",
|
|
74
|
+
"s3:PutObjectAcl",
|
|
75
|
+
"s3:DeleteObject"
|
|
76
|
+
],
|
|
77
|
+
"Resource": "arn:aws:s3:::<S3-Bucket-NAME>/*"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"Sid": "ListBucket",
|
|
81
|
+
"Effect": "Allow",
|
|
82
|
+
"Principal": {
|
|
83
|
+
"AWS": "<ARN of the IAM user>"
|
|
84
|
+
},
|
|
85
|
+
"Action": "s3:ListBucket",
|
|
86
|
+
"Resource": "arn:aws:s3:::<S3-Bucket-NAME>"
|
|
87
|
+
}
|
|
88
|
+
]
|
|
89
|
+
}
|
|
90
|
+
```
|
|
78
91
|
|
|
79
92
|
## Register the Media Store
|
|
80
93
|
|
|
@@ -141,7 +154,6 @@ Import `isAuthorized` from [`@tinacms/auth`](https://github.com/tinacms/tinacms/
|
|
|
141
154
|
|
|
142
155
|
The `authorized` key will make it so only authorized users within Tina Cloud can upload and make media edits.
|
|
143
156
|
|
|
144
|
-
|
|
145
157
|
```
|
|
146
158
|
// pages/api/s3/[...media].ts
|
|
147
159
|
|
|
@@ -190,6 +202,6 @@ In your `.tina/schema.ts` add a new field for the image, e.g:
|
|
|
190
202
|
type: 'image',
|
|
191
203
|
label: 'Hero Image',
|
|
192
204
|
}
|
|
193
|
-
|
|
205
|
+
```
|
|
194
206
|
|
|
195
|
-
|
|
207
|
+
Now, when editing your site, the image field will allow you to connect to your S3 Bucket via the Media Store to manage your media assets.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "next-tinacms-s3",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "5.0.0",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"module": "dist/index.mjs",
|
|
6
6
|
"files": [
|
|
@@ -21,16 +21,16 @@
|
|
|
21
21
|
"@types/crypto-js": "^3.1.47",
|
|
22
22
|
"@types/js-cookie": "^2.2.6",
|
|
23
23
|
"@types/node": "^13.13.1",
|
|
24
|
-
"next": "14.2.5",
|
|
25
24
|
"@types/react": "^18.3.3",
|
|
25
|
+
"next": "14.2.5",
|
|
26
26
|
"react": "^18.3.1",
|
|
27
27
|
"react-dom": "^18.3.1",
|
|
28
|
-
"typescript": "
|
|
29
|
-
"@tinacms/scripts": "1.
|
|
30
|
-
"tinacms": "2.
|
|
28
|
+
"typescript": "^5.5.4",
|
|
29
|
+
"@tinacms/scripts": "1.2.0",
|
|
30
|
+
"tinacms": "2.2.0"
|
|
31
31
|
},
|
|
32
32
|
"peerDependencies": {
|
|
33
|
-
"tinacms": "2.
|
|
33
|
+
"tinacms": "2.2.0"
|
|
34
34
|
},
|
|
35
35
|
"publishConfig": {
|
|
36
36
|
"registry": "https://registry.npmjs.org"
|