From 80c6f07a27a2b1a1b0104d13512635a89302ac42 Mon Sep 17 00:00:00 2001 From: ljy2855 Date: Sat, 24 Feb 2024 21:47:32 +0900 Subject: [PATCH] feat: Add ga4 tracking env in build --- .github/workflows/deploy.yml | 57 ++++++---- src/App.js | 201 +++++++++++++++++++---------------- 2 files changed, 144 insertions(+), 114 deletions(-) diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 1def54b..c0aa427 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -1,41 +1,56 @@ -# This is a basic workflow to help you get started with Actions - name: Code deploy to local server -# Controls when the workflow will run on: push: branches: ['main'] - - # Allows you to run this workflow manually from the Actions tab workflow_dispatch: -# A workflow run is made up of one or more jobs that can run sequentially or in parallel jobs: - # This workflow contains a single job called "build" build: - # The type of runner that the job will run on runs-on: ubuntu-latest - # Steps represent a sequence of tasks that will be executed as part of the job steps: - # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it - uses: actions/checkout@v3 - - name: Deploy and Run + # Step to install dependencies and build your project + - name: Install and Build + run: | + npm install + npm run build + env: + REACT_APP_GA_TRACKING_ID: ${{ secrets.REACT_APP_GA_TRACKING_ID }} + # Step to clean the target directory on the server + - name: Clean target directory + uses: appleboy/ssh-action@master + with: + host: ${{ secrets.HOST }} + username: ${{ secrets.USERNAME }} + password: ${{ secrets.PASSWORD }} + port: ${{ secrets.PORT }} + script: | + rm -rf ${{ secrets.SERVER_PATH }}/nginx/build + + # Step to copy the build directory to the server + - name: Copy build directory to server + uses: appleboy/scp-action@master + with: + host: ${{ secrets.HOST }} + username: ${{ secrets.USERNAME }} + password: ${{ secrets.PASSWORD }} + port: ${{ secrets.PORT }} + source: './build/' + target: '${{ secrets.SERVER_PATH }}/nginx/' + + # Step to restart the server using SSH + - name: Restart server uses: appleboy/ssh-action@master with: - host: ${{secrets.HOST}} - username: ${{secrets.USERNAME}} - password: ${{secrets.PASSWORD}} - port: ${{secrets.PORT}} + host: ${{ secrets.HOST }} + username: ${{ secrets.USERNAME }} + password: ${{ secrets.PASSWORD }} + port: ${{ secrets.PORT }} script: | - cd ${{secrets.PATH}} - git pull origin main - npm install - npm run build - cp -arpf build/ ${{secrets.SERVER_PATH}}/nginx - cd ${{secrets.SERVER_PATH}} + cd ${{ secrets.SERVER_PATH }} docker-compose down git pull origin master docker-compose up --build -d diff --git a/src/App.js b/src/App.js index b6f9564..3b29232 100644 --- a/src/App.js +++ b/src/App.js @@ -1,117 +1,132 @@ -import React, { useState, useEffect } from "react"; -import "./App.css"; -import { Routes, Route, Navigate, useLocation } from "react-router-dom"; -import { useAsync } from "react-async"; -import "bootstrap/dist/css/bootstrap.min.css"; +import React, { useState, useEffect } from 'react' +import './App.css' +import { Routes, Route, Navigate, useLocation } from 'react-router-dom' +import { useAsync } from 'react-async' +import 'bootstrap/dist/css/bootstrap.min.css' -import { Container, Row, Col } from "react-bootstrap"; +import { Container, Row, Col } from 'react-bootstrap' // layouts -import MainLayout from "./components/Layouts/MainLayout"; -import ApplyBanner from "./components/Layouts/Banner"; -import ScrollToTop from "./components/ScrollToTop"; +import MainLayout from './components/Layouts/MainLayout' +import ApplyBanner from './components/Layouts/Banner' +import ScrollToTop from './components/ScrollToTop' // pages -import Main from "./pages/MainPage/Main"; -import Apply from "./pages/ApplyPage/Apply"; -import Introduce from "./pages/IntroducePage/Introduce"; -import { Login } from "./pages/LoginPage/Login"; -import { ApplyGuide, Mobile_ApplyGuide } from "./pages/ApplyPage/components/Guide/ApplyGuide"; -import NotAllowApply from "pages/NotAllowPage/NotAllowApply"; -import { MiddleResult } from "pages/ResultPage/MiddleResult"; -import { FinalResult } from "pages/ResultPage/FinalResult"; -import NotFound from "pages/NotFound"; +import Main from './pages/MainPage/Main' +import Apply from './pages/ApplyPage/Apply' +import Introduce from './pages/IntroducePage/Introduce' +import { Login } from './pages/LoginPage/Login' +import { + ApplyGuide, + Mobile_ApplyGuide, +} from './pages/ApplyPage/components/Guide/ApplyGuide' +import NotAllowApply from 'pages/NotAllowPage/NotAllowApply' +import { MiddleResult } from 'pages/ResultPage/MiddleResult' +import { FinalResult } from 'pages/ResultPage/FinalResult' +import NotFound from 'pages/NotFound' //mobile pages -import Introduce2 from "./mobile/IntroducePage/Introduce"; -import MiddleResult2 from "./mobile/ResultPage/ResultPage/MiddleResult"; -import FinalResult2 from "./mobile/ResultPage/ResultPage/FinalResult"; +import Introduce2 from './mobile/IntroducePage/Introduce' +import MiddleResult2 from './mobile/ResultPage/ResultPage/MiddleResult' +import FinalResult2 from './mobile/ResultPage/ResultPage/FinalResult' // apis -import { get_recruit_info } from "apis/get_recruit"; +import { get_recruit_info } from 'apis/get_recruit' // hooks -import usePageTracking from "./hooks/ga_tracking"; +import usePageTracking from './hooks/ga_tracking' -import { isBrowser, isMobile } from "react-device-detect"; +import { isBrowser, isMobile } from 'react-device-detect' + +import ReactGA from 'react-ga' + +const gaTrackingId = process.env.REACT_APP_GA_TRACKING_ID +ReactGA.initialize(gaTrackingId) const App = () => { - return ( - - - - ); -}; + usePageTracking() + return ( + + + + ) +} const RenderContent = () => { - if (isBrowser) { - return ( -
- - } errorElement={}> - } /> - } /> - } /> - } /> - } /> - } /> - {/* } /> */} - } /> - - {/* }> */} - } /> - } /> - {/* */} - } /> - - -
- ); - } else if (isMobile) { - return ( - - } errorElement={}> - } /> - } /> - } /> - } /> - } /> - } /> - {/* } /> */} - } /> - - {/* }> */} - } /> - } /> - {/* */} - } /> - - - ); - } -}; + if (isBrowser) { + return ( +
+ + } + errorElement={} + > + } /> + } /> + } /> + } /> + } /> + } /> + {/* } /> */} + } /> + + {/* }> */} + } /> + } /> + {/* */} + } /> + + +
+ ) + } else if (isMobile) { + return ( + + } + errorElement={} + > + } /> + } /> + } /> + } /> + } /> + } /> + {/* } /> */} + } /> + + {/* }> */} + } /> + } /> + {/* */} + } /> + + + ) + } +} // ApplyPage 이동 권한 확인 후 이동 const ApplyCheck = () => { - const { data, error, isLoading } = useAsync({ promiseFn: get_recruit_info }); + const { data, error, isLoading } = useAsync({ promiseFn: get_recruit_info }) - if (isLoading) return "Loading..."; - if (error) return `Something went wrong: ${error.message}`; - if (data) { - if (data.process == "apply") return ; - else return ; - } -}; + if (isLoading) return 'Loading...' + if (error) return `Something went wrong: ${error.message}` + if (data) { + if (data.process == 'apply') return + else return + } +} const LoginCheck = () => { - const { data, error, isLoading } = useAsync({ promiseFn: get_recruit_info }); + const { data, error, isLoading } = useAsync({ promiseFn: get_recruit_info }) - if (isLoading) return "Loading..."; - if (error) return `Something went wrong: ${error.message}`; - if (data) { - if (data.process == "close") return ; - else return ; - } -}; + if (isLoading) return 'Loading...' + if (error) return `Something went wrong: ${error.message}` + if (data) { + if (data.process == 'close') return + else return + } +} -export default App; +export default App