[AWS] AWS EC2 배포(REACT + Nodejs + express + mysql)

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

   
   
   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 부여하기

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

[AWS] React project(express)를 AWS EC2에서 배포하기(with. git, putty, nginx)

https://dang2dangdang2.tistory.com/187

AWS 서버에서 NGINX 사용해서 REACT 배포하기

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

[React Web] AWS EC2 배포 ALL-IN-ONE

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

[AWS Mysql] AWS ec2 Mysql 서버구축및 외부접속하기

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

[AWS] EC2에 MySQL 서버 구축하기

 

 

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