[Azure] Github Actions를 활용한 Azure 배포

5일간의 사투 끝에 Azure에 배포를 마쳤다.

 

SSAFY 1학기 관통 PJT 구성도

 

---

Azure 리소스 목록

Azure 무료 계정에 만들어둔 리소스 목록

 

Azure 리소스 목록 (구체화)

 

---

Github actions를 이용한 자동 배포

 

전통적인 배포 방식

공군 SW 개발부서에서 완성된 프로젝트를 서버에 배포하기 위해서는 번거로운 과정이 많이 따랏다.

가장 어려운건 수없이 많은 보고, 결재 절차

 

- .war 파일 FTP 프로그램으로 옮기기

- WAS 내 JNDI 설정

- standalone.xml 설정 파일 작성

 

알고 나면 엄청 복잡하진 않지만 처음에 숙지해야 할 사항들이 번거롭게 느껴졌다.

---

 

그에 비하면 git push 시 자동으로 이쁘게 배포를 마쳐주는 Github actions 는 너무 신세계였다. (CD)

CI/CD 중 CD(Continuous Deployment) 과정

 

심지어 배포 시 build에 이상이 없는지 검사도 해준다. (CI)

CI/CD 중 CI(Continuous Intergration) 과정

 

아래와 같이 github actions의 동작 과정도 실시간으로 지켜볼 수 있다.

---

workflow 파일

github actions를 이용한 자동 배포 시스템을 구축하기 위해서는 workflow 파일(.yml)을 등록해야 한다.

 

⚙️ workflow-front.yml 파일

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - master
  pull_request:
    types: [opened, synchronize, reopened]
    branches:
      - master

jobs:
  build_and_deploy_job:
    runs-on: ubuntu-latest
    name: Build and Deploy Job

    steps:
      # 1. Checkout the repository
      - name: Checkout repository
        uses: actions/checkout@v3

      # 2. Set up Node.js environment
      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '20.18.1'

      # 3. Generate .env file
      - name: Generate .env file
        working-directory: ./ssafyhome_front
        run: |
          echo "VITE_OPEN_API_SERVICE_KEY=${{ secrets.VITE_OPEN_API_SERVICE_KEY }}" >> .env
          echo "VITE_KAKAO_MAP_SERVICE_KEY=${{ secrets.VITE_KAKAO_MAP_SERVICE_KEY }}" >> .env
          echo "VITE_VUE_API_URL=${{ secrets.VITE_VUE_API_URL }}" >> .env
          echo "VITE_KAKAO_REST_API_KEY=${{ secrets.VITE_KAKAO_REST_API_KEY }}" >> .env
          echo "VITE_KAKAO_REDIRECT_URI=${{ secrets.VITE_KAKAO_REDIRECT_URI }}" >> .env
          echo "VITE_KAKAO_CLIENT_SECRET=${{ secrets.VITE_KAKAO_CLIENT_SECRET }}" >> .env
          echo "VITE_ARTICLE_LIST_SIZE=${{ secrets.VITE_ARTICLE_LIST_SIZE }}" >> .env
          echo "VITE_ARTICLE_NAVIGATION_SIZE=${{ secrets.VITE_ARTICLE_NAVIGATION_SIZE }}" >> .env

      # 4. Install dependencies
      - name: Install dependencies
        working-directory: ./ssafyhome_front
        run: npm ci

      # 5. Build the Vue.js application
      - name: Build Vue.js Application
        working-directory: ./ssafyhome_front
        run: npm run build

      # 6. Deploy to Azure Static Web Apps
      - name: Deploy to Azure Static Web Apps
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_WITTY_MOSS_0E91D2D00 }}
          action: "upload"
          app_location: "./ssafyhome_front"
          output_location: "dist" # 빌드 결과물 경로

 

❗️ 주의사항

개발 완료 후 github에는 민감 정보가 포함된 파일들을 대체로 올려두지 않기 때문에

아래 파일들에 대한 정보가 없어 에러가 발생할 것이다.

주요 민감파일
.env
application.properties

 

그렇기 때문에 깃허브 내에 해당 파일들의 정보를 몰래 저장해두어야 한다.

  - 저장위치 : 프로젝트 Repository - Settings - Secrets and variables - Actions

 

secrets는 아래와 같이 이용된다.

1. secrets에 저장된 값을 불러온다.
2. ".env", "application.properties" 등 원래 있어야 할 파일에 해당 값을 저장한다.

# 1. secrets 하나에 정보 하나 저장하는 방식
echo "VITE_OPEN_API_SERVICE_KEY=${{ secrets.VITE_OPEN_API_SERVICE_KEY }}" >> .env

# VITE_OPEN_API_SERVICE_KEY에 저장된 정보 :
# "aBJDB8969009JDKLNbdkjlDBK9=65DR"


# 2. secrets 하나에 정보 여러줄 저장하는 방식
echo "${{ secrets.APPLICATION_PROPERTIES }}" > src/main/resources/application.properties

# APPLICATION_PROPERTIES에 저장된 정보 :
# server.port=80
# spring.datasource.hikari.driver-class-name=com.mysql.cj.jdbc.Driver
# spring.datasource.hikari.jdbc-url=jdbc:mysql://OOO-rdb.mysql.database.azure.com:3306/home?serverTimezone=UTC&useUnicode=true&characterEncoding=UTF-8
# spring.datasource.hikari.username=DB사용자이름
# spring.datasource.hikari.password=DB사용자패스워드
# ...

---

 

❗️각 리소스 생성 시 겪었던 어려움 정리

1. Static Web App

원래라면 카카오 로그인이 아래 과정대로 진행되어야 한다.

정상적인 카카오 로그인 흐름

 

하지만 Azure Static Web App이 해당 리다이렉트를 가로채버린다.

그리고 아래와 같이 라우팅을 가로채서 404 에러를 내버린다.

Azure가 뺏어가버린 redirectURI

 

그렇기에 우리는 프론트에 새로운 파일을 생성해서 Azure가 특정 경로 요청을 건드리지 못하게 해야한다.

 

⚙️ /Front루트/staticwebapp.config.json

{
  "routes": [
    {
      "route": "/oauth/callback/kakao",
      "rewrite": "/index.html"
    },
    {
      "route": "/home",
      "rewrite": "/index.html"
    },
    {
      "route": "/assets/*",
      "allowedRoles": ["anonymous"]
    },
    {
      "route": "/favicon.ico",
      "allowedRoles": ["anonymous"]
    },
    {
      "route": "/*",
      "rewrite": "/index.html"
    }
  ]
}

 

위 파일을 작성해두었다면 카카오의 리다이렉트 URI는 아래와 같이 흘러간다.

 

1. Kakao측의 redirect "/oauth/callback/kakao"

2. Azure의 라우팅 "/oauth/callback" 폴더에 "kakao.html" 파일이 있나?

2. staticwebapp.config.json 확인결과 해당 요청은 /index.html로 넘기라고 했으므로 넘겨버린다.

3. /index.html까지 넘어왔다면 여긴 Vue의 영역이므로, Vue가 캐치해서 정상적으로 라우팅하기 시작한다.

4. router/index.js에 작성해둔대로 정상적으로 다음 작업을 수행한다.

 

❗️ 주의사항

"route": "/*"

위 설정은 assets 등의 정적 리소스까지 /index.html로 보내버려 사이트가 박살날 수 있다.

그렇기에 "/assets/*" 경로는 반드시 예외로 처리해두어야 한다.

 

---

2. App Service

분명 workflow 파일에서 "application.properties" 파일을 생성하도록 작성해두었는데 해당 파일이 없다고 빌드가 실패했다.

echo "${{ secrets.APPLICATION_PROPERTIES }}" > src/main/resources/application.properties

 

1시간동안 헤매다가 위 작업을 위해서 두 가지 작업이 선행되어야 함을 알았다.

1. 작업 디렉터리 설정
  - 이 작업이 없다면 백엔드 루트 "ssafyhome_back" 에서 작업 수행을 시도해서 오류가 난다.
2. mkdir 명령으로 src/main/resources 폴더 만들어두기
  - 이 작업이 없다면 존재하지 않는 경로에 "application.properties"파일을 생성하려 한다고 오류가 난다.

 

⚙️ 완성된 workflow-back.yml (일부)

  - name: Create resources directory
    working-directory: ./ssafyhome_back/ssafy_home
    run: mkdir -p src/main/resources

  - name: Create application.properties
    working-directory: ./ssafyhome_back/ssafy_home
    run: |
      echo "${{ secrets.APPLICATION_PROPERTIES }}" > src/main/resources/application.properties

---

3. Azure Database for Mysql

❗️ 꼭 강조드리고 싶은 사항

절대 VM 내부에 Mysql 구축해서 사용하지 마세요!!

Mysql 서버 사용 시 과금되는줄 알고 Azure VM을 구축해서

VM 내에 Mysql을 설치하고 DB를 구축하고자 했습니다.

힘들게 DB 구축 완료 후 테스트 해본 결과 DB 쿼리 한 번에 VM이 멈춰버려서 동작을 안했습니다..

반드시 DB는 DB 리소스 만들어서 쓰기

 

 

VM에 DB 넣겠다고 힘든 길 돌아갔던걸 제외하면 DB 리소스 생성이 가장 쉬운 과정이었습니다.

알아보니 리소스 하나만 적당히 사용하면 12개월간 공짜로 사용 가능함..

Azure DB 구축 과정
1. Azure Database for Mysql 리소스 생성
2. Mysql Workbench에서 해당 리소스 연결
3. Migration 메뉴를 통해 로컬 DB -> Azure DB로 데이터 복사

 

---

⭐️ 배포 완료!

https://witty-moss-0e91d2d00.4.azurestaticapps.net/

Vite App