Skip to content

Commit

Permalink
feat: Add ga4 tracking env in build
Browse files Browse the repository at this point in the history
  • Loading branch information
@ljy2855
ljy2855 committed Feb 24, 2024
1 parent ce6285f commit 80c6f07
Show file tree
Hide file tree
Showing 2 changed files with 144 additions and 114 deletions.
57 changes: 36 additions & 21 deletions .github/workflows/deploy.yml
View file
Original file line number Diff line number Diff line change
@@ -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
201 changes: 108 additions & 93 deletions src/App.js
View file
Original file line number Diff line number Diff line change
@@ -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 (
<ScrollToTop>
<RenderContent />
</ScrollToTop>
);
};
usePageTracking()
return (
<ScrollToTop>
<RenderContent />
</ScrollToTop>
)
}

const RenderContent = () => {
if (isBrowser) {
return (
<div className="browserApp">
<Routes>
<Route element={<MainLayout />} errorElement={<NotFound></NotFound>}>
<Route path="*" element={<Navigate to="/error" />} />
<Route path="/" element={<Main />} />
<Route path="/error" element={<NotFound />} />
<Route path="/introduce" element={<Introduce />} />
<Route path="/notallow" element={<NotAllowApply />} />
<Route path="/apply" element={<ApplyCheck />} />
{/* <Route path="/login" element={<LoginCheck />} /> */}
<Route path="/login" element={<Login />} />

{/* <Route element={<ApplyBanner />}> */}
<Route path="/middle" element={<MiddleResult />} />
<Route path="/final" element={<FinalResult />} />
{/* </Route> */}
<Route path="/applyGuide" element={<ApplyGuide />} />
</Route>
</Routes>
</div>
);
} else if (isMobile) {
return (
<Routes>
<Route element={<MainLayout />} errorElement={<NotFound></NotFound>}>
<Route path="*" element={<Navigate to="/error" />} />
<Route path="/" element={<Main />} />
<Route path="/error" element={<NotFound />} />
<Route path="/introduce" element={<Introduce2 />} />
<Route path="/notallow" element={<NotAllowApply />} />
<Route path="/apply" element={<ApplyCheck />} />
{/* <Route path="/login" element={<LoginCheck />} /> */}
<Route path="/login" element={<Login />} />

{/* <Route element={<ApplyBanner />}> */}
<Route path="/middle" element={<MiddleResult2 />} />
<Route path="/final" element={<FinalResult2 />} />
{/* </Route> */}
<Route path="/applyGuide" element={<Mobile_ApplyGuide />} />
</Route>
</Routes>
);
}
};
if (isBrowser) {
return (
<div className="browserApp">
<Routes>
<Route
element={<MainLayout />}
errorElement={<NotFound></NotFound>}
>
<Route path="*" element={<Navigate to="/error" />} />
<Route path="/" element={<Main />} />
<Route path="/error" element={<NotFound />} />
<Route path="/introduce" element={<Introduce />} />
<Route path="/notallow" element={<NotAllowApply />} />
<Route path="/apply" element={<ApplyCheck />} />
{/* <Route path="/login" element={<LoginCheck />} /> */}
<Route path="/login" element={<Login />} />

{/* <Route element={<ApplyBanner />}> */}
<Route path="/middle" element={<MiddleResult />} />
<Route path="/final" element={<FinalResult />} />
{/* </Route> */}
<Route path="/applyGuide" element={<ApplyGuide />} />
</Route>
</Routes>
</div>
)
} else if (isMobile) {
return (
<Routes>
<Route
element={<MainLayout />}
errorElement={<NotFound></NotFound>}
>
<Route path="*" element={<Navigate to="/error" />} />
<Route path="/" element={<Main />} />
<Route path="/error" element={<NotFound />} />
<Route path="/introduce" element={<Introduce2 />} />
<Route path="/notallow" element={<NotAllowApply />} />
<Route path="/apply" element={<ApplyCheck />} />
{/* <Route path="/login" element={<LoginCheck />} /> */}
<Route path="/login" element={<Login />} />

{/* <Route element={<ApplyBanner />}> */}
<Route path="/middle" element={<MiddleResult2 />} />
<Route path="/final" element={<FinalResult2 />} />
{/* </Route> */}
<Route path="/applyGuide" element={<Mobile_ApplyGuide />} />
</Route>
</Routes>
)
}
}

// 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 <Apply />;
else return <Navigate to="/error" />;
}
};
if (isLoading) return 'Loading...'
if (error) return `Something went wrong: ${error.message}`
if (data) {
if (data.process == 'apply') return <Apply />
else return <Navigate to="/error" />
}
}

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 <NotAllowApply />;
else return <Login />;
}
};
if (isLoading) return 'Loading...'
if (error) return `Something went wrong: ${error.message}`
if (data) {
if (data.process == 'close') return <NotAllowApply />
else return <Login />
}
}

export default App;
export default App

0 comments on commit 80c6f07

Please sign in to comment.