[Webpack] s3 upload

js/css만 S3에 올려서 배포하기

webpack build후 자동으로 s3 upload 하기

1. 터미널 에서 webpack-s3-plugin 설치 하기

npm install webpack-s3-plugin

2. s3에 올리기 위해 accesskey값을 적어두는 dotenv설치

npm instal dotenv

3. aws api를 사용하기 위해 aws-sdk설치

npm install aws-sdk

4. .env 파일 생성

AWS_ACCESS_KEY_ID=your_access_key_id
AWS_SECRET_ACCESS_KEY=your_secret_access_key_id

5. webpack.config.js 에 마지막 plugins부분에 S3Plugin 추가

const S3Plugin = require('webpack-s3-plugin')
require('dotenv').config()
module.exports = {
	...
    ...
    ...
    plugins: [
        new HtmlWebpackPlugin({
            template: "./public/index.html",
            filename: "./index.html",
            chunks: ['main']
        }),
        new HtmlWebpackPlugin({
            template: "./public/table.html",
            filename: "./table.html",
            chunks: ['example1']
        }),
       new MiniCssExtractPlugin({
        filename: "[name].css",
        chunkFilename: "[id].css"
       }),
       new S3Plugin({
        exclude: /.*\.html$/,
        include: /.*\.(css|js)/,
        s3Options: {
            accessKeyId: process.env.AWS_ACCESS_KEY_ID,
            secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
            region: 'ap-northeast-2',
        },
        s3UploadOptions: {
            Bucket: 'your_bucket_name',
        },
    }),
    ]
}

• accessKeyId는 aws에서 key발급시 최초 생성 되며 삭제하면 그 key는 사용 불가해서 새로생성 해야함

나의 경우 html을 여러개 만들어야 해서 HtmlWebpackPlugin가 여러개

S3Plugin에서
exclude : "s3에 upload할 때 제외 할 포맷"
include : "s3에 upload할 때 포함 할 포맷"

유의사항

버킷의 이름에는 소문자/숫자/-대쉬 기호만 사용 가능 하며 s3의 주소를 그대로 복사 할 경우 s3://bucket_name/~~ 이런식으로 복사가 되는데
앞의 s3://를 제거 한 후에 순수 버킷의 경로만 작성한다

터미널창에 The Bucket does not allow ACLs 라는 에러가 발생 할 경우

• aws s3에 해당 버킷에 접속
  

• 객체 소유권 -> 편집
  

• ACL 활성화됨 체크
  

마지막으로 터미널 창에 webpack 명령어를 실행 하면

css와 js가 upload 된 모습

폴더 구조