[개발-배포-자동화] 1. 개발 : FastAPI + Svelte + MySQL 환경구성

2023. 10. 31. 22:59

FastAPI + svelte + MySQL을 사용해 간단한 메모장 애플리케이션을 만들고

jenkins를 사용해 AWS에 자동배포(CICD) 하려함

컨테이너 구성

python:3.8.16-slim-buster : FastApi

node:16 : svelte

mysql : mysql

# memoApp/docker-compose.yml

version: "3"
services:
  FastApiApp:
    image: python:3.8.16-slim-buster
    ports:
      - "9000:8000"
    volumes:
      - ./Backend:/app/Backend
    stdin_open: true
    tty: true
    depends_on:
      - mysql
  svelteApp:
    image: node:16
    ports:
      - "9173:5173"
    volumes:
      - ./Frontend:/app/Frontend
    stdin_open: true
    tty: true
    depends_on:
      - mysql
  mysql:
    image: mysql:latest
    environment:
      MYSQL_ROOT_PASSWORD: 비밀번호
      MYSQL_DATABASE: memo_db
    ports:
      - "9306:3306"

Frontend - Svelte

개발환경 구성

* Node.js *

프론트엔드 서버가 필요한 이유는

Svelte로 작성한 코드를 브라우저가 인식할 수 있는 형태로 변환하고 실시간으로 테스트하기 위함

이 역할을 Node.js가 함

Node.js는 JavaScript 런타임 환경이다.

프론트엔드 서버 역할을 하며 Svelte코드를 HTML, CSS, JavaScript로 변환하고

이를 브라우저에서 실행할 수 있게 한다.

또한 개발 중에 수정 사항을 즉시 확인할 수 있는 개발 서버 역할도 한다.

* Svelte *

Svelte는 프론트엔드 웹 애플리케이션을 만들기 위한 JavaScrit 프레임워크 또는 라이브러리이다.

Svelte 코드는 컴파일되어 HTML, CSS, JavaScript로 변환된다.

* Vite *

Vite는 개발 환경을 향상시키기 위한 툴이다.

개발 중에 코드 변환 및 개발 서버 역할을 수행한다.

주로 개발 중에 사용되며, 수정사항을 실시간으로 반영하고,

개발 서버를 제공하며, 빠른 빌드를 지원한다.

프론트엔드 개발을 편하게 만들어주는 역할이다.

운영 환경에서는 Svelte 코드를 빌드하여 순수 HTML, CSS, JavaScript로 변환하고

이를 서버(ex_ Node.js) 또는 웹 호스팅 서비스를 통해 호스팅하는 것이 일반적이다.

? Vite를 사용하지 않아도 되지 않을까 ?

그렇다.

Vite를 사용하지 않는 경우에는 Node.js 개발 서버가 Svelte 코드 변환 및 개발 서버 역할을 수행할 것이다.

하지만 Vite를 사용하지 않는다면, 직접 Wepback 또는 Rollup과 같은 번들링 도구와 개발 서버를 설정해야 한다.

이러한 초기 설정은 Vite가 간단화하고 최적화하는 데 도와주기 때문에 사용한다.

# svelteApp 컨테이너 내부

cd /app/Frontend
npm create vite@latest memo -- --template svelte
cd memo
npm install

# 서버 실행
npm run dev

여기서 바로 localhost:9173을하면 접속할 수 없다.

# package.json

"scripts": {
    "dev": "vite --host 0.0.0.0 --port 5173",
    "build": "vite build",
    "preview": "vite preview"
},

script > dev 설정을 위와 같이 바꿔줘야 한다.

'localhost'는 도커 컨테이너 내부에서만 서비스를 사용할 수 있고, 외부에서 접근할 수 없다.

따라서 도커 컨테이너에서 '0.0.0.0'로 서비스를 노출하면 호스트 머신 외부에서도 접근할 수 있다.

"http://localhost:9173" 접속 (9173 -> 5173)

Backend - FastAPI

from fastapi import FastAPI
import os

app = FastAPI()

if __name__ == "__main__":
    os.system('uvicorn app:app --host 0.0.0.0 --port 8000 --reload')

"http://localhost:9000" 접속 (9000 -> 8000)

DataBase - MySQL

container 접속 후

mysql -u root -p > 비밀번호 입력 > show databases; (memo_db 생성되어 있음)

USE memo_db; >

CREATE TABLE memos (id INT AUTO_INCREMENT PRIMARY KEY, content TEXT); >

show tables;

개발 환경 구성 끝!

다음 글에서는 FastAPI ⇄ Svelte와 FastAPI ⇄ MySQL 통신과

Memo App 개발에 대해서 다루자.

'AWS' 카테고리의 다른 글

[개발-배포-자동화] 1. 개발 : Memo App (FastApi, MySQL, Svelte) (0)	2023.11.02

Sso