프로젝트

프로젝트에서 가장 중요한 것은
주어진 자원에 맞는 범위 설정이다..

ec2 centos 환경에서 작업했다

nginx

엔진x: 웹 서버 소프트웨어로, 가벼움과 높은 성능을 목표로 한다. 웹 서버, 리버스 프록시 및 메일 프록시 기능을 가진다. - 위키백과

ec2

front-end

1. windows유저와 맞추기위해 putty로 접속 - mac m1 putty 설치

2. 로컬에서 개발한 것 git으로 clone - pull

3. node, yarn 설치

sudo yum update
curl -sL https://rpm.nodesource.com/setup_17.x | sudo bash -
sudo yum install -y nodejs
sudo yum install yarn

4. react build

webpack에 설정해놓은 scripts build

npm run build

5. NginX

1. 설치

sudo amazon-linux-extras install nginx1.12

aws ec2를 사용하기 때문에 amazon에서 다운받는

centos라면
sudo yum install nginx

ubuntu라면
sudo apt install nginx

2. 포트 번호 확인 - NginX는 기본적으로 80포트

sudo netstat -ntlp

3. NginX 설정

sudo vi /etc/nginx/nginx.conf

# server {
	...
# }

많은 설정이 있지만 server에 대한 부분만 주석 처리 해준다
따로 폴더 생성하라는데 그냥 nginx.conf를 수정했다
주석 처리한 것 대신 아래 코드 삽입

server {
	listen 80;
	location / {
  		root /home/ec2-user/[프로젝트 이름]/dist;
  		index index.html index.htm;
  		try_files $uri $uri/ /index.html;
	}
}

4. 설정 파일 확인

sudo nginx -t

이런 메시지 나오면 성공
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

4. 실행

sudo systemctl start nginx

5. 종료

sudo systemctl stop nginx

6. 접속

Nginx로 build된 파일로 접속하도록 설정해놓았기 때문에
80포트가 열려있다면 외부에서 주소로 접속 가능

back-end

가상환경,wsgi를 설정하지 않았다

1. flask 설치

sudo yum install python3 pip3 -y

2. alias 설정

vi ~/.bash_profile

alias python='python3'
alias pip='pip3'

3. 패키지 설치

pip install -r requirement.txt

4. 실행

플라스크는 주소랑 포트만 잘 설정해주면 바로 접속 가능하다

주소를 0.0.0.0 으로 설정해줘야 접속 가능
flask 기본 포트번호가 5000번이라 5000번 포트를 열어주었다

## app.py
from flask import Flask, request

app = Flask(__name__)

@app.route('/')
def index():
  if request.method == "GET":
    print('hi')
    return '<h1>Hello!</h1>'

if __name__ == "__main__":
  app.run('0.0.0.0', debug=True)

5. ec2에서 IP 주소 받기

ec2 console로 접속 - 로그인 - ec2 - 네트워크 및 보안 - 탄력적 IP - 탄력적 IP 주소 할당 - 탄력적 IP 주소 연결

탄력적 IP 주소 연결에서 ec2 인스턴스 설정 해주면 IPv4 주소를 준다

http://주소:5000 로 접속 및 front에서 요청 가능

axios를 받아서 form onSubmit으로 요청, 응답 확인까지만 진행했다

코드 수정 시 flask는 local에서 push, ec2에서 pull만 받으면 돼서 편한데
react는 build를 다시 해줘야하니.. ci/cd를 왜 하는지 알겠다