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 deleted file mode 100644 index 8fd3644..0000000 --- a/July/article/Deploy-Your-Frontend-Code-on-AWS-EC2-Using-Nginx.md +++ /dev/null @@ -1,207 +0,0 @@ -## πŸ”— [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λ₯Ό μ‚¬μš©ν•˜λŠ” 방법을 μ•Œμ•„λ³Ό κ³„νšμž…λ‹ˆλ‹€.