서론
Flutter를 3년 전 수박 겉핥기로 하다가 안 되는 게 너무 많아서 접은 그 플랫폼이 지난 4월 1일 세미나를 보고 나서 엄청 발전했다는 걸 느꼈습니다.
내 미래 밥줄이 Flutter 겠구나 생각이 들어 이제라도 시작해보려고 합니다.
현재 진행중인 사이드 프로젝트에서 제가 담당하는 부분은 html로 페이지 구성하는 건데 이걸 Flutter Web으로 하면 좋은 발판이 되겠구나 생각이 들어 바로 변경하기 전 기술 스펙을 확인해야 하기 때문에 몇 가지 들을 확인 했습니다.
1. web 지원하는가?
2. 개인 나스 Jenkins 에 서버 올려서 사용할 수 있는가?
3. 엑셀 파일 입/출력 가능한가?
4. http 통신 가능한가?
1번 같은 경우 세미나를 통해 강력한 Flutter PWA 가 있다고 해서 가능
3번 같은 경우는 아마 될거 같고, 파일 다운로드 기능 될 것으로 보입니다. (지금 버전이 3.7인데 안된다면 그게 더 이상할 정도..)
4번 같은 경우에는 제가 기억하기론 3~4년 전에는 안 됐던 걸로 기억나는데 지금은 https://pub.dev/ 여기에 아주 떡하니 있었습니다.
제일 중요한 2번 개인 나스에 CI / CD 환경 구축 관련해서는 정보가 너무나도 부족해서 제가 직접 환경을 구축해 봤고, 구축한 경험을 바탕으로 별거아니지만 이번글에 포스팅해보려고 합니다.
본론
Jenkins 환경 스펙
1. 시놀로지 나스 DS 720+
2. 젠킨스 버전 2.357
1. Flutter SDK 다운로드 위치 확인
http://(https://docs.flutter.dev/development/tools/sdk/releases?tab=linux)
위 링크 클릭해서 안정적인 버전 (Stable)을 다운로드합니다. 이때 아래 화면과 같이 개발자 도구에 들어가서 다운로드 요청한 API 주소를 확인합니다.
2. Docker에 위치한 Jenkins Container 접속
터미널을 열어서 ssh 접속 후 Docker에 실행되어 있는 젠킨스 컨테이너에 접속합니다.
sudo docker container exec -u 0 -it {컨테이너 이름} bash
ex.) sudo docker container exec -u 0 -it jenkins bash당연히 sudo 관리자 권한으로 진입하는 거라 해당 명령어를 실행하면 root 비밀번호를 입력하셔서 접속하시면 되겠습니다.
3. SDK 설치하고 싶은 위치 설정
저 같은 경우에는 기존에 java sdk 경로가 /opt에 있어서 flutter 도 마찬가지로 /opt 에 설치했습니다.
cd opt
wget https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.7.9-stable.tar.xzwget라는 명령어를 사용해서 아까 복사해 둔 flutter sdk download URL를 입력해서 다운로드합니다. 다운로드를 하였으면 tar.xz 압축 해제합니다.
// tar.xz 압축해제하기 위한 xz-utils 설치합니다.
apt-get install xz-utils
// flutter sdk 압축 해제
tar -xf flutter_linux_3.7.9-stable.tar.xz
4. Flutter 환경변수 설정
Flutter SDK를 설치했으면 이제 환경 변수를 설정해야 합니다.
나스 도커에 들어가셔서 아래 캡처 화면처럼 Flutter SDK 가 설치된 위치를 PATH 값에 추가합니다.
Flutter SDK 경로 opt/flutter/bin
{기존 환경 변수값}:{Flutter SDK경로}
/opt/java/openjdk/bin:opt/flutter/bin
젠킨스를 다시 실행시키고 Flutter 명령어가 제대로 동작하는지 확인합니다.
한 번 더 젠킨스 페이지에 들어가서 글로벌 환경 변수에 Flutter SDK 경로를 추가합니다.
Dashboard > Configure System > Global properties 가셔서 환경 변숫값을 아래와 같이 추가합니다.
이름: PATH
값: $PATH:/opt/flutter/bin
5. 프로젝트 생성 (마지막)
여기까지는 Flutter를 실행할 수 있는 환경을 구축한 거고 이제부터는 개인 스타일에 맞게 처리한 거라 정답이 아니라는 점 참고 바랍니다 :)
구현 방식
1. node express를 통해 flutter web build를 통해 산출물 위치에 서버를 실행합니다.
2. 다시 배포할 때 서버를 실행했던 파일들 삭제하고 서버 환경 구축 후 다시 실행합니다.
/server_config 세팅
server.js
const express = require('express');
const path = require('path');
require('dotenv').config(); // Environment Variable Setting
const cookieParser = require('cookie-parser');
const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, './')));
require('http').createServer(app).listen(process.env.PORT, () => {
console.log('Http Server Start, Port: ' + process.env.PORT);
})package.json
{
"name": "flutter-web-client",
"version": "0.0.1",
"scripts": {
"start": "set NODE_EVN=.env && node server.js&"
},
"dependencies": {
"cookie-parser": "~1.4.6",
"dotenv": "^16.0.3",
"express": "~4.18.2"
}
}위와 같이 간단하게 node server를 셋팅해두고 /server_config에 해당 파일들을 위치해 둡니다.
이후 젠킨스 빌 스크립트를 통해 Flutter Web 파일들과 node server 셋팅한 것들을 /server라는 폴더 안에 옮겨서 서버를 실행합니다.
/server 폴더로 이동시키는 BuildScript
echo "이전 빌드된 소스들 제거"
if [ -d server ]; then
rm -rf server
fi
mkdir server
# Flutter Web Build Start!
flutter build web
echo "Flutter Build Success"
# build move to server directory and node server config
cp -r build/web/* server/
cp -r server_config/. server/
node server 실행
BUILD_ID=dontKillMe
# Process 중 node 이고, {server} 서버가 구동중인 Process Job ID 찾기
PROCESS=`ps aux | grep {server} | grep node | awk '{print $2}'`
# Null Check
if [ -z "$PROCESS" ]; then
echo "server Process is not running."
else
echo "server Process is running."
# -15 -> 안전하게 종료
kill -15 `ps -ef | grep {server} | grep -v grep | awk '{print $2}'`
fi
# Delay 3초
sleep 3
cd server
npm install
npm run start
# Delay 5초후 종료
sleep 5
exit 0우선 NodeJS Script 빌드 환경으로 변경하고 위에 bash script 문을 입력합니다.
빌드 성공
마치며
Flutter를 통해 웹 호스팅 하는 방법은 여러 가지가 있습니다. 만약 aws를 안 쓰고나 나스 같은 네트워크 환경이 없을 때 아래와 같은 방법으로 처리할 수 있습니다. (아래 같은 방법은 자료가 꽤 많이 나와있고 간단합니다.)
1. Firebase Hosting
2. Github io Page
제가 한 방법은 개인 나스를 가지고 있고 개인용으로 사용하고 있는 사람들한테는 도움이 될만한 글이 아닌가 싶습니다. 위처럼 젠킨스 가지고 CI / CD 환경 구축하는 거는 웬만한 서비스하는 기업에서는 그냥 하지 않을까.. 생각이 듭니다 :) 아무튼 자료 찾다가 제가 한 방식으로 한 자료는 없어서 포스팅해봤습니다.
그럼 긴 글 읽어주셔서 감사합니다.