Merge pull request #108 from 100-hours-a-week/feature/deploy

Feature/deploy
100-hours-a-week · Sep 16, 2024 · 7b6533e · 7b6533e
2 parents 1b6be5d + 787a1ce
commit 7b6533e
Show file tree

Hide file tree

Showing 10 changed files with 87 additions and 9 deletions.
diff --git a/.github/workflows/deploy-dev.yaml b/.github/workflows/deploy-dev.yaml
@@ -0,0 +1,71 @@
+name: CI/CD React Build with npm caching, deploy to AWS S3
+
+on:
+  push:
+    branches:
+      - dev
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: 코드 체크아웃
+        uses: actions/checkout@v3
+
+      - name: npm 캐시 설정
+        uses: actions/[email protected]
+        id: npm-cache
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('travelday-fe/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: npm 캐시 확인
+        if: steps.npm-cache.outputs.cache-hit == 'true'
+        run: echo 'npm cache hit!'
+        working-directory: travelday-fe
+
+      - name: npm 캐시 미스
+        if: steps.npm-cache.outputs.cache-hit != 'true'
+        run: echo 'npm cache missed!'
+        working-directory: travelday-fe
+
+      - name: 의존성 설치 및 빌드
+        run: |
+          npm ci
+          CI=false npm run build
+        working-directory: travelday-fe
+        env:
+          REACT_APP_GOOGLE_MAP_KEY: ${{ secrets.REACT_APP_GOOGLE_MAP_KEY }}
+          REACT_APP_FIREBASE_KEY: ${{secrets.REACT_APP_FIREBASE_KEY}}
+          REACT_APP_FIREBASE_AUTH_DOMAIN: ${{secrets.REACT_APP_FIREBASE_AUTH_DOMAIN}}
+          REACT_APP_FIREBASE_PROJECT_ID: ${{secrets.REACT_APP_FIREBASE_PROJECT_ID}}
+          REACT_APP_FIREBASE_STORAGEBUCKET: ${{secrets.REACT_APP_FIREBASE_STORAGEBUCKET}}
+          REACT_APP_FIREBASE_MESSAGING_SENDER: ${{secrets.REACT_APP_FIREBASE_MESSAGING_SENDER}}
+          REACT_APP_FIREBASE_APPID: ${{secrets.REACT_APP_FIREBASE_APPID}}
+          REACT_APP_GENERATED_SERVER_URL : ${{secrets.REACT_APP_DEV_BACK_SERVER_URL}}
+
+
+      - name: AWS IAM 사용자 설정
+        uses: aws-actions/configure-aws-credentials@v2
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: ${{ secrets.AWS_REGION }}
+
+      - name: 빌드한 파일 S3에 업로드
+        run: aws s3 sync build/ s3://${{ secrets.S3_DEV_BUCKET_NAME }} --acl public-read
+        working-directory: travelday-fe
+        env:
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+
+      - name: CloudFront 캐시 무력화 설정
+        uses: chetan/invalidate-cloudfront-action@v2
+        env:
+          DISTRIBUTION: ${{ secrets.AWS_DEV_CLOUDFRONT_ID }}
+          PATHS: "/index.html"
+          AWS_REGION: ${{ secrets.AWS_REGION }}
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml
@@ -44,6 +44,8 @@ jobs:
           REACT_APP_FIREBASE_STORAGEBUCKET: ${{secrets.REACT_APP_FIREBASE_STORAGEBUCKET}}
           REACT_APP_FIREBASE_MESSAGING_SENDER: ${{secrets.REACT_APP_FIREBASE_MESSAGING_SENDER}}
           REACT_APP_FIREBASE_APPID: ${{secrets.REACT_APP_FIREBASE_APPID}}
+          REACT_APP_GENERATED_SERVER_URL : ${{secrets.REACT_APP_PROD_BACK_SERVER_URL}}
+
 
 
       - name: AWS IAM 사용자 설정

diff --git a/travelday-fe/src/components/mainPage/newFlightList.js b/travelday-fe/src/components/mainPage/newFlightList.js
@@ -9,6 +9,7 @@ import Image3 from '../../images/main/list1/DPS.png';
 import Image4 from '../../images/main/list1/NRT.png';
 import Image5 from '../../images/main/list1/CNX.png';
 import Image6 from '../../images/main/list1/TPE.png';
+import axiosInstance from "../../utils/axiosInstance";
 
 const IATACodeToCity = {
   'PQC': '푸꾸옥',
@@ -51,7 +52,7 @@ const NewFlightList = () => {
   useEffect(() => {
     const fetchFlights = async () => {
       try {
-        const response = await axios.get('https://api.thetravelday.co.kr/api/flights/lowestPrice/list');
+        const response = await axiosInstance.get('/api/flights/lowestPrice/list');
         if (response.status === 200) {
           const imageMap = {
             'PQC': Image1,

diff --git a/travelday-fe/src/components/mapPage/mapSearchResultsPopup.js b/travelday-fe/src/components/mapPage/mapSearchResultsPopup.js
@@ -34,7 +34,7 @@ const MapSearchResultsPopup = ({ isOpen, onClose, searchResults = [], onResultCl
     const token = localStorage.getItem('accessToken');
     try {
       const response = await axiosInstance.post(
-        `https://api.thetravelday.co.kr/api/rooms/${travelRoomId}/plan/direct`,
+        `/api/rooms/${travelRoomId}/plan/direct`,
         {
           name: selectedResult.name,
           latitude: selectedResult.geometry.location.lat(),

diff --git a/travelday-fe/src/components/wishListPage/wishListModal.js b/travelday-fe/src/components/wishListPage/wishListModal.js
@@ -43,7 +43,7 @@ const WishListModal = ({ onClose, selectedPlace, travelRoomId }) => {
 
     try {
       const response = await axiosInstance.post(
-        `https://api.thetravelday.co.kr/api/rooms/${travelRoomId}/wishlist`,
+        `/api/rooms/${travelRoomId}/wishlist`,
         {
           latitude: selectedPlace.latitude,
           longitude: selectedPlace.longitude,

diff --git a/travelday-fe/src/firebase.js b/travelday-fe/src/firebase.js
@@ -38,9 +38,10 @@ export const requestForToken = (setTokenFound) => {
     });
 };
 
+const baseURL = process.env.REACT_APP_GENERATED_SERVER_URL;
 const sendTokenToServer = (token) => {
   // 서버로 토큰 전송
-  fetch("https://api.thetravelday.co.kr/api/fcm", {
+  fetch(baseURL + "api/fcm", {
     method: "POST",
     headers: {
       "Content-Type": "application/json",

diff --git a/travelday-fe/src/pages/chatPage/Keep.js b/travelday-fe/src/pages/chatPage/Keep.js
@@ -105,7 +105,7 @@ const ChatPage = ({ travelRoomId, nickname }) => {
   useEffect(() => {
     const fetchChatHistory = async () => {
       try {
-        const response = await axiosInstance.get(`https://api.thetravelday.co.kr/api/rooms/${travelRoomId}/chats`, {
+        const response = await axiosInstance.get(`/api/rooms/${travelRoomId}/chats`, {
           headers: {
             Authorization: `Bearer ${token}`,
             'Content-Type': 'application/json',

diff --git a/travelday-fe/src/pages/mainPage/mainDetailPage.jsx b/travelday-fe/src/pages/mainPage/mainDetailPage.jsx
@@ -10,6 +10,7 @@ import TakeoffIcon from '../../images/filter/takeoff.png';
 import PriceIcon from '../../images/filter/price.png';
 import ScheduleIcon from '../../images/footer/schedule.png';
 import PplIcon from '../../images/main/detail/ppl.png';
+import axiosInstance from "../../utils/axiosInstance";
 
 const airportNames = {
   PQC: '푸꾸옥 국제공항',
@@ -145,7 +146,7 @@ const MainDetailPage = () => {
   const [flight, setFlight] = useState(null);
 
   useEffect(() => {
-    axios.get(`https://api.thetravelday.co.kr/api/flights/lowestPrice/list`)
+    axiosInstance.get(`/api/flights/lowestPrice/list`)
       .then(response => {
         const filteredFlight = response.data.data.find(flight => {
           const destinationCode = flight.itineraries[0]?.segments[flight.itineraries[0].segments.length - 1]?.arrival.iataCode;

diff --git a/travelday-fe/src/pages/userPage/loginPage.jsx b/travelday-fe/src/pages/userPage/loginPage.jsx
@@ -9,7 +9,8 @@ import LogoImage from '../../images/logo/logo12.png'; // 로고 이미지 임포
 const LoginPage = () => {
 
     // OAuth 요청 URL
-    const kakaoURL = `https://api.thetravelday.co.kr/oauth2/authorization/kakao`;
+    const baseURL = process.env.REACT_APP_GENERATED_SERVER_URL;
+    const kakaoURL = `${baseURL}oauth2/authorization/kakao`;
 
     const handleLogin = () => {
         window.location.href = kakaoURL;

diff --git a/travelday-fe/src/utils/axiosInstance.js b/travelday-fe/src/utils/axiosInstance.js
@@ -14,8 +14,9 @@ function handleSessionExpiration() {
 }
 
 // Axios 인스턴스 생성
+const baseURL = process.env.REACT_APP_GENERATED_SERVER_URL;
 const axiosInstance = axios.create({
-  baseURL: 'https://api.thetravelday.co.kr', // 백엔드 API의 기본 URL
+  baseURL, // 백엔드 API의 기본 URL
   withCredentials: true, // 쿠키를 포함한 CORS 요청을 위해 true로 설정
 });
 
@@ -45,7 +46,7 @@ axiosInstance.interceptors.response.use(
 
         try {
           const response = await axios.post('/api/user/refresh', null, {
-            baseURL: 'https://api.thetravelday.co.kr',
+            baseURL,
             headers: {
               'Content-Type': 'application/json',
             },