[개발]aws서비스에 리눅스깔고 react 설치해보기

 

https://aws.amazon.com/ko/free/?all-free-tier.sort-by=item.additionalFields.SortRank&all-free-tier.sort-order=asc&awsf.Free%20Tier%20Types=*all&awsf.Free%20Tier%20Categories=categories%23compute&trk=84ad1b7a-e8a4-4edd-bc74-15704bf999e7&sc_channel=ps&s_kwcid=AL!4422!3!588924203400!p!!g!!aws%20%EC%84%9C%EB%B2%84&ef_id=CjwKCAjwvNaYBhA3EiwACgndguwqjLIuOy1f9FzF2ISdTWCZUnjIhLI5HEZ9NoiW3mGDpvgJ5YOCQhoCY08QAvD_BwE:G:s&s_kwcid=AL!4422!3!588924203400!p!!g!!aws%20%EC%84%9C%EB%B2%84 

무료 클라우드 컴퓨팅 서비스 - AWS 프리 티어

 

1. 아마존 가입 (프리티어 -12개월 무료 이후 표준요금제)

2. 왼쪽위 ec2 검색 (게임으로치면 vm웨어에서 가상윈도우 하나 더 설치하는거다)

3. 대시보드로 이동하는데 Launch instance 주황버튼 클릭 (pem파일받으면 잘보관해야한다 - 완전중요)

4. Name and tags 이름설정 , os설정, ram sdd 용량 기타등등  사실 처음연습하는거면 무료에  기본설정으로 하면된다

5. 세부사항설정후 오른쪽 Launch instance 클릭 하고 수분 내에 설치가완료된다

6. 설치완료후 본인의 instance가 보일것이다  Instance state Running으로 되어있으면 정상동작하는거다.

7. 기본적으로 우리가보는 gui는 윈도우기반 일것이지만 개발자들은 무료os인 리눅스계열을쓴다

여기는 cmd 명령프롬프트처럼 코드만 보이는게 기본이다 instances 에서 위쪽에 connect를 하면 검은화면에 흰 영어글자만 보인다!

 

자 일단 여기까지가 aws 클라우드 서비스에서 리눅스 os설치 까지이다.(여긴쉽다 읽고 클릭만하면되서)

 

이제는 react-create-app을 설치해야하는데 일단 nodejs 설치가 필요하고 nodejs를 설치하기위해선 curl을 설치해야한다

 

curl : 서버와 통신할수잇는 커맨드 명령어 툴
node js : Chrome V8 Javascript 엔진으로 빌드된 Javascript가 구동되는 환경이다
react-create-app : spa ui를 생성하는 라이브러리입니다.
react  : js ui 인터페이스 라이브러리
vue :  js ui 인터페이스 라이브러리(리액트 설치에 성공햇다면 뷰도한번 깔아보자!)

 

우선 cmd를 써보신분들은 몇번 봣겟지만 명령어를 조금알아야한다.이거말고 뭐많긴한데 일단 간단한거 몇개만 알고 가자

 

ls : 현재 디렉토리 내 파일확인

mkdir 파일명 : 파일명 디렉토리 생성

rmdir 파일명 : 파일명 디렉토리 삭제

cd 파일명 : 파일명 이동

cd .. : 상위 디렉토리 이동

 

위 명령어를 조합해서 테스트용 디렉토리를 하나만들고 curl과 nodejs를 설치하자

 

1. sudo apt-get install -y curl  치면 설치된다 sodo는 접근권한인거같다

2. sudo apt update 버전업데이트

3. sudo apt install nodejs  노드js설치

4. nodejs -v 노드js 버전확인

5. sudo apt install npm  라이브러리 npm설치

 

이제 react-create-app 을설치하자

 

6. sudo npm install -g create-react-app

7. create-react-app -- version

8. create-react-app 디렉토리명

9. npm start  

 

이러면 리액트 웰컴페이지가 떠야하지만 아마 나처럼 안뜨는사람이 많을것이다.

여기서 저는 하루정도 삽질을 하게됩니다.

아래의 내용들중 빠뜨린게 잇으면 공부하고 넘어가면됩니다

 

1. aws route53 도메인구매 (1년치 도메인 5달러에 구입)

2. elastic ip 유동적아이피 공인아이피고정 (과금폭탄주의)

3. security groups inbound규칙 포트번호(보안) - 제일 헤멘구간 문과 열쇠정도로 이해하는게 얼추맞는거같다

https://spidyweb.tistory.com/196

[Network] IP와 Port번호

4. ip란? 공인ip와 사설ip의차이? 

https://velog.io/@hidaehyunlee/%EA%B3%B5%EC%9D%B8Public-%EC%82%AC%EC%84%A4Private-IP%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90

공인(Public) && 사설(Private) IP의 차이점

5. localhost loopback 서버->클라이언트

6. dns개념

 

 

위에 개념을익히고 문제들을 해결후

공인아이피로 도메인을 연결하고 포트번호를 맞추고 npm start 하고나면

본인의 아이피:포트번호를 치면 웰컴페이지가 나올것이다.

처음해보는거라 완벽하게 이해하진 못햇지만 

얼추 기본적인 세팅법은 배운거같다! 

 

다음 도전 과제

- 웰컴페이지 수정해보기 git 연결해보기