Create React App S3 Uploader
create-react-app-s3-uploaderneun webpack peulreogeuinimyeo create-react-app hwangyeongeseo sayongeul mogjeogeuro jejaghayeossseubnida.
production hwangyeongeseo reactreul bildeuhayeosseul si, static diregtoriyi soseudeuleul aws s3yi beokise eobrodeu haejubnida.
create-react-app-s3-uploader is webpack plugin. (for create-react-app).
When react builded on production, this plugin upload static directory to aws s3 bucket
install
npm install --save create-react-app-s3-uploader
usage
gajang useon, create-react-app projecteseo npm ejectreul silhaengsikyeojweoya habnida.
first of all, you shoud run npm eject in your create-react-app project
webpack.config.prod.js
const CreateReactAppS3Uploader = require("create-react-app-s3-uploader");
module.exports = {
plugins: [
new CreateReactAppS3Uploader({
accessKeyId: {AWS ACCESS KEY },
secretAccessKey: { AWS SECRET KEY },
buildPath: paths.appBuild,
region: "ap-northeast-2",
bucket: "create-react-app-s3-uploader",
})
]
};
CreateReactAppS3Uploader Parameters
| Name | Type | Required | Description |
|---|---|---|---|
| accessKeyId | {String} |
Required | AWS Access Key |
| secretAccessKey | {String} |
Required | AWS Secret Key |
| buildPath | {String} |
Required | create-react-app build directory path |
| region | {String} |
Required | AWS S3 Region |
| bucket | {String} |
Required | AWS S3 Bucket |
| key | {String} |
Optional | If you set this param, you can upload to specific directory in your s3 bucket |
| acl | {String} |
Optional | AWS S3 ACL, default public-read |
| cloudfront | {String} |
Optional | S3's CloudFront Domain. |
| replaceHtml | {boolean} |
Optional | default false. If you set to true, automatically change index.html's css & js's src to uploaded url |
Example
live demo gif ( upload to s3 )
live demo gif ( upload to cloudfront )
Reference
- ACL : AWS ACL LIST
- Content-Type : HTTP MIME TYPE
- WebpackPlugin : Webpack Plugin Docs