nodejs express + reactjs + aws ec2 배포

인스턴스를 빌리고 깃에서 프로젝트를 받아오는 과정은 생략한다.

환경

• nodejs로 백엔드 서버(api)를 구성하고 react로 프론트엔드를 구성하였다.
• nodejs api의 요청 주소는 /api로 시작한다.
• cors 이슈를 해결하기 위해 프록시를 사용한다.
• nodejs와 reactjs는 같은 인스턴스에 있다.
• nodejs와 reactjs는 http:// 프로토콜을 사용한다.
• 도메인은 호스팅 케이알에서 구매하였다.

Part I. react 프로젝트 빌드

1. react 프로젝트를 빌드한다.

yarn build

2. /var/www 경로에 임의의 이름으로 폴더를 생성한다.

sudo mkdir /var/www/front_build

*꼭 저기다가 생성안해도 된다

3. 1번에서 react에 생성된 build 폴더의 모든 파일을 2번에서 생성한 폴더에 옮긴다.

// 프로젝트 경로가 ~/myapp일 경우 
sudo cp -r ~/myapp/build/* /var/www/front_build

*이후 react 프로젝트를 수정하였다면, 1, 2번에서 생성한 폴더를 지우고 part1을 다시 시작해야한다.

Part II. 도메인 연결

1. 도메인 구입

2. ec2 탄력적 ip 할당하기

3. aws route53 > 호스팅 영역 생성 > 구입한 도메인 입력

4. 도메인 구입 사이트에서 aws의 ns '값/트래픽 대상' 값 4개 복사(마지막에 .은 복사하면 안됨) 후 도메인을 구입한 사이트의 DNS 설저에서 네임서버 변경하기

5. aws route53에서 생성한 호스팅 영역에서 레코드 생성 버튼 클릭 후 값 란에 ec2의 탄력적 ip 입력

호스팅 케이알에서 구매한 도메인 연결 시 참고

Part III. nginx 설정

1. nginx를 설치하고 실행한다.

sudo apt-get install nginx
sudo service nginx start

2. /etc/nginx/sites-available 로 이동하여 default 파일의 server 블럭을 다음과 같이 수정한다.

server {
	listen 80 default_server;
	listen [::]:80 default_server;

	root /var/www/front_buil;

	server_name 구매한 도메인주소;
    	#ex) 
    	#server_name test.kr; 

    	location / {
    		try_files $uri $uri/ /index.html;
    	}
	
    
	location /api/ {
            proxy_pass http://nodejs 서버 탄력적 ip:서버 포트번호/api/;
            #ex)
            #proxy_pass http://12.3.45.6:5000/api/;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
	}
}

구매한 도메인주소 앞에 http:// 등 프로토콜 붙이지 말것.

설정파일을 새로 작성하면 default파일을 삭제하고심볼릭 링크를 작성해야한다.
나는 파일을 새로 작성하면 자꾸 오류가 발생해서 default 파일에 작성하였다.
만약 defalut파일이 필요하다면 nginx를 재설치하면 된다.

붙여넣기 하면 안될 수도 있으니 직접 타이핑해야한다.

3. nginx를 재시작한다.

sudo service nginx restart

Part IV. nodejs 서버 유지

1. pm2를 설치한다

apt-get install pm2

2. pm2로 nodejs서버를 시작한다.

pm2 start node.js

3. 멈추고 싶으면 pm2 stop app.js