[TEAM-25] Airbnb 3주차 2번째 PR Nick + Benny

.github/workflows/deploy-prod-fe.yml

@@ -0,0 +1,70 @@
+name: 프론트 운영 CD
+
+on:
+  push:
+    branches: [deploy-fe]
+
+jobs:
+  buildAndDeploy:
+    name: 프론트 운영 CD
+    runs-on: ubuntu-18.04
+    defaults:
+      run:
+        shell: bash
+    env:
+      zip-name: airbnb-fe.zip
+      working-directory: ./FE
+      node-version: 16.13.1
+
+    steps:
+      - name: 체크아웃 Github-Action
+        uses: actions/checkout@v3
+      - name: Use Node.js ${{ env.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ env.node-version }}
+      - run: npm ci
+        working-directory: ${{ env.working-directory }}
+
+      - run: npm run build --if-present
+        working-directory: ${{ env.working-directory }}
+
+      - name: Docker Buildx 준비
+        uses: docker/setup-buildx-action@v1
+
+      - name: Github Container Registry 에 로그인
+        uses: docker/login-action@v1
+        with: 
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GHCR_ACCESS_KEY }}
+# working-directory: ${{ env.working-directory }}
+      - name: 이미지 빌드 및 푸시
+        uses: docker/build-push-action@v2
+        with:
+          context: ${{ env.working-directory }}
+          file: ${{ env.working-directory }}/Dockerfile
+          push: true
+          tags: 
+            ghcr.io/${{ github.repository_owner }}/airbnb-fe:latest
+
+      - name: airbnb-deploy.zip 생성
+        run: zip -r ./${{ env.zip-name }} ./scripts ./appspec.yml
+        working-directory: ${{ env.working-directory }}
+
+      - name: AWS Credential 설정
+        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: AWS S3 로 업로드
+        run: aws s3 cp --region ap-northeast-2 ./${{ env.zip-name }} s3://airbnb-s3-bucket-deploy/${{ env.zip-name }}
+        working-directory: ${{ env.working-directory }}
+
+      - name: AWS CodeDeploy 배포 실행
+        run: aws deploy create-deployment 
+          --application-name airbnb-deploy
+          --deployment-group airbnb-fe-dg
+          --s3-location bucket=airbnb-s3-bucket-deploy,key=${{ env.zip-name }},bundleType=zip

FE/.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.env

FE/Dockerfile

@@ -0,0 +1,14 @@
+FROM node:16.13.1
+
+# 소스 이동
+COPY . /app
+WORKDIR /app
+
+# npm install 설정
+RUN \
+    npm install -g serve
+
+# 3000 포트 허용
+EXPOSE 3000
+
+CMD ["serve", "-s", "build"]

FE/appspec.yml

@@ -0,0 +1,20 @@
+version: 0.0
+os: linux
+files:
+  - source: /
+    destination: /home/ec2-user/app-fe
+    overwrite: yes
+
+permissions:
+  - object: /
+    pattern: "**"
+    owner: ec2-user
+    group: ec2-user
+
+hooks:
+  AfterInstall:
+
+  ApplicationStart:
+    - location: scripts/deploy.sh
+      timeout: 300
+      runas: root

FE/package.json

@@ -9,15 +9,6 @@
     "@mui/material": "^5.8.1",
     "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest",
     "@mui/styled-engine-sc": "^5.8.0",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.2.0",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.5.1",
-    "@types/node": "^16.11.36",
-    "@types/react": "^18.0.9",
-    "@types/react-dom": "^18.0.5",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "styled-components": "^5.3.5",
@@ -50,6 +41,15 @@
     ]
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.2.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.1",
+    "@types/node": "^16.11.36",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.5",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "@types/styled-components": "^5.1.25",
     "@typescript-eslint/eslint-plugin": "^5.26.0",
     "@typescript-eslint/parser": "^5.26.0",
@@ -65,4 +65,4 @@
   "resolutions": {
     "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
   }
-}
+}

FE/public/index.html

@@ -15,11 +15,15 @@
       type="image/x-icon"
       href="https://a0.muscache.com/airbnb/static/logotype_favicon-21cc8e6c6a2cca43f061d2dcabdf6e58.ico"
     />
+    <script
+      type="text/javascript"
+      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%REACT_APP_KAKAO_MAP_KEY%&libraries=services"
+    ></script>
     <title>에어비앤비</title>
   </head>
 
   <body>
     <div id="root"></div>
     <div id="modal"></div>
   </body>
-</html>
+</html>

FE/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

FE/scripts/deploy.sh

@@ -0,0 +1,15 @@
+#!/bin/bash
+
+CONTAINER_NAME="airbnb-fe"
+IMAGE_NAME="ghcr.io/jinan159/airbnb-fe:latest"
+
+# remove prev image
+sudo docker stop $CONTAINER_NAME
+sudo docker rm $CONTAINER_NAME
+sudo docker image rm $IMAGE_NAME
+
+# pull latest image
+sudo docker pull $IMAGE_NAME
+
+# start container
+sudo docker run -p 3000:3000 -d -it --name $CONTAINER_NAME $IMAGE_NAME

FE/src/App.css

@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

FE/src/App.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

FE/src/App.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Routes, Route } from 'react-router-dom';
-
 import { Hero } from 'components/Hero';
 import { Home } from 'pages/Home';
 import { Rooms } from 'pages/Rooms';

FE/src/common/global.ts

@@ -16,6 +16,19 @@ const GlobalStyle = createGlobalStyle`
     top: 0;
     left: 0;
   }
+
+  input[type=range] {
+    -webkit-appearance: none;
+    background-color: transparent;
+  }
+
+  input[type=range]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+
+  a {
+    text-decoration: none;
+    color: #010101;
+  }
 `;
 
 export default GlobalStyle;

FE/src/common/styled.d.ts

@@ -8,7 +8,8 @@ declare module 'styled-components' {
       md: '1.6rem';
       lg: '1.8rem';
       xl: '2rem';
-      xxl: '3.2rem';
+      xxl: '2.4rem';
+      xxxl: '3.2rem';
     };
 
     fontWeights: {
@@ -23,6 +24,7 @@ declare module 'styled-components' {
       base: '2.3rem';
       tall: '2.6rem';
       taller: '2.9rem';
+      long: '3.5rem';
       logo: '4.6rem';
     };