✅ EC2 + Nginx + React/Vue/Next.js

CloudFront 없이 EC2에서 직접 Nginx를 사용해 프론트엔드를 배포하는 과정입니다.

📌 1. EC2 인스턴스 생성 및 접속

먼저, EC2 인스턴스를 생성하고 접속합니다.

bash
복사편집
ssh -i ~/AWS/tastefulkey.pem ubuntu@<EC2_PUBLIC_IP>

📌 2. Nginx 설치

EC2에서 Nginx를 설치합니다.

sudo apt update
sudo apt install -y nginx

설치 후 Nginx 상태를 확인합니다.

sudo systemctl status nginx

Nginx가 실행 중이어야 합니다.

active (running) 상태인지 확인하세요.

📌 3. React/Vue/Next.js 프로젝트 빌드

로컬에서 프론트엔드 프로젝트를 빌드합니다.

pink@Eunyeong ~ % pwd
/Users/pink
pink@Eunyeong ~ % cd /Users/pink/Backend/tasteful-ai-client
pink@Eunyeong tasteful-ai-client % npm install
npm run build

added 1 package, changed 1 package, and audited 1592 packages in 2s

342 packages are looking for funding
  run `npm fund` for details

10 vulnerabilities (4 moderate, 6 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

> [email protected] build
> react-scripts build

Creating an optimized production build...
Compiled with warnings.

[eslint] 
src/components/ChatBot.js
  Line 11:20:  'setNickname' is assigned a value but never used                                                                                     no-unused-vars
  Line 71:6:   React Hook useEffect has missing dependencies: 'location.search' and 'nickname'. Either include them or remove the dependency array  react-hooks/exhaustive-deps

src/pages/Login.js
  Line 13:9:  'navigate' is assigned a value but never used  no-unused-vars
  Line 14:9:  'location' is assigned a value but never used  no-unused-vars

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

File sizes after gzip:

  125.34 kB  build/static/js/main.f439f8fa.js
  36.65 kB   build/static/css/main.2c70dc4b.css
  1.79 kB    build/static/js/453.5ac60c12.chunk.js

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s build

Find out more about deployment here:

  <https://cra.link/deployment>

pink@Eunyeong tasteful-ai-client % 

React 빌드

npm run build  # 또는 yarn build

build/ 폴더 생성됨