firebase 프로젝트 생성

• firebase 생성의 경우는 해당 글 참고

리액트에 firebase cli 연결

• 배포하고 싶은 리액트 프로젝트에 firebase cli 설치

npm install -g firebase-tools

• firebase cli에 로그인

firebase login

• 엔터 시 로그인 창 출력
• 연결하고 싶은 계정을 선택한 후 엑세스 동의를 해주면 cli에 로그인이 완료된다.

hosting 서비스를 이용한 배포

• firebase init

firebase init

• init 후 배포를 하기 위해 Hosting : Configure files…. 로 내린 후 스페이스바로 선택한 후 엔터를 누른다.

• 아까 firebase에서 만들어놓은 프로젝트를 선택하기 위해서 “Use an existing project”에서 엔터를 누른다.

• 처음에 만든 프로젝트를 선택해준다.

• 배포할 디렉토리를 선택한다.
  기본값은 public, react는 빌드 시 build에 생성되므로 build를 입력해준다.

• 그 다음은 엔터를 눌러 계속 기본값으로 넘어가다가 “Set up automatic builds and deploy with Github?” 라는 질문에서 ci/cd 구축을 위해 yes를 입력해준다.
• 그러면 깃허브 로그인 창이 떠오르게 된다.

• 깃허브 로그인을 성공하면 ci/cd를 연결할 user/repository를 입력한다.

• 그 후에는 계속 엔터를 쳐주다가 What is the name of the GitHub branch associated with your site's live channel?이라는 질문에서 배포할 브랜치 이름을 적어준다.

• 그 다음 터미널에 뜬 url을 들어가서 해당 레포의 firebase CLI를 Revoke 해준다.

i  Action required: Visit this URL to revoke authorization for the Firebase CLI GitHub OAuth App:
https://github.com/settings/**********

• 이렇게 되면 기본적인 설정이 완료되고 .github에 yml파일이 생기고 깃허브 레포에는 github action이 추가된다.

이 작업까지 완료하면 수동으로 직접 배포하는 것도 가능하다

npm run build

firebase deploy

github action을 사용한 ci/cd 연결

• 기본적으로 firebase와 github를 연결하게 된다면 두가지의 yml 파일이 생기게 된다.

1. firebase-hosting-merge.yml
   • 지정한 브랜치가 병합될 때 마다 자동으로 Firebase Hosting으로 배포

# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools

name: Deploy to Firebase Hosting on merge
'on':
  push:
    branches:
      - main
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_PATHTOPET }}'
          channelId: live
          projectId: pathtopet

1. firebase-hosting-Pull-Request
   • PR을 올릴 때 Firebase Hosting에 대한 미리보기 버전을 자동으로 배포하는 것

# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools

name: Deploy to Firebase Hosting on PR
'on': pull_request
jobs:
  build_and_preview:
    if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_PATHTOPET }}'
          projectId: pathtopet

yml파일에 대한 간단한 내용정리

• name: 워크플로우의 이름
• 'on': 이 워크플로우가 어떤 GitHub 이벤트에 의해 트리거될지 정의
• jobs: 워크플로우에서 실행할 작업을 정의
  • if: 조건문으로, 이 작업이 실행될 조건을 지정
    여기서는 pull request가 현재 저장소에서 생성된 것인지 확인.
  • ${{ github.event.pull_request.head.repo.full_name == github.repository }} 이 조건은 pull request가 포크(fork)된 저장소가 아닌 원본 저장소에서 생성됐을 때만 작업을 실행하도록 한다.
  • runs-on: 작업이 실행될 환경을 지정
  • steps: 작업을 구성하는 단계들. 이 단계들은 순차적으로 실행
    • actions/checkout@v4: GitHub Action이 현재 저장소의 코드를 체크아웃하여 작업 실행 환경에 가져온다.
    • FirebaseExtended/action-hosting-deploy@v0: Firebase Hosting으로 배포를 담당하는 GitHub Action
• 여기서 조금 변경해서 빌드를 자동으로 한 후 그것을 배포하게 코드를 약간 바꿔준다.

name: Deploy to Firebase Hosting on merge

"on":
  push:
    branches:
      - main

jobs:
  build_and_deploy:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: "21"

      - name: Install Dependencies
        run: npm install 

      - name: Build
        run: npm run build 
        env:
          CI: false

      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: "${{ secrets.GITHUB_TOKEN }}"
          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_PATHTOPET }}"
          channelId: live
          projectId: pathtopet

name: Deploy to Firebase Hosting on PR

"on": pull_request

jobs:
  build_and_preview:
    if: "${{ github.event.pull_request.head.repo.full_name == github.repository }}"
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: "21" 

      - name: Install Dependencies
        run: npm install 

      - name: Build
        run: npm run build 
        env:
          CI: false

      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: "${{ secrets.GITHUB_TOKEN }}"
          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_PATHTOPET }}"
          projectId: pathtopet

• 배포되기전 빌드를 자동으로 해주기 위해 node js를 사용해서 npm install 후 build 해준다.

이렇게 되면 잘 배포되는것을 확인할 수 있다.

🚀NCP와 깃허브 액션을 통한 CI/CD 구현기🚀

1. ncp에서 배포 할 ubuntu server 생성
2. npc에서 docker image를 저장할 object storage와 container registry 생성
3. vite+react+typscript의 프론트 레포에서 배포할 dockerfile 작성
4. 배포를 위한 github action 등록

NCP에서 ubuntu server 생성

네이버 클라우드 계정에서 server 생성

• 서버는 유지비를 생각해서 micro로 생성했다. (최초 결제수단 등록 시 1년간 하나의 micro 서버 무료)

• 새로운 인증키를 생성 후 다운받아 둔다.

• 새로운 ACG(Access control group, 보안 그룹)을 생성해준다.
  • 임시로 0.0.0.0/0으로 열어두었다.
  • 보안을 위해서는 특정 주소에서만 접근할 수 있게 지정해주면 좋다.

• 서버 생성 후 “운영중”이 뜰때까지 기다린다.

• 서버가 생성되었다면 접속을 위해 포트포워딩을 설정해주어야 한다.
• “외부 포트”에 임의의 포트번호를 입력 후 추가를 해준다.

• 서버에 연결하기 위한 비밀번호를 설정해준다.
• 생성한 서버 클릭 후 “서버 관리 및 설정 변경” → “관리자 비밀번호 확인”

• 아까 서버를 생성할 때 다운받아 놨던 .pem 파일을 넣은 후 “비밀번호 확인”클릭

• 그렇게 되면 관리자 이름과 비밀번호가 뜨게 되는데, 최초 접속 시 비밀번호로 복사해서 기록해 놓는다.
  • 보통 관리자 이름은 root다.

생성한 서버에 접속하기

• 위에서 만든 서버에 접속해 본다.
• “포트포워딩” 탭에서 설정했던 포트번호와, 거기에 있는 공인 ip를 활용해서 서버에 접속한다.
• ssh 연결 시 비밀번호를 입력해달라고 하는데, 바로 위에서 복사해두었던 최초 접속 시 비밀번호를 넣어준다.

ssh -l root -p [포트번호] [공인 ip]

• 접속 완료

• 서버에 접속했으면 배포 시 사용할 도커를 설치해준다.

우분투 서버에 도커 설치

1. 우분투 시스템 패키지 업데이트

sudo apt-get update

2. 필요한 패키지 설치

sudo apt-get install apt-transport-https ca-certificates curl gnupg-agent software-properties-common

3. Docker의 공식 GPG키를 추가

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -

4. Docker의 공식 apt 저장소를 추가

sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"

5. 시스템 패키지 업데이트

sudo apt-get update

6. Docker 설치

sudo apt-get install docker-ce docker-ce-cli containerd.io

7. Docker가 설치 확인

7-1 도커 실행상태 확인

sudo systemctl status docker

7-2 도커 실행

sudo docker run hello-world

출처

[Docker] Ubuntu 22.04 Docker 설치

Object Storage, Container Registry 생성

• 도커 이미지를 저장하고 가져다 쓰기 위한 Object Storage와 Container Registry를 생성해준다.

Object Storage 생성

• Object Storage 이용 신청
• 이용 신청 후 버킷 생성

• 이름 입력 후 설정 건드리지않고 “다음” 버튼 클릭 후 버킷 생성

Container Registry 생성

• Container Registry로 이동 후 “레지스트리 생성” 클릭

• 이름 입력 및 생성한 Object Storage 넣은 후 생성

vite+react+typescript에서 Dockerfile 만들기

• 배포할 프로젝트 최상단에 nginx를 사용하여 배포하는 Dockerfile을 생성
• (참고로 현재 배포에 사용하는 gihub repo가 client와 server둘다 있어서 프론트 코드는 /client에 들어가 있다.)

# 첫 번째 단계: 빌드 환경 구축
FROM node:lts-alpine as build-stage

WORKDIR /app

# 의존성 파일 복사 및 설치
# COPY [내 package.json 파일과 yarn.lock 파일의 경로] [복사할 위치]
COPY ./client/package.json ./client/yarn.lock ./
RUN yarn install && yarn global add typescript

# 소스 코드 복사
COPY ./client .

RUN ls -l
# 애플리케이션 빌드
RUN yarn build

# 두 번째 단계: Nginx를 사용하여 애플리케이션 서빙
FROM nginx:stable-alpine as production-stage

# 빌드된 파일을 Nginx 서버로 복사
COPY --from=build-stage /app/dist /usr/share/nginx/html

# 80 포트 노출
EXPOSE 80

# Nginx 실행
CMD ["nginx", "-g", "daemon off;"]

CLI로 container registry에 도커 이미지 build,push 하기

NCP container registry에 로그인하기 위해서는 마이페이지에서 인증키 생성이 필요하다.

• 마이페이지 - 계정관리 - 인증키관리 - 신규 API 인증키 생성 - Access Key ID, Secret Key가 각각 ID, PW로 로그인시 사용된다.
• 해당 repository에 접근하기 위해서는 로그인이 필요하다.
• Registry URL은 Container Registry에서 생성한 레지스트리를 클릭하면 Public Endpoint가 있는데 그것을 사용해주면 된다.

docker login <CONTAINER_REGISTRY_URL>

• 다음을 입력하면 username과 password를 입력하라고 나오는데, 위에서 발급한 Access Key ID를 username으로, secret key를 password로 입력하면 된다.
• 도커 파일을 작성한 배포할 프로젝트의 최상단에서 다음 명령어를 쳐주면 build되고 push되어서 Container Regisrty에 반영된다.

docker build -t <CONTAINER_REGISTRY_URL>/<TARGET_IMAGE[:TAG]> .
docker push <CONTAINER_REGISTRY_URL>/<TARGET_IMAGE[:TAG]>

깃허브 액션을 이용해 ci/cd 구축

깃허브 액션을 위한 .yml 파일 작성

• 이제 ci/cd 구축을 위해 특정 브랜치가 push, merge 등 업데이트 될 때 마다 build 후 배포되게 깃허브 액션으로 등록 한다.
• 레포에서 .github/workflows에 deploy.yml 파일을 생성한다.

name: auto deploy #작업 이름

on:
  push:
    branches:
      - dev # dev branch가 push 될때 실행

jobs:
  docker_push_front: #도커파일에 작성된 내용을 바탕으로 이미지를 push한다.
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repository
        uses: actions/checkout@v3

      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v2

      - name: Login to NCP Container Registry
        uses: docker/login-action@v2
        with: #container registry에 연결
          registry: ${{ secrets.NCP_CONTAINER_REGISTRY }}
          username: ${{ secrets.NCP_ACCESS_KEY }}
          password: ${{ secrets.NCP_SECRET_KEY }}

      - name: Build and Push Docker Image
        uses: docker/build-push-action@v3
        with: # 도커파일에 작성된 내용으로 이미지를 빌드, container registry에 push한다.
          context: .
          file: ./client/Dockerfile  
          push: true
          tags: ${{ secrets.NCP_CONTAINER_REGISTRY }}/front
          cache-from: type=registry,ref=${{ secrets.NCP_CONTAINER_REGISTRY }}/front
          cache-to: type=inline

  docker_pull_front:
    name: Connect server ssh and pull frontend from container registry
    needs: docker_push_front #위의 push가 진행 된 후
    runs-on: ubuntu-latest
    steps: # container registrty에 push된 
      - name: connect ssh
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.FRONT_HOST }}
          username: ${{ secrets.FRONT_USERNAME }}
          password: ${{ secrets.FRONT_PASSWORD }}
          port: ${{ secrets.FRONT_PORT }}
          script: |
            docker pull ${{ secrets.NCP_CONTAINER_REGISTRY }}/front
            docker stop $(docker ps -a -q)
            docker rm $(docker ps -a -q)
            docker run -d -p 80:80 ${{ secrets.NCP_CONTAINER_REGISTRY }}/front
            docker image prune -f

• 코드에 대한 자세한 내용은
• https://sungbin.dev/post/NCP Container Registry를 활용하여 CI·CD 환경 구축하기에 나와있다.

깃허브 secret 등록

• 깃허브 액션이 제대로 작동하기 위해서 serect을 등록한다.
• github 레포에서 settings → secrets and variables → actions로 가서 “new repository secret”르 누른 후 다음과 같이 이름과 그 값을 추가한다.

컨테이너 레지스트리 연결할 때 사용하는 값들

• NCP_CONTAINER_REGISTRY : 컨테이너 레지스트리의 Public Endpoint
• NCP_ACCESS_KEY : mypage에서 발급 받은 Access Key ID
• NCP_SECRET_KEY : mypage에서 발급 받은 secret key
• FRONT_HOST : 포트포워딩 탭에서 설정했던 서버 접속 공인 ip
• FRONT_PORT : 포트포워딩 탭에서 설정했던 포트번호
• FRONT_USERNAME : 관리자 비밀번호 설정에서 확인했던 관리자 이름 (보통 초기에는 root)
• FRONT_PASSWORD : 관리자 비밀번호 설정에서 확인했던 비밀번호

→ 추가 후 dev 브랜치에 push가 일어나게 되면 자동으로 server에 빌드 및 배포가 이루어진다.

서버 공인 ip 설정

• 지금까지 사용했던 ip는 “서버 접속용 공인 ip”다.
• 실제로 배포한 server에 접속하기 위해서는 공인 ip가 필요하다.
• server의 public ip로 이동

• 공인 ip 신청, 처음 만들었던 서버를 적용 서버로 선택 연결

완성

• 이제 설정한 공인 ip로 접속할 경우 배포되어있는 것을 확인할 수 있다.

Reference

https://sungbin.dev/post/NCP Container Registry를 활용하여 CI·CD 환경 구축하기

파이어베이스 프로젝트 생성

제일 처음 파이어베이스를 연동해주어야 함.

Sign in (클릭 시 파이어베이스로 이동)

• 파이어 베이스 접속 후 로그인.
• 프로젝트 추가 클릭
  

• 프로젝트 이름 입력
• 애널리틱스 건들지 않고 넘어가기

• 기존의 계정 혹은 새 계정 만들고 선택 후 프로젝트 생성

firebase 프로젝트에 웹앱 추가

• 앱 추가 클릭 후 웹 클릭
  
  
  

• 이름 입력 후 다음 클릭

![](https://velog.velcdn.com/images/fdsa200/post/d0fab8aa-6c0b-4f51-9021-2b00dd0c3506/image.png)

• sdk 설정에 있는 js 코드 복사
  

리엑트에 파이어베이스 추가

위에서 웹을 추가할 때 봤던 sdk설정에 있는 내용에 리엑트에 추가

• 파이어 베이스 설치

npm install firebase

• 설치 후 firebase.js 파일 하나 만들어서 위의 내용 복사&붙여넣기 (파일이름은 상관없음)