โœ… 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/ย ํด๋” ์ƒ์„ฑ๋จ