Frontend

프로젝트 목표

실제 회사처럼 프론트, api서버, auth서버 3가지팀이 개별적으로 존재한다고 (local/dev/staging/production) 각 개별 환경별 배포 자동화를 마치고 dev환경에서는 각 개발자들의 코드를 모아 테스트 할 수 있는 환경을 제공하고, Frontend에서는 빠른 정적 웹호스팅이 요구되어 캐시처리를 해줄 Cloudfront, AWS 내 제공해주는 CI/CD 툴인 Codedeploy, S3를 활용하여 하나의 git repository 내 코드 통합 시 소스코드의 단일공급원으로의 역할을 하게 만드는 것이 목표입니다.

시스템 아키텍쳐

Staging / Production

Development

배포 파이프라인

getting started

개별테스트를 위한 사전 설치 mac, ubuntu 적어줄것

기능설명

• 파이프라인을 통해 branch를 구분하여 dev환경에서 프론트환경과 main(staging/production)에서 프론트환경을 구분하여 dev.도메인, staging.도메인으로 분리하여 관리가 가능하게끔 했음
• 배포파이프라인에 클라우드워치 알림을 추가하여 slack에서 배포가 잘되었는지 확인 가능함

terraform iac(front)

codepipeline, iam, s3

API Reference

• dev : https://dev.devops-altf4.click/
• staging : https://staging.devops-altf4.click/
• Production : https://www.devops-altf4.click/
• swagger : https://app.swaggerhub.com/apis/DevOps-Altf4/Project4-altf4/1.0.0

out put

dev

staging/production

Start

npm run start

기술 스택

AWS Code pipeline, github-cli, git actions, Network, Terraform

code

# Frontend/src/components/pages/Products.js 
import axios from 'axios'
axios.defaults.withCredentials = true;

export default function Products() {
  const [state, setState] = useState()
  useEffect(() => {
    axios.get('https://eks.devops-altf4.click/auth')
  .then(function (response) {
    console.log(response.data, state);
    setState(response.data)
  })
      
    return () => {
      
    };
  }, []);

axios를 이용해 auth 서버의 url 값을 들고 온다음 h1에 state 값을 보여주는 코드입니다.

#Frontend/src/components/pages/SignUp.js 

import React from 'react';
import '../../App.css';
import { useState, useEffect } from 'react'

export default function SignUp() {
  const [msg, setMsg] = useState('서버 연결 중')

  useEffect(() => {
    fetch(process.env.REACT_APP_API_SERVER_ENDPOINT)
    .then(resp => resp.json())
    .then(json => setMsg(json))
    .catch(() => setMsg('연결 안됨'))
  }, [])

  return <h1 className='sign-up'>{JSON.stringify(msg)}</h1>;
}

RDS와 api서버가 연결되있는 url을 useState, useEffect를 통해 나타냅니다.