ํด๋น ํ๋ก์ ํธ๋ ์ทจ์ ์ค๋น ์งํ ์ค, ๊ฐ๋จํ๊ฒ react๋ฅผ ์ฌ์ฉํ์ฌ ์ ์ํ ์น ํฌํธํด๋ฆฌ์ค์ ๋๋ค.
- ์ฐธ์ฌ์ธ์ : 1์ธ ํ๋ก์ ํธ
- ๊ธฐ๊ฐ : 2022๋ 08์ ~ 2022๋ 09์(1๊ฐ์)
- ๋์ ์ญํ
- โ๏ธ ํ๋ก ํธ ์๋ ๊ฐ๋ฐ
- โ๏ธ ๋ฆฌ๋ฒ์ค ํ๋ก์ ์ค์ ๋ฐ AWS ๋ฐฐํฌ
- Github : https://github.com/ghkdqhrbals/portfolio
๐ โ๏ธ ํ๋ก ํธ ์๋ ๊ฐ๋ฐ(SCSS/HTML)
๐ โ๏ธ ๋ฆฌ๋ฒ์ค ํ๋ก์ ์ค์ ๋ฐ AWS ๋ฐฐํฌ
์ค์ ์ฝ๋
1. ๋์ปค ์ค์
Docker-compose.yaml
version: "3.7"
services:
nginx:
restart: always
container_name: nginx
build:
context: ./nginx
dockerfile: Dockerfile
ports:
- "80:80"
networks:
- frontend
client:
container_name: client
expose:
- "3000"
restart: "on-failure"
environment:
- PORT=3000
- NODE_ENV=development
- CHOKIDAR_USEPOLLING=true
build:
context: ./client
dockerfile: Dockerfile
volumes:
- "./client/:/app"
- "/app/node_modules"
stdin_open: true
networks:
- frontend
networks:
frontend:
driver: bridge
2. ๋ฆฌ๋ฒ์ค ํ๋ก์ ์ค์
NGINX.conf
user nginx;
worker_processes 1;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
upstream docker-client {
server client:3000;
}
server {
listen 80;
# server_name portfolio.hwangbogyumin.com;
server_name localhost;
# Frontend React Page
location / {
proxy_pass http://docker-client;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
# TODO for backend
}
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
keepalive_timeout 65;
include /etc/nginx/conf.d/*.conf;
}
3. AWS ๋ฐฐํฌ
ํ์ฌ๋ EC2 ๋ฐ Route ๋น์ฉ๋ฌธ์ ๋ก ์ธํด ๋ค์ด์์ผฐ์ต๋๋ค.
ํ๋ก์ฐ : AWS-Route-53 โ> AWS-EC2 โ> Nginx โ> WAS