Skip to content

Commit

Permalink
Merge pull request #123 from CAUCSE/refactor/#118
Browse files Browse the repository at this point in the history 
[REFACTOR] 배포 자동화 구조 개선
  • Loading branch information
@rbgksqkr
rbgksqkr authored Apr 16, 2024
2 parents 2325898 + 759be44 commit f03121f
Show file tree
Hide file tree
Showing 4 changed files with 179 additions and 69 deletions.
63 changes: 63 additions & 0 deletions .github/workflows/front-dev.yml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
name: front-dev

on:
push:
branches:
- develop

jobs:
build:
runs-on: ubuntu-20.04
steps:
- name: Checkout
uses: actions/checkout@v3
with:
ref: develop
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: 18
- name: Cache dependencies
uses: actions/cache@v3
with:
path: ~/.npm
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
- name: Install Dependencies
if: steps.cache.outputs.cache-hit != 'true'
run: npm ci

# aws user 연결
- name: Configure AWS credentials
uses: aws-actions/configure-aws-credentials@v1
with:
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
aws-region: ap-northeast-2

# 환경 변수 파일을 생성.
- name: Generate Environment Variables File for Production
run: |
echo "VITE_DEV_SERVER_URL=$VITE_DEV_SERVER_URL" >> .env
env:
VITE_DEV_SERVER_URL: ${{ secrets.VITE_DEV_SERVER_URL }}

# react 빌드
- name: deploy
run: |
npm run deploy
# react 빌드한 /dist를 s3로 업로드
- name: Upload /dist to S3
env:
BUCKET_NAME: ${{ secrets.AWS_S3_BUCKET_NAME_DEV}}
run: |
aws s3 sync \
./dist s3://$BUCKET_NAME
# 업로드한 s3 파일을 각 CDN 캐시 무효화하여 리프레시 하기
- name: CloudFront Invalidation
env:
CLOUD_FRONT_ID: ${{ secrets.AWS_CLOUDFRONT_DISTRIBUTION_ID_DEV}}
run: |
aws cloudfront create-invalidation \
--distribution-id $CLOUD_FRONT_ID --paths "/*"
63 changes: 63 additions & 0 deletions .github/workflows/front-prod.yml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
name: front-prod

on:
push:
branches:
- main

jobs:
build:
runs-on: ubuntu-20.04
steps:
- name: Checkout
uses: actions/checkout@v3
with:
ref: main
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: 18
- name: Cache dependencies
uses: actions/cache@v3
with:
path: ~/.npm
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
- name: Install Dependencies
if: steps.cache.outputs.cache-hit != 'true'
run: npm ci

# aws user 연결
- name: Configure AWS credentials
uses: aws-actions/configure-aws-credentials@v1
with:
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
aws-region: ap-northeast-2

# 환경 변수 파일을 생성.
- name: Generate Environment Variables File for Production
run: |
echo "VITE_PROD_SERVER_URL=$VITE_PROD_SERVER_URL" >> .env
env:
VITE_PROD_SERVER_URL: ${{ secrets.VITE_PROD_SERVER_URL }}

# react 빌드
- name: deploy
run: |
npm run deploy:prod
# react 빌드한 /dist를 s3로 업로드
- name: Upload /dist to S3
env:
BUCKET_NAME: ${{ secrets.AWS_S3_BUCKET_NAME}}
run: |
aws s3 sync \
./dist s3://$BUCKET_NAME
# 업로드한 s3 파일을 각 CDN 캐시 무효화하여 리프레시 하기
- name: CloudFront Invalidation
env:
CLOUD_FRONT_ID: ${{ secrets.AWS_CLOUDFRONT_DISTRIBUTION_ID}}
run: |
aws cloudfront create-invalidation \
--distribution-id $CLOUD_FRONT_ID --paths "/*"
22 changes: 0 additions & 22 deletions .github/workflows/playwright.yml
View file

This file was deleted.

100 changes: 53 additions & 47 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,52 +1,58 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon-96x96.png" />
<meta name="description" content="중앙대학교 소프트웨어학부 학생회 홈페이지입니다. 공지사항, 학년별 게시판, 동아리 가입, 사물함 신청 등의 기능을 제공하여 소프트웨어 학생들의 불편함을 개선합니다.">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,viewport-fit=cover" />
<meta name="theme-color" content="#000000" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="color-scheme" content="light only"/>
<meta name="supported-color-schemes" content="light"/>
<link rel="stylesheet preload" as="style" href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" />
<link rel="stylesheet preload" as="style" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

<title>CAUSW</title>
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon-96x96.png" />
<meta name="description"
content="중앙대학교 소프트웨어학부 학생회 홈페이지입니다. 공지사항, 학년별 게시판, 동아리 가입, 사물함 신청 등의 기능을 제공하여 소프트웨어 학생들의 불편함을 개선합니다.">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,viewport-fit=cover" />
<meta name="theme-color" content="#000000" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="color-scheme" content="light only" />
<meta name="supported-color-schemes" content="light" />
<link rel="stylesheet preload" as="style"
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" />
<link rel="stylesheet preload" as="style" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

<title>CAUSW</title>

<link rel="apple-touch-icon" sizes="57x57" href="/icon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/icon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/icon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/icon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/icon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/icon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/icon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/icon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/icon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/icon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/icon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/icon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icon/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="mobile-web-app-capable" content="yes" />
<link rel="manifest" href="/manifest.json">
</head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-0MFP0WN799"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-0MFP0WN799');
</script>

<body>
<div id="root"></div>
<div id="external-root"></div>
<script type="module" src="/src/index.tsx"></script>
</body>

<link rel="apple-touch-icon" sizes="57x57" href="/icon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/icon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/icon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/icon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/icon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/icon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/icon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/icon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/icon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/icon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/icon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/icon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icon/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="mobile-web-app-capable" content="yes" />
<link rel="manifest" href="/manifest.json">
</head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-0MFP0WN799"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-0MFP0WN799');
</script>
<body>
<div id="root"></div>
<div id="external-root"></div>
<script type="module" src="/src/index.tsx"></script>
</body>
</html>

0 comments on commit f03121f

Please sign in to comment.