이번 시간에는 프론트단(React.js, Vue.js, Angular.js)을 돌릴 수 있는 Node.js 설치와
그다음 React App을 구동해 보겠다
일단 EC2 인스턴스에 Terminal로 접속하도록 하자
혹시 인스턴스가 없는 경우 아래 링크 클릭
https://initstory.tistory.com/89?category=1029330
인스턴스가 있는데, 중지를 한 경우 아래의 링크의 2번까지!!
https://initstory.tistory.com/90?category=1029330
1. Node.js Install
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
위의 코드를 복사한 다음 넣고 enter를 해보도록 한다.
ls -a 를 입력하면 숨김 파일까지 볼 수 있는데, .nvm이 다운로드되어있는 것을 볼 수 있다
. ~/.nvm/nvm.sh
그 파일안에 있는 【nvm.sh】 를 실행시킨다.
nvm install node
그다음은 위의 코드로 Node.js를 설치 할 수 있다
node --version
이렇게 버전확인을 해보면 버전이 나왔는데, 이걸로 설치도 완료했다는 것도 알 수 있다
2. 프로젝트 파일 생성
mkdir test
mkdir <<폴더명>>
위의 코드를 입력해서 파일을 하나 생성 해주자
cd test
그다음 생성한 파일안으로 이동한다
npx -y create-react-app blog
npx -y craete-react-app <<프로젝트명>>
위의 코드를 입력하면 React App이 생성이 될 것이다.
* 이 단계에서 Vue.js 나 Angular.js 를 생성해도 잘 될 것이다.
이런 화면이 나오면 완성된 것이다.
3. Server 실행
npm start
Node.js를 구동시켜 보도록 한다
ENOENT: no such file or directory, open 'hom/ec2-user/test/package.js'
이런 에러가 나왔다
이건 현재 프로잭트 폴더에 【package.js】 라는 파일이 없기 때문이다.
ls를 입력해 보면 프로젝트 앱을 생성하고 그 안에 들어가지 않았다.
cd blog
안으로 들어가도록 한다
프로젝트 폴더 안에는 【package.json】이 있다
여기서 【npm start】를 해보자
【Compiled successfully!】 라고 뜨면 구동이 잘 된 것이다.
4. 동작 확인
localhost:3000 으로 접속을 해볼까?라고 하면 안 된다.
지금 내가 키보드를 두들기고 있는 컴퓨터는 local이 아니고,
인스턴스에 있는 【퍼블릭 IPv4 주소】 이기 때문에, 저 IP주소를 복사한 다음
URL에다가 붙여 넣기 한 다음
:3000 을 추가해 준다. 3000은 Node.js의 Port번호이다
그리고 enter를 눌러보자!
이렇게 간지 나는 React 화면을 확인할 수 있다
다음 시간에는 Git에서 받은 프로젝트로 구동해보도록 하겠다