feat: S3, �CloudFront 배포 이전 (#21)

* refactor: api 경로 수정 * chore: 운영 배포 스크립트 작성 * fix: 실행 스크립트 수정 * feat: api url 수정 * chore: pr -> push 로 수정
fun-eat · Feb 23, 2024 · 6818952 · 6818952
1 parent 9f98fa8
commit 6818952
Show file tree

Hide file tree

Showing 9 changed files with 98 additions and 35 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,59 @@
+name: Admin Deploy
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+
+    permissions:
+      checks: write
+      pull-requests: write
+
+    steps:
+      - name: Repository 체크아웃
+        uses: actions/checkout@v3
+
+      - name: Node 설정
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18.16.1'
+
+      - name: node_modules 캐싱
+        id: cache
+        uses: actions/cache@v3
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: 의존성 설치
+        if: steps.cache.outputs.cache-hit != 'true'
+        run: yarn install --pure-lockfile
+
+      - name: .env 파일 생성
+        run: |
+          echo "VITE_API_BASE_URL=${{ secrets.API_BASE_URL }}" > .env
+
+      - name: 클라이언트 빌드
+        run: yarn build
+
+      - name: AWS CLI 설정
+        uses: aws-actions/configure-aws-credentials@v1
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: ap-northeast-2
+
+      - name: S3 이전 파일 삭제
+        run: |
+          aws s3 rm ${{ secrets.AWS_S3_URL }} --recursive
+
+      - name: S3에 배포
+        run: |
+          aws s3 sync ./dist ${{ secrets.AWS_S3_URL }}
diff --git a/package.json b/package.json
@@ -5,9 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "setup:netlify": "echo '/* /index.html 200' | cat > dist/_redirects",
-    "build:dev": "tsc && vite build --mode development && yarn setup:netlify",
-    "build:prod": "tsc && vite build --mode production && yarn setup:netlify",
+    "build": "tsc && vite build --mode production",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },

diff --git a/src/apis/category.ts b/src/apis/category.ts
@@ -1,4 +1,4 @@
-import { API_BASE_URL } from '../constants';
+import { API_BASE_URL, API_ENDPOINT } from './constants';
 import { fetchApi } from './fetchApi';
 
 export interface CategoryResponse {
@@ -8,7 +8,7 @@ export interface CategoryResponse {
 }
 
 export const getProductCategories = async () => {
-  const response = await fetchApi(`${API_BASE_URL}/categories`, {
+  const response = await fetchApi(`${API_BASE_URL}${API_ENDPOINT.CATEGORY}`, {
     method: 'GET',
   });
   const data: CategoryResponse[] = await response.json();

diff --git a/src/apis/constants.ts b/src/apis/constants.ts
@@ -0,0 +1,9 @@
+export const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
+
+export const API_ENDPOINT = {
+  PRODUCT: '/products',
+  REVIEW: '/reviews',
+  CATEGORY: '/categories',
+  LOGIN: '/login',
+  LOGGED_CHECK: '/logged-check',
+};
diff --git a/src/apis/login.ts b/src/apis/login.ts
@@ -1,22 +1,24 @@
+import { API_BASE_URL, API_ENDPOINT } from './constants';
 import { fetchApi } from './fetchApi';
 
-import { API_BASE_URL } from '../constants';
-
 export interface LoginRequestBody {
   id: string;
   key: string;
 }
 
 export const getLogin = async () => {
-  const response = await fetchApi(`${API_BASE_URL}/logged-check`, {
-    method: 'GET',
-  });
+  const response = await fetchApi(
+    `${API_BASE_URL}${API_ENDPOINT.LOGGED_CHECK}`,
+    {
+      method: 'GET',
+    }
+  );
   const data: true = await response.json();
   return data;
 };
 
 export const postLogin = (body: LoginRequestBody) => {
-  return fetchApi(`${API_BASE_URL}/login`, {
+  return fetchApi(`${API_BASE_URL}${API_ENDPOINT.LOGIN}`, {
     method: 'POST',
     body: JSON.stringify(body),
     headers: {

diff --git a/src/apis/product.ts b/src/apis/product.ts
@@ -1,6 +1,6 @@
-import { API_BASE_URL } from '../constants';
 import { convertToQueryString } from '../utils';
 import { CategoryResponse } from './category';
+import { API_BASE_URL, API_ENDPOINT } from './constants';
 import { fetchApi } from './fetchApi';
 import { RequestQuery, ResponseData } from './type';
 
@@ -58,15 +58,18 @@ export const getProducts = async ({
     .filter((query) => query.length > 0)
     .join('&')}`;
 
-  const response = await fetchApi(`${API_BASE_URL}/products${query}`, {
-    method: 'GET',
-  });
+  const response = await fetchApi(
+    `${API_BASE_URL}${API_ENDPOINT.PRODUCT}${query}`,
+    {
+      method: 'GET',
+    }
+  );
   const data: ProductResponse = await response.json();
   return data;
 };
 
 export const postProduct = (product: ProductAddRequestBody) => {
-  return fetchApi(`${API_BASE_URL}/products`, {
+  return fetchApi(`${API_BASE_URL}${API_ENDPOINT.PRODUCT}`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify(product),
@@ -77,7 +80,7 @@ export const putProduct = (
   productId: number,
   productInfo: ProductAddRequestBody
 ) => {
-  return fetchApi(`${API_BASE_URL}/products/${productId}`, {
+  return fetchApi(`${API_BASE_URL}${API_ENDPOINT.PRODUCT}/${productId}`, {
     method: 'PUT',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify(productInfo),

diff --git a/src/apis/review.ts b/src/apis/review.ts
@@ -1,5 +1,5 @@
-import { API_BASE_URL } from '../constants';
 import { convertToQueryString } from '../utils';
+import { API_BASE_URL, API_ENDPOINT } from './constants';
 import { fetchApi } from './fetchApi';
 import { RequestQuery, ResponseData } from './type';
 
@@ -55,15 +55,18 @@ export const getReviews = async ({
     .filter((query) => query.length > 0)
     .join('&')}`;
 
-  const response = await fetchApi(`${API_BASE_URL}/reviews${query}`, {
-    method: 'GET',
-  });
+  const response = await fetchApi(
+    `${API_BASE_URL}${API_ENDPOINT.REVIEW}${query}`,
+    {
+      method: 'GET',
+    }
+  );
   const data: ReviewResponse = await response.json();
   return data;
 };
 
 export const deleteReview = (reviewId: number) => {
-  return fetchApi(`${API_BASE_URL}/reviews/${reviewId}`, {
+  return fetchApi(`${API_BASE_URL}${API_ENDPOINT.REVIEW}/${reviewId}`, {
     method: 'DELETE',
   });
 };
diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -1,5 +1,3 @@
-export const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
-
 export const ROUTE = {
   HOME: '/',
   PRODUCT: '/products',

diff --git a/vite.config.ts b/vite.config.ts
@@ -1,19 +1,10 @@
-import { defineConfig, loadEnv } from 'vite';
+import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
 
 // https://vitejs.dev/config/
-export default defineConfig(({ mode }) => {
-  const env = loadEnv(mode, process.cwd(), '');
+export default defineConfig(() => {
   return {
     plugins: [react(), vanillaExtractPlugin()],
-    server: {
-      proxy: {
-        '/api': {
-          target: env.VITE_API_URL,
-          changeOrigin: true,
-        },
-      },
-    },
   };
 });