Skip to main content Link Menu Expand (external link) Document Search Copy Copied

ํ•ด๋‹น ํ”„๋กœ์ ํŠธ๋Š” ์ทจ์—…์ค€๋น„ ์ง„ํ–‰ ์ค‘, ๊ฐ„๋‹จํ•˜๊ฒŒ react๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ œ์ž‘ํ•œ ์›น ํฌํŠธํด๋ฆฌ์˜ค์ž…๋‹ˆ๋‹ค.

  • ์ฐธ์—ฌ์ธ์› : 1์ธ ํ”„๋กœ์ ํŠธ
  • ๊ธฐ๊ฐ„ : 2022๋…„ 08์›” ~ 2022๋…„ 09์›”(1๊ฐœ์›”)
  • ๋‚˜์˜ ์—ญํ• 
    • โœ๏ธ ํ”„๋ก ํŠธ ์—”๋“œ ๊ฐœ๋ฐœ
    • โœ๏ธ ๋ฆฌ๋ฒ„์Šค ํ”„๋ก์‹œ ์„ค์ • ๋ฐ AWS ๋ฐฐํฌ
  • Github : https://github.com/ghkdqhrbals/portfolio

๐Ÿ“ƒ โœ๏ธ ํ”„๋ก ํŠธ ์—”๋“œ ๊ฐœ๋ฐœ(SCSS/HTML)

ํ”„๋ก ํŠธ ์—”๋“œ

About Me

img

Homepage

img

Projects

img

Contact Me

img

๐Ÿ“ƒ โœ๏ธ ๋ฆฌ๋ฒ„์Šค ํ”„๋ก์‹œ ์„ค์ • ๋ฐ 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