최종 프로젝트 - 서버 설정

1. 윈도우에 Front-End 올리기

    ① final4-public-frontend EC2에 RDP 클라이언트를 생성 

    ② 원격 데스크톱 이용해서 접속

    ③ Nodejs

    ④ Git에 작성된 취지직 쇼핑몰 프로젝트 및 패키지 설치

    ⑤ 해당 폴더에서 cmd 접속

         - npm install 

         - npx next bulid (소스 코드 빌드)

         - npx next start (소스코드 실행)

    ⑥ nginx.org/en/download.html에서 Nginx 설치

    ⑦ 설치된 파일에서 nginx.exe 클릭해서 nginx 실행

 

2. 우분투에 Back-End 올리기

    ① Bitvise에 client key manager 이용해서 키 import

    ② Bastion Host에 ssh 접속

    ③ Bastion Host로 SFTP 이용해서 .pem키 업로드 

    ④ 업로드된 키의 권한 600으로 수정

          - chmod 600 [key 이름].pem

    ⑤ ssh -i [key이름].pem ubuntu@[프라이빗 IP] 입력하여 Back-End 인스턴스로 접속

    ⑥ 파이썬 설치 (버전11) 

         - install software-properties-common : 써드파티 벤더 sw app을 관리하는데 도움이 되는 스크립트 제공

         - sudo add-apt-repository ppa:deadsnakes/ppa : python 최신버전 제공 repository 다운

         - sudo apt install python3.11

         - sudo update-alternatives --install /usr/bin/python3 python3 /usr/bin/python3.11 1 : 심볼릭 링크 생성

         - sudo update-alternatives --config python3 : python3 명령어 입력시 파이썬 3.11버전으로 실행되도록 변경

         - sudo apt-get install python3-pip : pip 다운로드

    ⑦ Git 설치 및 clone

         - sudo apt-get install git-core

         - git clone https://github.com/CHWI-JI-JIG/Backend.git [소스코드가 있는 git의 url]

    ⑧ requirements 설치

         - cd Backend 해서 ls 해서 requirements.txt가 있는지 확인

         - 있다면 pip install -r requirements.txt (모듈이 없을 경우 pip install 이용해서 다운로드)

    ⑨ mysql_config.py 파일 생성 -> 자신에 맞게 아래 내용 작성

         - nano(vi) mysql_config.py

         - mysql_db = {
                "user": "",
                "password": "",
                 "host": "",
                "port": "3306",
                "database": "",
                 "charset": "",
            }

    ⑩ MySQL 설치 & 설정 

        - sudo apt install mysql-server : 설치 
        - sudo ufw allow mysql : 포트 설정 

        - sudo systemctl start mysql : mysql 실행

        - mysql -u root -p : mysql 접속

    ⑪ Flask 설치

        - sudo pip install flask

    ⑫ Flask 실행 

         - python3 manage.py --host 0.0.0.0 --port 5000

 

3. Front-End와 Back-End 연동 (reverse proxy 이용)

    ① 윈도우에서 nginx가 설치된 폴더에서 conf 파일 밑에 있는 nginx.conf 파일에 아래의 코드를 추가

# connect nginx - next.js | Flask
server {
listen 80;
server_name [frontend서버 퍼블릭IP];
location /api/ {
# API 호출시 Backend Flask 서버로 요청
proxy_pass http://[backend_private_ip]:[Flask port(5000)];
proxy_http_version 1.1;
#proxy_set_header Upgrade $http_upgrade;
#proxy_set_header Connection "upgrade";
#proxy_set_header Host $host;
#proxy_set_header X-Real-IP $remote_addr;
#proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
#proxy_redirect off;
}
location / {
# Next.js Frontend 서버로 요청
proxy_pass http://localhost:3000; # next.js 서버 실행주소
proxy_http_version 1.1;
}
}

    ② 윈도우 서버 내 방화벽 인바운드 규칙 80번 port 허용

         - win > 고급 보안이 포함된 Windows Defender 검색 후 열기

         - 인바운드 규칙 클릭하면 옆에 작업칸에 새 규칙 선택

            → 규칙 종류: 포트
                 프로토콜 및 포트: TCP | 특정 로컬 포트 80
                 작업: 연결 허용
                 프로필: (기본) 도메인, 개인, 공용 전체 체크
                 이름: Connect 80 port

    ③ next.js 애플리케이션 코드 중 요청 url을 config > apiConfig에서 export const API_BASE_URL = 'http://[Frontend IP]'

    ④ Front-End의 IP로 접속하여 로그인 등의 API 요청 동작을 확인