ฅ^._.^ฅ

• API(Application Programming Interface)
  • 소프트웨어 애플리케이션이 서로 통신하여 데이터, 특징 및 기능을 교환할 수 있도록 하는 일련의 규칙  (IBM)
  • 은행 창구와 같은, 하나의 "약속" ➡️ 정해진대로 요구하면, 정해진 결과물을 돌려주는 창구
• 웹의 동작
  • 클라이언트: 사용자가 보는 화면
  • 서버: 데이터가 있는 곳, 원하는 데이터를 요청하면 응답해주는 곳
  • 브라우저가 하는 일
    • 서버가 만들어 놓은 "API"라는 창구에 미리 정해진 약속대로 요청을 보내고
    • 받은 데이터 or HTML 파일을 그려주는 일
    • ex) https://naver.com/ ➡️ "naver.com"이라는 이름의 서버에 있는, "/" 창구에 요청을 보낸 것!

1. AWS EC2 인스턴스 생성
   https://ap-northeast-2.console.aws.amazon.com/console/home?region=ap-northeast-2
   

    

   https://ap-northeast-2.console.aws.amazon.com/console/home?region=ap-northeast-2

    

   ap-northeast-2.console.aws.amazon.com

   
   
   1. AMI 선택
      
      • Ubuntu Server 22.04 LTS 선택
        

        

   2. 인스턴스 유형 선택
      • 기본 세팅 설정 -> 프리 티어 사용(t2.micro)
   3. 인스턴스 구성
      • 기본세팅 설정
   4. 스토리지 추가
      • 기본 세팅 설정 (프리티어 경우 30까지 설정 가능하지만, 일단 기본)
   5. 태그 추가
      • 관리하고 싶다면 태그 추가(일단 넘어감)
   6. 보안 그룹 구성
      • 방화벽 규칙 설정
      • HTTP, HTTPS, 사용자 지정 TCP 추가
        • server : 8000, react : 3000, mysql 설정 시 : 3306 추가
          

          

   7. 인스턴스 시작 검토
      • 시작하기 누르면 Key Pair 설정 가능
      • ssh 접속을 위해 꼭 필요하므로 .pem 다운로드 필수
      • Key Pair 저장 위치 꼭 기억하기
   8. 탄력적 IP
      • EC2 중지 후 재실행 시 ip가 변경될 수 있으므로 탄력적 IP 생성 후 사용하면 좋음
        https://ndb796.tistory.com/258
        

         

        AWS EC2에 탄력적 IP(Elastic IP)를 이용해 고정 IP 부여하기

        AWS EC2는 재미있는 특징이 있습니다. 그것은 바로 기본적으로 EC2 인스턴스를 생성하여 서버를 구동시키면 그것은 고정 IP가 아니라는 점입니다. 따라서 탄력적 IP(Elastic IP)를 이용해 고정 IP를 할

        ndb796.tistory.com

2. AWS EC2 인스턴스 접속(putty)
   • Window 환경이므로 putty로 AWS EC2 인스턴스(ubuntu) 접속
     1. puttyGen으로 .ppk 파일 생성
        • 상단의 Conversoins -> Import Key 후, AWS에서 다운받은 .pem 파일 선택(.pem 파일은 모든 파일로 변경하면 보임)
        • Save private key 눌러서 .ppk 파일 생성(.pem 파일과 같은 이름으로)
     2. putty 접속
        • Connection -> SSH -> Auth 에서 Browse 클릭 후 .ppk 파일 지정
          

          

          
          
          • Host Name : ubuntu@aws의 ip 주소
          • Saved Sessions 지정 후 Save 하면 현재 설정 저장됨
          • Open
3. 프로젝트 Clone & Ubuntu 환경 세팅(putty)
   1. nodejs, npm 설치

      $ sudo apt-get update
      $ sudo apt-get install -y build-essential
      $ sudo apt-get install curl
      
      $ curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
      $ sudo apt-get install -y nodejs
      
      
      // npm 설치
      $ sudo apt install npm
      
      
      // 설치 후 버전 확인
      $ npm -v
      $ node -v

   2. mysql 설치
      1. mysql 설치

         $ sudo apt-get update
         $ sudo apt-get install mysql-server
         
         // 설치 확인
         $ dpkg -l | grep mysql-server
         
         // 실행 여부 확인
         $ sudo netstat -tap | grep mysql
         
         // 재시작
         $ sudo systemctl restart mysql.service

      2. mysql 접속

         $ sudo mysql -u root -p
         // 초기에는 비밀번호 설정 없으니 그냥 enter

         • root 비밀번호 설정

           > use mysql
           
           // 현재 암호 확인
           > select Host, User, authentication_string from user;
           
           // 비밀번호 변경
           > alter user 'root'@'localhost' identified with mysql_native_password by '1234';
           
           // 적용 후 종료
           > FLUSH PRIVILEGES;
           > exit

      3. mysql 외부 접속 설정

         $ cd /etc/mysql/mysql.conf.d
         $ sudo vi mysqld.cnf

         • mysqld.cnf 에서 bind-address 찾아서 127.0.0.1 -> 0.0.0.0 으로 변경

           ...
           bind-address 0.0.0.0
           ...

         // 재시작
         $ sudo systemctl restart mysql.service
         
         $ sudo mysql -u root -p

         > create user 'maplix_test'@'%' identified by '1234';
         > grant all privileges on *.* to maplix_test@'%';

      4. Workbench 접속
         • Connection 생성
           

           

         • Connection 접속 후 DB 생성(import)
         • Query에서 비밀번호 설정

           ALTER USER 'maplix_test'@'%' IDENTIFIED WITH mysql_native_password BY '1234';

   3. 프로젝트 clone
      1. git 설치

         // 설치
         $ sudo apt install git
         
         // 설치 확인
         $ git

      2. git clone
         • clone할 프로젝트
           • 요청 서버는 AWS IP 주소
             • server로 post, get 하는 모든 front 파일 서버 수정하기
               • localhost -> AWS ip 주소
                 

                 

           • sever 내 mysql 연결 AWS 외부 접속
             • host: AWS IP 주소
             • port: 3306
             • user: username
             • password: password
             • database: mysql 내 생성된 db명
           • build가 이미 된 상태여야 함
             • build 방법
               • VScode(프로젝트 개발 환경) 내 front_end 폴더 안에서 npm run build
               • build가 정상적으로 완료되면 front_end 폴더 안에 build 폴더가 생성되고, 그 안에 index.html 정상적으로 생성
               • front 변경 시마다 build 해줘야 함

         // 프로젝트 clone
         $ git clone 프로젝트 주소
         
         // 프로젝트가 변경되면 다시 git pull
         $ sudo git pull

4. Front 배포 - Nginx(putty)
   1. Nginx 설치

      $ sudo apt-get install nginx -y

   2. Nginx 설정 파일 생성

      // 기본 설정 파일 삭제
      $ sudo rm /etc/nginx/sites-availallbe/default
      $ sudo rm /etc/nginx/sites-enalbed/default
      
      // 프로젝트에 대한 nginx 설정 파일 생성
      $ cd /etc/nginx/sites-available
      $ sudo touch maplix.conf
      $ sudo vi maplix.conf

      //maplix.conf
      
      server {
      	listen 80;
      		location / {
      		root  /home/ubuntu/프로젝트명/front_end/build;
      		index  index.html index.html;
      		try_files $uri /index.html;
      		}
      }

      // 심볼릭 링크 생성
      $ sudo ln -s /etc/nginx/sites-available/maplix.conf /etc/nginx/sites-enabled/maplix.conf

   3. Nginx 시작

      // 시작
      $ sudo systemctl start nginx
      // 중지
      $ sudo systemctl stop nginx
      // 상태 확인
      $ sudo systemctl status nginx
      // 재시작
      $ sudo systemctl restart nginx

   4. 접속
      • 브라우저에서 IP 입력
      • 500 Error 시

        $ chmod 711 /home/ubuntu

5. Back 연결 - pm2 (putty)

   // server.js 파일있는 폴더로 이동
   $ cd back_end
   
   // server 실행
   $ node server
   
   // pm2 (항상 켜진 서버)
   $ sudo npm install pm2 -g
   
   $ pm2 start server.js

   • node 안 먹히면 back_end 폴더 내에서 nodejs, npm 재설치
6. 참고 링크
   https://velog.io/@wooreal/AWS-React-project%EB%A5%BC-AWS-EC2%EC%97%90%EC%84%9C-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0with.-git-putty-nginx

https://dang2dangdang2.tistory.com/187

https://han-py.tistory.com/408

https://m.blog.naver.com/software705/221337666338

https://velog.io/@issac/AWS-EC2%EC%97%90-MySQL-%EC%84%9C%EB%B2%84-%EA%B5%AC%EC%B6%95%ED%95%98%EA%B8%B0

2022년 공모전 당시 작성했던 내용을 옮겨서 작성한 글입니다.