承前幾天寫的文章，我也忘記為什麼突然search到這個plugin，看了一下可以自動化上傳，於是就跳下去了...
試了一陣子，了解了之後其實很簡單
$ npm i webpack-s3-pluginwebpack設定
if (process.env.NODE_ENV === 'production') {
config.webpack.extra.plugins.push(
new S3Plugin({
// s3Options are required
s3Options: {
accessKeyId: process.env.AWS_ACCESS_KEY,
secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
region: process.env.AWS_REGION,
},
s3UploadOptions: {
Bucket: process.env.AWS_BUCKET,
},
cloudfrontInvalidateOptions: {
// Automatically invalidate your Cloudfront distribution cache every time you upload your code
DistributionId: process.env.CLOUDFRONT_DISTRIBUTION_ID,
Items: ["/*"]
}
})
);
}Bucket就是你S3的bucket，region請參照此
先講cloudfront部份，cloudfront有cache機制，預設是86400秒(一天)，如果要提前就要讓其失效(Invalidation)。關於失效的可以參考這裡，看起來是算更新次數而不是更新檔案，1000次非常夠用。
再來就是accessId跟Key，一開始找不到在哪，問了同事要從IAM設一個新user，然後將AmazonS3FullAccess與CloudFrontFullAccess加上，不想用Invalidation不需要後面的權限，這樣就完成囉!!
其實我相信真的有在大量使用AWS的公司，應該都會有DevOps做自動化流程，這套件也是將s3 cli包進來做指令。因為之前是微軟體系的，然後後來對前端比較有興趣，這次稍微碰了一下，AWS很強大，在很多服務中很容易不知道該做什麼，真的S難QAQ