package.json에 작성해 둔 명령어로 환경변수를 관리할 수 있도록 빌드 구성을 통합하는 작업을 진행했는데 거의 2일 동안은 삽질의 연속이었던 것 같다. 여러 가지 방법을 시도하다가 내가 원하는 대로 환경변수를 활용할 수 있게 되었다.
1. html-webpack-plugin (templateParameters 사용)
가장 먼저 시도했던 방법이었는데, 뭐 때문이었는지는 모르겠지만 제대로 적용이 되지 않았었다. 그래서 다른 방법을 사용했다가 다시 돌아와서 처음부터 차근차근 적용해 보니 가장 쉽게 적용되었던 것 같다. 플러그인을 사용하기 전 환경변수와 명령어를 먼저 세팅해 줬는데, package.json 파일에서 아래와 같이 설정하면 된다. set HELLO=helloworld라는 환경변수를 세팅해 주었고, html-webpack-plugin을 통해 이 변수를 사용해보려고 한다.
{
"name": "react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"hello:build": "set HELLO=helloworld&& webpack --progress --config build/webpack.config.hello",
},
...
}
환경변수 설정을 마쳤다면 html-webpack-plugin을 통해 변수를 사용하면 되는데 해당 플러그인이 없다면 먼저 설치해주자.
npm install html-webpack-plugin --save-dev
설치가 끝났다면 webpack.config.js 파일 내에서 플러그인 설정을 해주면 된다. 이전에 buildDate를 추가했던 방식과 동일한데 templateParameters를 사용하여 원하는 환경변수를 세팅할 수 있다. 본격적으로 플러그인을 사용하기 전에 환경변수를 전달해 줄 html, script를 먼저 세팅해 두었고, hello라는 환경변수를 사용하기 위해 원하는 위치에 <%= htmlWebpackPlugin.options.templateParameters.hello %>를 작성해 두었다.
<!-- Build Date : <%= htmlWebpackPlugin.options.templateParameters.buildDate %> -->
<!DOCTYPE html>
<html lang="ko">
<script>
const title = '<%= htmlWebpackPlugin.options.templateParameters.hello %>'
</script>
...
</html>
그 후, html-webpack-plugin으로 환경변수를 html로 전달하는 설정을 해주었는데, templateParameters라는 옵션에 원하는 변수들을 넣어주면 된다. 이렇게까지 설정했다면 모든 설정이 완료된 것이다.
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
...
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html', // HTML 템플릿 파일 경로
inject: false,
templateParameters: {
buildDate: new Date().toLocaleString(), // 날짜와 시간 추가
hello: process.env.HELLO // 사용할 환경변수
},
filename: 'build/index.html', // 빌드 후 저장 경로 및 파일 이름
minify: {
collapseWhitespace: false // 줄 바꿈 유지
}
})
]
...
}
최종적으로 package.json에 설정해 둔 명령어를 입력하면 아래와 같이 환경변수가 추가된 상태로 빌드된 파일을 만나볼 수 있다.
<!-- Build Date : 2023. 11. 15. -->
<!DOCTYPE html>
<html lang="ko">
<script>
const title = 'helloworld'
</script>
...
</html>
2. copy-webpack-plugin (transform 사용)
두 번째 방법으로는 내가 선언해 놓은 변수를 가져와 replace 하는 방법으로 말 그대로 하드코딩..? 하는 방법이었다. 이 방법을 사용할 경우에는 html, script 부분에 따로 추가해 줄 것은 없고, 아래와 같이 설정해서 사용하면 된다. title이라는 변수 안에 package.json에서 설정해 준 HELLO라는 변수를 사용해 볼 예정이다.
<!DOCTYPE html>
<html lang="ko">
<script>
const title = ''
</script>
...
</html>
이 방법은 index.html의 content 부분에서 const title = '' 이라는 부분을 찾아 내가 원하는 값으로 replace 하는 방법이다. 그렇기 때문에 까다롭고, replace 하기 어려운 코드라면 사용하기 어려울 것 같다.
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
...
plugins: [
new CopyWebpackPlugin({
patterns: [
{
from: './public/index.html',
to: './index.html',
transform(content, path) {
if (path.endsWith('index.html')) {
const contentString = content.toString()
const helloTag = `const title = '${process.env.HELLO}'`
const modifiedContent = contentString.replace("const title = ''", authTag)
return Buffer.from(modifiedContent)
}
}
}
]
})
]
...
}
위와 같이 설정을 해준 후, 빌드를 해보면 helloworld라는 변수 값이 잘 들어가 있는 것을 확인할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<script>
const title = 'helloworld'
</script>
...
</html>
