지난글에 nestJS 앱을 dockerfile 을 사용해서 배포하는 방법을 정리했다. https://blog.1day1.org/719

그런데, dockerfile 내에서 git clone 으로 소스를 가져와서 하는 방법이다보니, github webhook 를 처리하기 어려운 부분이 있다.

그래서 coolify 에서 github app 을 세팅해서 사용하는 방법을 사용하기로 한다.

# coolify 프로젝트 ( + New Resource )

with GitHub App 으로 선택한다.

처음에는 +Add GitHub App 으로 앱등록을 해준다.(해당 방법은 아래에 따로 설명)

등록된 앱을 선택하고, Load Repository 를 하고, Build Pack 을 Dockerfile 으로 선택하고 다음으로 넘어간다.

기존에 봤던 설정화면 - 본인에 맞는 입력사항을 입력하고 Save

이전 글의 Dockerfile 이 차이가 있는데,
그 부분은 아래 깃허브 앱 등록 부분을 정리 후에 마지막에 설명한다.

# GitHub App 등록

Create a new Application 에서 +Add GitHub App 를 클릭하거나,
Coolify 좌측메뉴의 Sources 메뉴를 들어간다.(+Add)

적당한 이름을 입력하고, Continue ..

Webhook Endpoint 부분에 github 쪽에서 접근가능한 URL 을 선택하고, Regiser Now

깃허브로 이동한다. ( 앱을 생성하는 절차 )

다시 coolify 로 이동해서, Install Repositories on GitHub  를 클릭한다.(세부 정보 입력으로 이동)

그러면 다시 깃허브로 이동해서 세부적인 설정을 하게 된다.

본인 깃허브 계정의 전체 저장소 또는 프로젝트를 선택할 수 있다. (Install 으로 Github App 을 생성한다.)

다시 coolify 로 이동하면, 설정된 앱을 확인할 수 있다.(아래에서 따로 추가 설정할 것은 없고, 완료 화면)

해당 App 등록이 완료되면,  초기에 Create a new Application 부분에 해당 앱이 나오게 된다(선택하여 다음 진행)

# Dockerfile 설정.(깃허브 프로젝트 소스내에 포함)

예전 글(https://blog.1day1.org/719)에는 Dockerfile 내에 git clone 으로 소스 다운로드하는 형태였는데,
Github App 연동 방식은 저장소를 연결해서 소스에 접근할 수 있어, 다운로드 단계를 제거 한다.

# 빌드 스테이지
FROM node:22 AS builder

# 작업 디렉토리 설정
WORKDIR /usr/src/app

# pnpm 설치
RUN npm install -g pnpm

# 모든 소스 파일 복사
COPY . .

# 의존성 설치
RUN pnpm install

# 앱 빌드
RUN pnpm run build


# 프로덕션 스테이지
FROM node:22-slim

# 작업 디렉토리 설정
WORKDIR /app

# pnpm 설치
RUN npm install -g pnpm

# 빌드 스테이지에서 필요한 파일들만 복사
COPY --from=builder /usr/src/app/package*.json ./
COPY --from=builder /usr/src/app/pnpm-lock.yaml ./
COPY --from=builder /usr/src/app/dist ./dist

# 프로덕션 의존성만 설치
RUN pnpm install --prod


# 프로덕션 모드로 실행
CMD ["pnpm", "run", "start:prod"]

# 포트 설정 (NestJS 기본 포트는 3000)
EXPOSE 3000

도커의 이미지 빌드시 두단계를 거치도록 분리했다. (multi-stage 빌드 라고 하는 듯 하다.)

빌드 단계 + 프로덕션 단계.  코드가 복잡하지는 않아 쭈욱 한번 보면 파악이 될 것이다.

깃허브 webhook 설정해서 git push 하면 자동으로 배포하게 되도록 설정한다.
일단 여기까지... webhoook 설정은 다음에...

Github App 방식으로 하니, 따로 webhook 설정 안해도 되네. 패스... 끝.

플러터를 공부하면서, 강의도 보면서 따라 앱 만들기를 하고 있다.

[따라하기의 필수는 가능한 직접 타이핑 한다]

여러강의를 보면서 따라하고, 진행상황을 정리하고자 한다.

이번은 노마드코더 님의 강의 중 한 부분을 따라했다.
https://nomadcoders.co/flutter-for-beginners/lectures/4139 (3강 UI Challenge )

* 깃허브에 기본강의 + 나름의 개선 사항을 적용해봤다.
https://github.com/1day1/flutter-practice-toonflix

wallet 의 카드 부분을 커스텀 위젯으로 만들고, 이 부분을 또 데이터를 넘겨서 처리해봤다.
https://github.com/1day1/flutter-practice-toonflix/blob/main/lib/widgets/wallet.dart

typedef WalletData = ({
  String text1,
  String amount,
  String text3,
  IconData curIcon,
  bool isInverted
});

typedef 로 데이터를 정의하고 ( C/go 등의 구조체 -struct- 와 비슷한 것 같다) 해당 데이터를 List 화 한 후 넘겨주었다.

walletDatas: [
                    (
                      text1: 'Euro',
                      amount: '6 234',
                      text3: 'EUR',
                      curIcon: Icons.euro_rounded,
                      isInverted: false,
                    ),
                    (
                      text1: 'Dollar',
                      amount: '55 124',
                      text3: 'USD',
                      curIcon: Icons.attach_money_outlined,
                      isInverted: true,
                    ),
                    (
                      text1: 'Bitcoin',
                      amount: '1.2894',
                      text3: 'BTC',
                      curIcon: Icons.currency_bitcoin_outlined,
                      isInverted: false,
                    )
                  ]

[추가 개선할 부분]

1) curIcon 과 isInverted 도 값을 넘겨줄 필요없이, 내부적으로 처리한다.
2) text1 / text3 도 한쪽만 값을 보내서 처리한다.
=> https://github.com/1day1/flutter-practice-toonflix/commit/ab019691a70aa38a9908cee2a543c351ca51ec59

currencyInfo 를 내부 데이터로 처리했는데, 2차원 Map 의 접근은 못하나?
(예를 들어 currencyInfo['USD']['currency'] 로 바로 접근이 되면 좋은데, 못 찾겠다.)

일단 singleWhere 로 처리함.

3) 위 값을 json 타입으로 가져온다(외부 연동 염두)
=> https://github.com/1day1/flutter-practice-toonflix/commit/2d812367e535f296a8d55b6ec04d29a0c525637e

json 파일을 불러와서 보여지도록 조치함.

[일단 여기까지 다른 강의 따라하기로 ..]

세부적인 부분은 링크로 대신

1. ssh 키 생성 : https://docs.github.com/ko/authentication/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent

2. 깃허브에 키 등록 : https://github.com/settings/keys

키등록까지 한 후에 ssh 계정 설정으로 여러계정의 깃허브에 연결할 수 있다.
(예시> 개인계정 / 회사계정 등)

위 계정의 ssh 키는 달라야 한다. 동일하면, 등록이 안된다.
(키 파일명도 다르게 해준다. 기본 : id_ed25519 , 추가 : id_ed25519_idname 등 )

3. 키 가 등록되는 위치는 .ssh 를 기준으로 .ssh/config 파일에 다음항목을 추가한다.

Host github.com-idname
	hostname github.com
	User git
	IdentityFile ~/.ssh/idname-id_ed25519

위 처럼 github.com 주소를 분리해준다.
즉, github.com 로 접속하면 기본값이 .ssh/id_ed25519 가 적용되고, github.com-idname 으로 접속하면 .ssh/idname-id_ed25519 가 적용되는 식이다.

ssh git@github.com-idname 를 해보면 다음과 같이 나와야 한다.

PTY allocation request failed on channel 0
Hi idname! You've successfully authenticated, but GitHub does not provide shell access.
Connection to github.com closed.

이후에는 저장소를 지정한 Host 주소로 연결해서 사용하면 된다.

git remote add origin git@github.com-idname:idname/your-repositry-name.git

커밋 후 git push -u origin main 로 저장소에 업로드 하면 된다.

저장소 별로 author 정보를 등록해준다.( 전체 적용시는 --global 을 추가 - git config --global OOO )

git config user.name "user name"
git config user.email "your-mail@your-mail.com"

혹시 author 가 다르게 등록이 되었으면, 전체 변경이라 주의!!

git rebase -r --root --exec "git commit --amend --no-edit --reset-author"
git push --force-with-lease