추후 팀의 확장(?)을 고려해서 jenkins로 react 빌드 파이프라인을 구성했습니다.
빌드
webpack.config을 관리하는 방법은 크게 두 가지로 나뉩니다. webpack.config.debug.js 이런 식으로 파일 명으로 특정 빌드에 맞는 설정을 불러오거나 module.exports = function(_env, argv)에서 argv로 들어온 mode값으로 &&연산자 또는 삼향 연산자로 빌드를 구분하는 방법이 있습니다.
저는 중복되는 설정이 많아서, 후자를 택했습니다. 이때 중요할 점이 있는데, 컴파일 후에 브라우저가 자동으로 새로 고침이 되도록 webpack을 구상하려면, target: 'web'과 devServer에 watchOptions: true 또는 watchOptions: { poll: true } 여야 한다는 겁니다.
https://webpack.js.org/concepts/ 여기 webpack 문서에서 예제와 활용 방법들을 자세히 소개하고 있으니 여기를 참고해서 설정 파일을 작성해주시면 됩니다.
package.json에서 npm 명령어로 빌드할 수 있게 스크립트에 다음과 같이 추가해줍니다.
...
"scripts": {
"start": "webpack serve --mode development --env development",
"build": "webpack-cli --mode production",
}
...
webpack-dev-server가 아닌 webpack serve을 쓰는 이유는, 이게 더 빠르기 때문입니다. 여기서 open인자를 추가해 줘도 되지만 저는 webpack.config.js에 다음과 같이 설정해서 start시 브라우저가 켜지도록 했습니다.
...
devServer: {
historyApiFallback: true,
open: true,
overlay: true,
watchOptions: {
poll: true
}
}
...
이렇게 하면 이제 npm start로 테스트 빌드를 하고, npm run build로 프로덕션 빌드를 할 수 있습니다.
Jenkins로 돌아가서 job을 만들고 설정에서, pipeline설정에서 pipeline script from scm을 선택하고 SCM으로 git을 선택해 줍니다.
젠킨스용 계정을 따로 만들어도 되고 사실 그게 더 좋지만, 저는 그냥 귀찮아서… 제 계정으로 진행했습니다.
https://github.com/settings/keys 으로 이동하셔서 puttygen같은 걸로 만들어진 ssh key를 추가해 줍니다.
“jenkins 주소/credentials/store/system/domain/_/ “으로 가서 Add credentials버튼을 누르고 SSH username with private key로 선택해 주고, private key란에 아까 puttygen으로 만들었던 ssh private key를 추가해 주시면 됩니다. jenkins credentials에 저장된 정보는 안전하니 걱정하지 않으셔도 됩니다.
다시 pipeline 설정으로 돌아와서 Repository URL에 git@github.com:username/project.git의 형태로 입력해 줍니다. Credentials은 아까 생성했던 걸 선택해줍니다. Branch Specifier의 값을 원하는 것으로 바꿔주면 됩니다.
저는 master브런치 push때마다 빌드하고 싶어서 */master로 설정했습니다. 물론 이렇게 되면 작업용 브런치를 하나 더 만들고 빌드 때 master에 marge해야겠죠?
조금 위로 올려서 GitHub hook trigger for GITScm polling을 켜줍니다.
repository 설정에 -> webhook으로 들어가 줍시다. Add webhooks을 클릭하시고, 다음과 같이 적어줍니다! 물론 ssl을 사용 안 하시면 disable을 선택해 주셔야 됩니다.
프로젝트 루트 디텍토리에 Jenkinsfile을 만들어줍니다. 다음과 같이 구성해 줍니다. declarative pipeline이 구상하기 더 쉬우니까 이렇게 만들어줍니다.
pipeline {
agent { docker { image 'node:alpine' } }
environment {
HOME = '.'
}
stages {
stage('Build') {
steps {
sh "npm install"
sh "npm run build"
}
}
...
이제 끝났습니다. repository master에 push 할 때마다 젠킨스가 실행될거에요! blueocean을 쓰시면 더욱 편하게 빌드 상황과 아티펙트를 확인하실 수 있습니다.
테스트
이제 두 번째 단계죠? 테스트를 해봅시다. 저는 react 도큐먼트에서 권장하는 jest로 테스트 환경을 구성했습니다. 더 자세한 테스트 내용은 https://reactjs.org/docs/testing-recipes.html 여기를 참고하시면 됩니다. package.json에 test를 추가해 주고 Jenkinsfile에도 추가해 줍니다.
...
"scripts": {
...
"test": "react-scripts test",
...
}
...
...
stage('Test') {
steps {
sh 'jest'
}
}
...
테스트도 끝났습니다.
릴리스
jenkins의 post action에서 dist폴더를 아티펙트에 저장해 봅시다. 간단하죠?
...
post {
always {
archiveArtifacts artifacts: 'dist/**/*.*', fingerprint: true
}
}
...
배포
react는 어차피 static web page라서 S3에서 호스팅이 가능합니다. 굳지 비싼 서버가 필요 없다는 거죠. jenkins 에서 S3BucketPublisher 플러그인을 설치해 줍니다. 버킷은 안 만드셔도 됩니다. 자동으로 생성해 주거든요.
아마존 IAM에서 jankins용 사용자를 추가해주고, AmazonS3FullAccess 정책을 추가해 줍니다. 그런 다음 다시 아까 “jenkins 주소/credentials/store/system/domain/_/ “으로 가서 Add credentials버튼을 누르고 AWS credentials을 선택한 다음 아까 IAM에서 얻은 access key id와 secret access key를 입력해 주시면 됩니다. 여기서 설정한 ID를 기억해 두세요.
이제 다시 Jenkinsfile에서 stage를 추가해 줍니다.
...
stage('S3 Upload') {
steps{
script{
step([
$class: 'S3BucketPublisher',
entries: [[
sourceFile: 'dist/**',
bucket: '버킷 이름(자동 생성됨)',
selectedRegion: '리전',
noUploadOnFailure: true,
managedArtifacts: false,
flatten: false,
keepForever: false,
]],
profileName: '아까 그 ID',
dontWaitForConcurrentBuildCompletion: false,
])
}
}
}
...
이제 S3에 파일이 자동으로 업로드됩니다!
추가 – clion 플러그인
https://plugins.jetbrains.com/plugin/6110-jenkins-control-plugin 플러그인을 설치합니다.
유저 설정 페이지 -> API Token에서 토큰을 만들어줍니다.
플러그인 설정 페이지에서, 유저 ID와 만들어진 토큰을 비밀번호로 입력합니다.
