[AWS] 웹 호스팅을 위한 프론트엔드와 백엔드 분리 개발 방법

AWS에서 웹 호스팅을 위한 프론트엔드와 백엔드 분리 개발 방법 🌐

안녕하세요! 오늘은 AWS에서 웹 호스팅을 할 때 프론트엔드와 백엔드를 분리하여 개발하는 방법에 대해 알아보려고 합니다. 😄

 

1. 프론트엔드와 백엔드 분리 🖥️

보통의 개발 흐름은 다음과 같습니다:

프론트엔드

• React, Angular, Vue.js 같은 자바스크립트 프레임워크를 사용합니다.

백엔드

• Spring Boot와 같은 서버 사이드 프레임워크를 사용합니다.

이렇게 분리하면 더 유연하고 확장 가능한 애플리케이션을 만들 수 있습니다. 💪

 

2. API 서버로 백엔드 구축 🚀

Spring Boot를 사용하여 RESTful API를 구축합니다. 데이터를 JSON 형식으로 주고받기 때문에, 타임리프와 같은 서버 사이드 템플릿 엔진을 사용할 필요가 없습니다.

@RestController
@RequestMapping("/api")
public class ApiController {

    @GetMapping("/data")
    public ResponseEntity<MyDTO> getData() {
        MyDTO myDTO = new MyDTO();
        // 데이터 처리 로직
        return ResponseEntity.ok(myDTO);
    }
}

 

3. 프론트엔드와 백엔드 배포 🌍

프론트엔드

• 빌드된 정적 파일을 S3 버킷에 업로드합니다.
• CloudFront를 사용하여 CDN 설정을 합니다.

백엔드

• EC2 인스턴스에 Spring Boot 애플리케이션을 배포합니다.
• 또는 Elastic Beanstalk, ECS, Lambda를 사용하여 더 유연한 배포를 합니다.

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const MyComponent = () => {
    const [data, setData] = useState(null);

    useEffect(() => {
        axios.get('/api/data')
            .then(response => {
                setData(response.data);
            })
            .catch(error => {
                console.error('There was an error!', error);
            });
    }, []);

    return (
        <div>
            {data ? <div>{data.someField}</div> : <div>Loading...</div>}
        </div>
    );
};

export default MyComponent;

 

4. 도메인 이름 설정 및 API 호출 🌐

Route 53을 사용하여 도메인 이름을 설정하고, CloudFront와 같은 CDN을 사용하여 콘텐츠를 배포합니다. 프론트엔드에서 API 호출 시 절대 경로를 사용하지 않고, 상대 경로 또는 환경 변수를 사용합니다.

이렇게 프론트엔드와 백엔드를 분리하면 개발과 배포가 더 용이해지고, AWS의 다양한 서비스와 기능을 최대한 활용할 수 있습니다. 타임리프 같은 서버 사이드 렌더링을 사용하지 않아도 되기 때문에, 경로 문제나 다른 호환성 문제를 피할 수 있습니다. 😊