From f16c25af94915f97dd98d1c02c14f08d032bd7e1 Mon Sep 17 00:00:00 2001 From: Soyeon Choe Date: Mon, 29 Jul 2024 01:02:32 +0900 Subject: [PATCH] =?UTF-8?q?docs:=20Deploy=20Your=20Frontend=20Code=20on=20?= =?UTF-8?q?AWS=20EC2=20Using=20Nginx=20=EB=B2=88=EC=97=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...ur-Frontend-Code-on-AWS-EC2-Using-Nginx.md | 207 ++++++++++++++++++ 1 file changed, 207 insertions(+) create mode 100644 July/article/Deploy-Your-Frontend-Code-on-AWS-EC2-Using-Nginx.md diff --git a/July/article/Deploy-Your-Frontend-Code-on-AWS-EC2-Using-Nginx.md b/July/article/Deploy-Your-Frontend-Code-on-AWS-EC2-Using-Nginx.md new file mode 100644 index 0000000..8fd3644 --- /dev/null +++ b/July/article/Deploy-Your-Frontend-Code-on-AWS-EC2-Using-Nginx.md @@ -0,0 +1,207 @@ +## πŸ”— [Frontend μ½”λ“œλ₯Ό AWS EC2의 Nginx을 μ‚¬μš©ν•˜μ—¬ λ°°ν¬ν•˜λŠ” 방법](https://medium.com/@jpan0831/deploy-your-frontend-code-on-aws-ec2-using-nginx-98bdb96ccbe4) + +### πŸ—“οΈ λ²ˆμ—­ λ‚ μ§œ: 2024.07.28 + +### 🧚 λ²ˆμ—­ν•œ 크루: μ†Œν•˜(μ΅œμ†Œμ—°) + +--- + +### Step1: ν”„λ‘ νŠΈμ—”λ“œ μ†ŒμŠ€ μ½”λ“œλ₯Ό ν”„λ‘œλ•μ…˜ μ½”λ“œλ‘œ λΉŒλ“œ + +client-side rendering을 μœ„ν•œ λŒ€λΆ€λΆ„μ˜ ν”„λ‘ νŠΈμ—”λ“œ ν”„λ ˆμž„μ›Œν¬, 예λ₯Ό λ“€μ–΄ React와 Vueμ—μ„œλŠ” 개발 μž‘μ—…μ„ ν”„λ‘œλ•μ…˜ μ€€λΉ„ μ½”λ“œλ‘œ μ»΄νŒŒμΌν•΄μ•Ό ν•©λ‹ˆλ‹€. 이 과정을 거치면 μ›Ή λΈŒλΌμš°μ €μ—μ„œ 읽을 수 μžˆλŠ” HTML, CSS, JavaScript 파일이 μƒμ„±λ©λ‹ˆλ‹€. Create React App을 μ‚¬μš©ν•˜λŠ” 예λ₯Ό 듀어보면, `npm run build` λͺ…λ Ήμ–΄λ₯Ό μ‚¬μš©ν•˜μ—¬ μ»΄νŒŒμΌν•˜κ³  λ‹€μŒκ³Ό 같은 νŒŒμΌμ„ 생성할 수 μžˆμŠ΅λ‹ˆλ‹€. + + + +### Step 2: Nginx μ„€μ • + +#### Nginxμ΄λž€ + +Nginx은 인기 μžˆλŠ” μ˜€ν”ˆμ†ŒμŠ€ μ›Ή μ„œλ²„, reverse proxy μ„œλ²„, λ‘œλ“œ λ°ΈλŸ°μ„œμž…λ‹ˆλ‹€. λ§Žμ€ λ™μ‹œ 연결을 효율적으둜 μ²˜λ¦¬ν•˜λ„λ‘ μ„€κ³„λ˜μ–΄ μžˆμ–΄ 정적 μ½˜ν…μΈ  제곡, μ›Ή νŠΈλž˜ν”½ 처리, ν΄λΌμ΄μ–ΈνŠΈμ™€ λ°±μ—”λ“œ μ„œλ²„ κ°„μ˜ proxy 역할에 μ ν•©ν•©λ‹ˆλ‹€. + +#### μ›Ή μ„œλ²„λ‘œ Nginx μ„€μ • + +κ°„λ‹¨ν•œ λͺ‡ 가지 λͺ…λ Ήμ–΄λ‘œ Nginx을 μ›Ή μ„œλ²„λ‘œ μ‚¬μš©ν•˜μ—¬ HTML, CSS, JavaScript 및 정적 νŒŒμΌμ„ μ œκ³΅ν•  수 μžˆμŠ΅λ‹ˆλ‹€. + +``` +http { + # 파일 인식을 μœ„ν•œ 곡톡 MIME μœ ν˜•μ„ ν¬ν•¨ν•©λ‹ˆλ‹€. + include mime.types; + + server { + # μˆ˜μ‹  연결을 μœ„ν•΄ 8080번 port(default port)μ—μ„œ μˆ˜μ‹ ν•©λ‹ˆλ‹€. + listen 8080; + + # νŒŒμΌμ„ μ œκ³΅ν•  root directoryλ₯Ό μ„€μ •ν•©λ‹ˆλ‹€. + # λΉŒλ“œ 폴더 λŒ€μƒ 경둜 + root /Users/jaypan/workspace/nginx/client/build; + + location / { + # μš”μ²­λœ 파일($uri)을 μ°Ύκ³ , 찾지 λͺ»ν•œ 경우 index.html을 μ œκ³΅ν•©λ‹ˆλ‹€. + # SPAμ—μ„œλŠ” routing이 ν΄λΌμ΄μ–ΈνŠΈ μΈ‘μ—μ„œ μ²˜λ¦¬λ©λ‹ˆλ‹€. + # λ”°λΌμ„œ μš”μ²­λœ λ¦¬μ†ŒμŠ€κ°€ λˆ„λ½λœ 경우 ν΄λΌμ΄μ–ΈνŠΈ μ•±μ—μ„œ 자체적으둜 μ²˜λ¦¬ν•˜λ„λ‘ ν•©λ‹ˆλ‹€. + try_files $uri /index.html; + } + } +} + +events {} +``` + +#### λŒ€μ²΄ 접근법 (VanillaJS) + +바닐라 μžλ°”μŠ€ν¬λ¦½νŠΈ(ν”„λ ˆμž„μ›Œν¬ 없이)λ₯Ό μ‚¬μš©ν•˜μ—¬ κ°œλ°œν•˜κ³  있고, ν”„λ‘œμ νŠΈμ— index.html, about.htmlκ³Ό 같은 μ—¬λŸ¬ 정적 νŽ˜μ΄μ§€κ°€ ν¬ν•¨λ˜μ–΄ μžˆλ‹€λ©΄ λ‹€μŒκ³Ό 같이 ꡬ성을 μˆ˜μ •ν•  수 μžˆμŠ΅λ‹ˆλ‹€. + +``` +http { + + include mime.types; + + server { + listen 8080; + root /Users/jaypan/workspace/nginx; + + location ~* /users/[0-9] { + root /Users/jaypan/workspace/nginx; + try_files /index.html =404; + } + + location /about { + root /Users/jaypan/workspace/nginx; + } + } +} + +events {} +``` + +μ•„λž˜ 제곡된 crash courseλ₯Ό μ‚΄νŽ΄λ³΄μ„Έμš”. nginx μ»¨ν…μŠ€νŠΈμ™€ μ§€μ‹œμ–΄μ— λŒ€ν•œ 이해λ₯Ό λ†’μ΄λŠ” 데 맀우 도움이 λ˜μ—ˆμŠ΅λ‹ˆλ‹€. + + + +#### 둜컬 λ¨Έμ‹ μ—μ„œ ν…ŒμŠ€νŠΈ + +macOS μ‚¬μš©μžλΌλ©΄ μ•žμ„œ μ„€λͺ…ν•œ λŒ€λ‘œ 둜컬 μ»΄ν“¨ν„°μ˜ nginx.conf νŒŒμΌμ„ μˆ˜μ •ν•˜λ €λ©΄ λ‹€μŒ 단계λ₯Ό λ”°λ₯΄λ©΄ λ©λ‹ˆλ‹€. 컴퓨터에 Nginx을 μ„€μΉ˜ν•˜μ§€ μ•Šμ•˜λ‹€λ©΄ Homebrewλ₯Ό μ‚¬μš©ν•˜μ—¬ κ°„νŽΈν•˜κ²Œ μ„€μΉ˜ν•  수 μžˆμŠ΅λ‹ˆλ‹€. + +```bash +vim /usr/local/etc/nginx/nginx.conf +``` + + + +이제 μ›Ήμ‚¬μ΄νŠΈλ₯Ό λ‘œμ»¬μ— μ„±κ³΅μ μœΌλ‘œ λ°°ν¬ν–ˆμœΌλ‹ˆ, λ‹€μŒ λ‹¨κ³„λŠ” μ½˜ν…μΈ λ₯Ό 곡개적으둜 μ•‘μ„ΈμŠ€ν•  수 μžˆλ„λ‘ λ§Œλ“œλŠ” κ²ƒμž…λ‹ˆλ‹€. + +### Step3: AWS EC2 μΈμŠ€ν„΄μŠ€ + +#### EC2λž€? + +Elastic Compute Cloud(EC2)λŠ” AWSμ—μ„œ μ œκ³΅ν•˜λŠ” 인프라 μ„œλΉ„μŠ€(IaaS)μž…λ‹ˆλ‹€. μ•„λ§ˆμ‘΄ 데이터 센터에 μœ„μΉ˜ν•œ 물리 μ„œλ²„μ—μ„œ μ‹€ν–‰λ˜λŠ” 가상 머신이라고 μƒκ°ν•˜μ‹œλ©΄ λ©λ‹ˆλ‹€. 각 μΈμŠ€ν„΄μŠ€(가상 λ¨Έμ‹ )μ—λŠ” κ³ μœ ν•œ 곡용 IP μ£Όμ†Œκ°€ λΆ€μ—¬λ©λ‹ˆλ‹€. + +#### λͺ©ν‘œ + +λͺ©ν‘œλŠ” 이 μΈμŠ€ν„΄μŠ€ 내에 λ™μΌν•œ Nginx ꡬ성을 κ΅¬ν˜„ν•˜λŠ” κ²ƒμž…λ‹ˆλ‹€. μ΄λ ‡κ²Œ ν•˜λ©΄ 인터넷을 톡해 μ›Ήμ‚¬μ΄νŠΈμ— μ•‘μ„ΈμŠ€ν•  수 있으며, 둜컬 μ•‘μ„ΈμŠ€μ— μ œν•œλ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. + +#### EC2 μΈμŠ€ν„΄μŠ€ 생성 + +AWS 계정이 이미 μžˆλ‹€κ³  κ°€μ •ν•˜κ³ , EC2 λŒ€μ‹œλ³΄λ“œλ‘œ μ΄λ™ν•˜μ—¬ 였λ₯Έμͺ½ 상단 λͺ¨μ„œλ¦¬μ— μžˆλŠ” "Launch Instance" λ²„νŠΌμ„ ν΄λ¦­ν•©λ‹ˆλ‹€. + +Ubuntu 버전을 μ„ νƒν•˜κ³  λ„€νŠΈμ›Œν¬ μ„€μ •μ—μ„œ HTTP νŠΈλž˜ν”½μ„ ν—ˆμš©ν•˜λŠ” μ˜΅μ…˜μ„ ν™œμ„±ν™”ν•©λ‹ˆλ‹€. ν˜„μž¬λ‘œμ„œλŠ” HTTPSλ₯Ό κ΅¬μ„±ν•˜μ§€ μ•Šμ„ κ²ƒμž„μ„ μ°Έκ³ ν•΄ μ£Όμ„Έμš”. key pairλ₯Ό μƒμ„±ν•˜λŠ” 것을 μžŠμ§€ λ§ˆμ„Έμš”. μ΄λŠ” μΈμŠ€ν„΄μŠ€μ— μ μ ˆν•œ μ•‘μ„ΈμŠ€ κΆŒν•œμ„ λΆ€μ—¬ν•˜λŠ” 데 μ€‘μš”ν•©λ‹ˆλ‹€. + + + +_ubuntu 프리티어 선택_ + + + +_http traffic ν—ˆμš©_ + + + +_key pair 생성_ + +#### λ³΄μ•ˆ κ·Έλ£Ή(λ°©ν™”λ²½) ꡬ성 + +μΈμŠ€ν„΄μŠ€ 생성 μ‹œ "allow HTTP traffic" μ˜΅μ…˜μ„ μ„ νƒν•˜μ§€ μ•Šμ€ 경우, λ³΄μ•ˆ κ·Έλ£Ή 섀정을 μˆ˜μ •ν•˜μ—¬ 이λ₯Ό μˆ˜μ •ν•  수 μžˆμŠ΅λ‹ˆλ‹€. μΈλ°”μš΄λ“œ κ·œμΉ™μ„ μΆ”κ°€ν•˜μ—¬ HTTP νŠΈλž˜ν”½μ„ ν—ˆμš©ν•˜μ„Έμš”. + + + +### Step4: SSHλ₯Ό μ‚¬μš©ν•˜μ—¬ μΈμŠ€ν„΄μŠ€μ— μ ‘κ·Ό + +SSHλŠ” command line을 μ‚¬μš©ν•˜μ—¬ 원격 μ„œλ²„ 및 μž₯치(Linux, Mac, Window 10+)에 μ•ˆμ „ν•˜κ²Œ μ ‘κ·Όν•˜κ³  관리할 수 μžˆλŠ” 방법을 μ œκ³΅ν•©λ‹ˆλ‹€. + +EC2 μΈμŠ€ν„΄μŠ€ νŽ˜μ΄μ§€μ—μ„œ "Connect" λ²„νŠΌμ„ ν΄λ¦­ν•˜κ³  제곡된 지침을 λ”°λ₯΄μ„Έμš”. νƒ€μž„μ•„μ›ƒ 였λ₯˜κ°€ λ°œμƒν•˜λŠ” 경우 μΈμŠ€ν„΄μŠ€μ— μ˜¬λ°”λ₯Έ μ ‘κ·Ό κΆŒν•œμ΄ μ—†λ‹€λŠ” 것을 μ˜λ―Έν•©λ‹ˆλ‹€. + +```bash +ssh -i "ubuntu.pem" ubuntu@ec2-15-168-62-96.ap-northeast-3.compute.amazonaws.com +``` + + + +### Step5: Ubuntu Linux에 Nginx μ„€μΉ˜ + +```bash +// Ubuntu μ‹œμŠ€ν…œμ˜ νŒ¨ν‚€μ§€ λͺ©λ‘μ„ μ—…λ°μ΄νŠΈν•©λ‹ˆλ‹€. +sudo apt-get update + +sudo apt install nginx + +// nginx이 μ„±κ³΅μ μœΌλ‘œ μ„€μΉ˜λ˜μ—ˆλŠ”μ§€ ν™•μΈν•©λ‹ˆλ‹€. +nginx -v + +// Nginx μ„œλΉ„μŠ€λ₯Ό μ‹œμž‘ν•©λ‹ˆλ‹€. +sudo systemctl start nginx + +// μ‹œμŠ€ν…œ λΆ€νŒ… μ‹œ μžλ™μœΌλ‘œ μ‹œμž‘λ˜λ„λ‘ μ„€μ •ν•©λ‹ˆλ‹€. +sudo systemctl enable nginx + +// Nginx μ„œλΉ„μŠ€μ˜ μƒνƒœλ₯Ό ν™•μΈν•©λ‹ˆλ‹€. +sudo systemctl status nginx +``` + +### Step6: κΈ°λ³Έ Nginx 파일 μˆ˜μ • + +κΈ°λ³Έ Nginx ꡬ성 νŒŒμΌμ„ Step2의 지침에 맞게 μˆ˜μ •ν•˜μ„Έμš”. ν•˜μ§€λ§Œ 이것을 μžŠμ§€ λ§ˆμ„Έμš”. + +```bash +vim /etc/nginx/nginx.conf +``` + +### Step7: λ¦¬λˆ…μŠ€μ— λΉŒλ“œ 파일 볡사 + +`scp`λŠ” Secure Copy Protocol의 μ•½μžλ‘œ, 둜컬 ν˜ΈμŠ€νŠΈμ™€ 원격 호슀트 간에 νŒŒμΌμ„ μ•ˆμ „ν•˜κ²Œ μ „μ†‘ν•˜λŠ” 데 μ‚¬μš©λ˜λŠ” command line λ„κ΅¬μž…λ‹ˆλ‹€. 이λ₯Ό μ‚¬μš©ν•˜μ—¬ λΉŒλ“œ 폴더λ₯Ό μΈμŠ€ν„΄μŠ€λ‘œ 볡사해 λ³΄κ² μŠ΅λ‹ˆλ‹€. + +```bash +// scp -i {key-pair.pem} -r {build folder} ubuntu@{dns}:{destination-folder} +scp -i "ubuntu.pem" -r /Users/jaypan/workspace/nginx/client/build ubuntu@ec2-15-168-39-19.ap-northeast-3.compute.amazonaws.com:/var/www/html/ + +// "permission denied"와 같은 였λ₯˜κ°€ λ°œμƒν•˜λŠ” 경우 -vλ₯Ό μΆ”κ°€ν•˜μ—¬ μžμ„Έν•œ 정보λ₯Ό 확인할 수 μžˆμŠ΅λ‹ˆλ‹€. +``` + +"build" 폴더가 μ„±κ³΅μ μœΌλ‘œ λ³΅μ‚¬λ˜μ—ˆλŠ”μ§€ ν™•μΈν•˜μ„Έμš”. 기본적으둜 μ œν•œλœ κΆŒν•œμ„ 가진 `/usr`에 νŒŒμΌμ„ λ³΅μ‚¬ν•˜λ©΄ κΆŒν•œ λ¬Έμ œκ°€ λ°œμƒν•  수 μžˆμŠ΅λ‹ˆλ‹€. μ›Ή μ„œλ²„ νŒŒμΌμ„ μˆ˜μš©ν•˜κΈ° μœ„ν•΄ 일반적으둜 더 적은 κΆŒν•œμœΌλ‘œ κ΅¬μ„±λœ `/var/www/html`에 λ³΅μ‚¬ν•˜λŠ” 것이 μ’‹μŠ΅λ‹ˆλ‹€. + +### Step8: Nginx `root` directive μ—…λ°μ΄νŠΈ + +그런 λ‹€μŒ Nginx root directiveλ₯Ό μ—…λ°μ΄νŠΈν•˜μ„Έμš”. + +``` +http { + ... + + server { + ... + + root /var/www/html/build; + + ... + } +} +``` + +### Step9: 곡용 IPμ—μ„œ 확인 + +μ΄κ²ƒμœΌλ‘œ λμž…λ‹ˆλ‹€! 이제 Nginxλ₯Ό μ‚¬μš©ν•˜μ—¬ AWS EC2에 ν”„λ‘œλ•μ…˜ ν”„λ‘ νŠΈμ—”λ“œ μ½”λ“œλ₯Ό λ°°ν¬ν•˜λŠ” 방법을 μ•Œκ²Œ λ˜μ—ˆμŠ΅λ‹ˆλ‹€. + + + +### κ²°λ‘  + +ν”„λ‘œλ•μ…˜ μ½”λ“œλ₯Ό λ°°ν¬ν•˜λŠ” κΈ°λ³Έ 원리λ₯Ό μ΄ν•΄ν•˜λŠ” 것은 맀우 κ°€μΉ˜κ°€ μžˆμŠ΅λ‹ˆλ‹€. 비둝 μ—…λ°μ΄νŠΈκ°€ ν•„μš”ν•  λ•Œλ§ˆλ‹€ μˆ˜λ™ 단계가 ν•„μš”ν•˜λ”λΌλ„ λ§μž…λ‹ˆλ‹€. μ•žμœΌλ‘œλŠ” 이 과정을 κ°„μ†Œν™”ν•˜κ³  μ΅œμ ν™”ν•˜κΈ° μœ„ν•΄ Dockerλ₯Ό μ‚¬μš©ν•˜λŠ” 방법을 μ•Œμ•„λ³Ό κ³„νšμž…λ‹ˆλ‹€.