Vite + Firebase 로 만든 프로젝트를 Github 배포하면서 생긴 일.

1. 글을 쓰는 이유

미래의 내가 혹시나 같은 에러나 유사한 에러를 만났을 때를 대처하기 위함과 혹여나 다른 분들에게 도움이 될까해서 글을 써놓는다.

• 프로젝트에서 사용한 기술 스택은 Vite, React, Firebase 이다.
• Vite로 Github 에 배포하는 건 처음이라 많이 삽질한 내용을 적어놓으려고 한다.
• Firebase에서 사용할 환경 변수는 Github secrets를 이용했다. 이거 설정하는 건 아래 주소에 남겨두겠다.

 

2. Github Actions와 Auto Deploy 시작.

• Github Actions로 내가 git으로 push 작업이 일어나게 되면 자동으로 Build 부터 Deploy까지 자동으로 실행시켜주는 actions를 만드는 작업이었다. 처음 해보는 작업이었기에 구글링을 통해 나오는 자료를 그대로 복사해서 작업을 시작했다.

name: Deploy

on:
  push:
    branches:
      - main

jobs:
  build: 
    runs-on: ubuntu-latest

    steps:
      - name: Checkout Repository
        uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'

      - name: Install Dependencies
        run: |
          yarn install
      - name: Build
        run: |
          yarn build
          
  deploy:
    needs: build
    runs-on: ubuntu-latest

    steps:
      - name: Deploy to Firebase Hosting
        uses: w9jds/firebase-action@master
        with: 
          args: deploy --token ${{ secrets.FIREBASE_TOKEN }}
        env:
          VITE_PUBLIC_URL : ${{ secrets.VITE_PUBLIC_URL }}
          VITE_FIREBASE_API_KEY : ${{ secrets.VITE_FIREBASE_API_KEY }}
          VITE_FIREBASE_AUTH_DOMAIN : ${{ secrets.VITE_FIREBASE_AUTH_DOMAIN }}
          VITE_FIREBASE_PROJECT_ID : ${{ secrets.VITE_FIREBASE_PROJECT_ID }}
          VITE_FIREBASE_STORAGE_BUCKET : ${{ secrets.VITE_FIREBASE_STORAGE_BUCKET }}
          VITE_FIREBASE_MESSAGING_SENDER_ID : ${{ secrets.VITE_FIREBASE_MESSAGING_SENDER_ID }}
          VITE_FIREBASE_APP_ID : ${{ secrets.VITE_FIREBASE_APP_ID }}
          VITE_FIREBASE_MEASUREMENT_ID : ${{ secrets.VITE_FIREBASE_MEASUREMENT_ID }}

• 위의 코드가 내 첫 Deploy.yml 파일이었다. 하지만 

 

1. 첫번째 에러

error commander@11.0.0: The engine "node" is incompatible with this module. Expected version ">=16". Got "14.21.3"
8error Found incompatible module.
9info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
10Error: Process completed with exit code 1.

• Dependencies 에러. 의존성 관련 설치 에러였다. yarn install이 정상적으로 실행되지 않았다는 것이었다. 이를 해결하기 위해 yarn install을 하기 전에 actions가 설치해야하는 node의 버전을 16 버전으로 업그레이드 시켰다.
• node의 버전을 업그레이드 시켜 의존성 설치는 정상적으로 진행되었지만 deploy 과정에서 에러가 발생했다.

 

2. 두번째 에러

Either FIREBASE_TOKEN or GCP_SA_KEY is required to run commands with the firebase cli

deploy

The following actions uses node12 which is deprecated and will be forced to run on node16: actions/checkout@v2. For more info: https://github.blog/changelog/2023-06-13-github-actions-all-actions-will-run-on-node16-instead-of-node12-by-default/

다음 작업은 더 이상 사용되지 않는 node12를 사용하고 있으며 강제로 node16에서 실행되도록 변경될 것입니다: actions/checkout@v2. 자세한 내용은 다음 링크에서 확인하세요:

• 두번째 에러가 발생했다. 찾아보니 Checkout Repository의 uses에서 사용하는 actions/checkout 쪽과 관련된 에러였다. node의 버전만 무작정 올리다보니 서로 호환이 안된듯 하다. 그래서 

	steps:
      - name: Checkout Repository
        uses: actions/checkout@v2.5.0

• 버전업을 진행했다. 그랬더니 build 과정에서 아래와 같은 에러 메시지가 발생했다.

 

3. 세번째 에러

build
The following actions uses node12 which is deprecated and will be forced to run on node16: actions/checkout@v2. For more info: https://github.blog/changelog/2023-06-13-github-actions-all-actions-will-run-on-node16-instead-of-node12-by-default/

다음 작업은 더 이상 사용되지 않는 node12를 사용하고 있으며 node12에서 node16로 강제로 실행되게 될 것입니다: actions/checkout@v2. 자세한 내용은 다음 링크를 참조하세요:

• ????? 뭐지.... 여전히 node 버전과 actions/checkout의 버전 호환이 되지 않았다. 그래서 나의 프로젝트에서 사용하는 node 버전을 다시 확인해봤고, 확인결과 18 버전을 사용하고 있었다. 18 버전을 호환하는 actions/checkout은 v3 였다. 

    steps:
    - name: Checkout Repository
      uses: actions/checkout@v3
      
    - name: Set up Node.js
      uses: actions/setup-node@v3
      with:
        node-version: 14
        node-version: 18

• 위와 같이 변경하였더니 Build와 의존성 설치는 통과하였다. 
• 새로운 에러의 등장. Deploy!! Github Pages에서 Deploy를 하는 과정에서 발생했다.

 

4. 네번째 에러

ProcessError: fatal: could not read Username for 'https://github.com': No such device or address
25
26 at ChildProcess.<anonymous> (/home/runner/work/DiaryWebService/DiaryWebService/node_modules/gh-pages/lib/git.js:42:16)
27 at ChildProcess.emit (node:events:517:28)
28 at maybeClose (node:internal/child_process:1098:16)
29 at ChildProcess._handle.onexit (node:internal/child_process:303:5)
30error Command failed with exit code 1.
31info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
32Error: Process completed with exit code 1.

• 읭.... github의 username을 읽을 수 없다는 뜻이었다. 처음 deploy 파일을 작성했을 때 github와 관련된 내용을 넣지 않았기에 발생했다.  그래서 deploy 과정에 나의 github 이메일과 이름을 추가했다. 
• 또한 vite를 사용한 프로젝트여서 build를 하게 되면 dist라는 폴더를 통해 build가 되어 gh-pages 라는 branch에 dist라는 폴더를 push 하는 방법으로 진행하려고 했다.
• 그리고 Github에서 제공하는 Token을 추가해줬다. 이걸 해줘야 한단다. 

    - name: Deploy to GitHub Pages
      run: |
        yarn deploy
      env: 
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        git config --global user.email "Github Email"
        git config --global user.name "Github User Name"
        git checkout -b gh-pages
        git add -f dist
        git commit -m "Deploy Vite App to github pages"
        git subtree split --prefix dist -b gh-pages
        git push -f origin gh-pages:gh-pages

 

5. 다섯번째 에러

fatal: branch 'gh-pages' is not an ancestor of commit '418383f676334562c079afc1bb3054a5f0e5d815'.
18Error: Process completed with exit code 1.


치명적 오류: 브랜치 'gh-pages'는 커밋 '418383f676334562c079afc1bb3054a5f0e5d815'의 조상이 아닙니다.

• 이게 뭐시여....  branch 가 제대로 설정되지 않았나보다..... 에러가 왜 일어났는지는 기억이 안난다. 역시 에러 정리는 바로바로 해야해.... 

- name: Create 'gh-pages' branch
      run: |
        git checkout --orphan gh-pages
        git rm -rf .
        touch .nojekyll
        git add .nojekyll
        git commit -m "Initialize gh-pages branch"
        git push -u origin gh-pages
        
    - name: Deploy to GitHub Pages
      run: |
        git config --global user.email "User Email"
        git config --global user.name "User Name"
        git checkout -b gh-pages
        git add -f dist
        git commit -m "Deploy Vite App to github pages"
        git push -f origin gh-pages:gh-pages

• branch와 관련된 에러였기에 Deploy 전에 gh-pages가 없다면 branch를 만들도록 설정했다.
• 정상적으로 Deploy가 되는 듯 했으나! 이번엔 새로운 에러가 나타났다.

 

6. 여섯번째 에러

remote: Permission to ---.git denied to github-actions[bot].
96fatal: unable to access '프로젝트 주소': The requested URL returned error: 403
97Error: Process completed with exit code 128.

• 내 프로젝트의 github 주소에서 거부했단다. Github의 Setting들을 확인해봤다.

GIthub의 Settings - Actions - General 에 설정해야하는 옵션.

• 이미지와 같이 설정을 진행해야만 한다고 한다. 처음엔 하단이 클릭 되어있었다.
• 이 부분을 찾는데 꽤 오랜 시간이 걸렸고, 다른 부분들을 수정해버려서.... 지금까지 했던 코드들이 많이 수정되었다.
• 아래 접은글은 여기까지 수정된 코드다. 환경변수 설정 부분이 추가되어있다.

• name: Build and Deploy
  on:
    push:
      branches:
        - main
  jobs:
    build:
      runs-on: ubuntu-latest
      steps:
      - name: Checkout Repository
        uses: actions/checkout@v3
      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18
      - name: Install Dependencies
        run: yarn install
      - name: Build Vite App
        run: yarn build
      - name: Set Environment Variables
        run: |
          echo "VITE_PUBLIC_URL= ~ " >> .env
          echo "VITE_FIREBASE_API_KEY= ~ " >> .env
          echo "VITE_FIREBASE_AUTH_DOMAIN= ~ " >> .env
          echo "VITE_FIREBASE_PROJECT_ID= ~ " >> .env
          echo "VITE_FIREBASE_STORAGE_BUCKET= ~ " >> .env
          echo "VITE_FIREBASE_MESSAGING_SENDER_ID= ~ " >> .env
          echo "VITE_FIREBASE_APP_ID= ~ " >> .env
          echo "VITE_FIREBASE_MEASUREMENT_ID= ~ " >> .env
      - name: Create 'gh-pages' branch
      - name: Deploy to GitHub Pages
        run: |
          git config --global user.email "User Email"
          git config --global user.name "User Name"
          git checkout --orphan gh-pages
          git rm -rf .
          touch .nojekyll
          git add .nojekyll
          git commit -m "Initialize gh-pages branch"
          git push -u origin gh-pages
          git commit -am "Deploy Vite App to GitHub Pages"
          git subtree split --prefix dist -b gh-pages
          git push -f origin gh-pages:gh-pages

 

7. 일곱번째 에러

• 마침내 Deploy까지 성공했다. 이제 Github 에서 배포해준 사이트로 접속했더니!!!

net::ERR_ABORTED 404

• main.tsx 파일을 못 찾겠다고 console 창에 떴다. 왜 못찾지.... 개발자 옵션의 network 탭에 들어가서 확인해보니 잘못된 주소로 GET 요청을 보내고 있었다. 
• 예를 들어, https://taehankim-dev.github.io/DiaryWebService/ 의 주소로 GET 요청을 보내야 하는데 https://taehankim-dev.github.io/ 의 주소로 GET 요청을 보내고 있었다!!! 어디에서 잘못된건지 하나씩 찾아봐야했다....
• 일단은 package.json에 homepage 를 추가해줬다.

// package.json
"homepage": "https://taehankim-dev.github.io/DiaryWebService/"

• vite.config.ts 의 src 주소를 변경해주었다. 기존에는 path.resolve 를 통하여 작성했던 코드를 fileURLToPath로 변경해주었다. 

import { fileURLToPath, URL } from 'node:url';
...
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias : [
      {find : '@', replacement: fileURLToPath(new URL('./src', import.meta.url))},
      ...
    ]
  },
  base: "/DiaryWebService/",
  build: {
    outDir: 'dist',
  }
})

• 이후 BrowserRouter 에 basename 을 추가했다.

<BrowserRouter basename={`/${import.meta.env.VITE_PUBLIC_URL}`}>
  <Routes>
    ...
  </Routes>
</BrowserRouter>

• 이젠 되겠지 하며 열심히 검색한 나에게 칭찬해주며 push를 했지만... 여전히 안된단다.....
• 그럼 문제는 .yml 파일에서 Auto Deploy를 하는 과정에서 문제가 생긴건 아닐까 하며 다시 검색을 했다.
• Vite의 공식문서를 이제서야 찾아왔다... 진작에 찾아올 걸 싶은 생각이 이때 들었다. 
• 공식문서에 있는 내용을 그대로 복사해서 내가 만들었던 deploy에 붙여넣었다. 그리고 환경변수에 대한 내용을 추가했다. 

 

8. 마침내 성공

• 완성된 내 첫 Deploy.yml 파일 코드이다.

# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches:
      - main

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: 'pages'
  cancel-in-progress: true

# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
jobs:
  # Single deploy job since we're just deploying
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}

    runs-on: ubuntu-latest
    
    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Set up Node
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Install dependencies
        run: yarn install

      - name: Set Environment Variables
        run: |
          echo "VITE_PUBLIC_URL = ${{ secrets.VITE_PUBLIC_URL }}" >> .env
          echo "VITE_FIREBASE_API_KEY = ${{ secrets.VITE_FIREBASE_API_KEY }}" >> .env
          echo "VITE_FIREBASE_AUTH_DOMAIN = ${{ secrets.VITE_FIREBASE_AUTH_DOMAIN }}" >> .env
          echo "VITE_FIREBASE_PROJECT_ID = ${{ secrets.VITE_FIREBASE_PROJECT_ID }}" >> .env
          echo "VITE_FIREBASE_STORAGE_BUCKET = ${{ secrets.VITE_FIREBASE_STORAGE_BUCKET }}" >> .env
          echo "VITE_FIREBASE_MESSAGING_SENDER_ID = ${{ secrets.VITE_FIREBASE_MESSAGING_SENDER_ID }}" >> .env
          echo "VITE_FIREBASE_APP_ID = ${{ secrets.VITE_FIREBASE_APP_ID }}" >> .env
          echo "VITE_FIREBASE_MEASUREMENT_ID = ${{ secrets.VITE_FIREBASE_MEASUREMENT_ID }}" >> .env

      - name: Build Vite App
        run: yarn build

      - name: Setup Pages
        uses: actions/configure-pages@v3

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1
        with:
          # Upload dist repository
          path: './dist'

      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v1

• 환경변수 설정을 위해 secrets를 이용했다. secrets는 `Settings - Security - Secrets and variables - Actions` 에서 설정할 수 있다.
• 처음에 검색을 통해서 작성했던 내용과는 완전히 달라졌다. 역시 공식문서 최고!!

 

3. 이 글을 쓰면서 느낀 점.

• 처음 작성해보는 에러 정리라 두서 없이 정리된 거 같다. 나중의 내가 수정하겠지 라는 마인드로 냅둘 것이다. ㅋㅋ
• 이후에 또 어려움을 겪게 된다면 에러 정리라고 하면서 정리해둘 것이다. 그럼 이 때 작성했던 내용을 보면서 이거보단 잘 썼네 라고 생각할 수도?
• Actions secrets 설정부터, Auto Deploy까지 하루에 4시간씩 2~3일? 정도 걸렸던거 같다. 처음에는 github actions에서 성공해서 배포 끝~ 이라고 생각했지만 또 다른 큰 벽이 있을 줄이야... 

 

4. 참고했던 사이트들

1) Vite 공식 문서

• https://vitejs.dev/guide/static-deploy.html

2) 환경변수(.env) 파일 Secrets 로 설정하기

• https://khj0426.tistory.com/239

3) Github 개인 토큰 생성 및 사용 방법

• https://curryyou.tistory.com/344