카테고리 없음

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

jelliclesu 2024. 7. 2. 20:07
  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
  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)

create-react-app 으로 생성한 react 프로젝트를 AWS EC2를 이용하여 배포하기. react 프로젝트는 이미 생성된 가정하에 시작한다. 1. AWS EC2 인스턴스 생성 AWS EC2 로 이동한다. 계정이 없다면 먼저 AWS 가입

velog.io

https://dang2dangdang2.tistory.com/187

 

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

일단 node.js 와 npm이 깔려 있다는 전제로 시작하겠읍니다. 참고로 전 react 깃랩에서 git clone해서 땡겨왔읍니다. nginx 설치 sudo apt-get install nginx -y 기본적인 nginx 명령어 #nginx 시작 sudo service nginx start

dang2dangdang2.tistory.com

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

 

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

React 프로젝트 AWS EC2에서 우분투 환경으로 배포하는 방법에 대해 알아보자. 필자도 react 배포 시 아래의 내용을 참고하여 배포를 한다. 그리고 오류가 난다면 주기적으로 추가하고 있다. 0. 들어

han-py.tistory.com

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

 

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

[ AWS ec2 Mysql 외부접속] ec2 인스턴스에 mysql 서버를 설치하여 외부에서 접속하는 과정에 순...

blog.naver.com

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 서버 구축하기

EC2에 MySQL 서버를 구축하고, 원격접속을 해보자.

velog.io

 

 

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