Amazon EC2 Linux 인스턴스 호스팅 / 배포 / 리눅스 명령어 정리

 

 

aws Linux back server 생성 - 터미널(sws-back) 연결 - node.js, mysql 설치 

local express 코드 작성 -> github 올리기 

aws back server github에서 코드 clone -> port, mysql pw, 변경 

 

aws front server 생성 - 터미널(front)연결 - node.js, Nginx 설치 

 

 

1. Amazon ec2 리눅스 인스턴스 생성 및 연결 

1) 생성

-> 회원가입 -> 가상머신 시작 -> ubuntu server 20.02LTS 선택 -> 6번 모안 그룹 구성 - http, https 두 개 추가 -> 시작 -> 키페어 생성 (기존 것 사용ok) -> vs 폴더 back 안에 복사, .gitignore 파일로 github에 keypair 업로드 안되도록 설정 

 

2) 인스턴스 연결

-> 진행 중인 인스턴스 체크박스 클릭 -> 연결 클릭 -> ssh클라이언트 가장 마지막 복사 -> vs 터미널에 입력 (이 때 경로 폴더 back** 체크) -> 계정 @ 주소값 나옴 

 

2. Amazon ec2 리눅스 back server에 node.js, mysql 설치 / 환경설정 

1) nodejs 설치 

node -v     // 설치 유무 확인 

sudo apt-get update
sudo apt-get install -y build-essetial
sudo apt-get install curl
curl -sL http://deb.nodesource.com/setup_14.x | sudo -E bash --
sudo apt-get install -y node.js 

node -v    // 잘 설치되었는지 확인 

2) mysql 설치 

mysql     //설치 유무 확인 

sudo apt-get install mariadb-server
sudo apt-get install mariadb-client

mariadb --version // 잘 설치되었는지 확인 

3) mysql 비밀번호 생성 + 최고관리자 외에 다른 계정도 mysql 들어갈 수 있게 설정하기 (user password 비밀번호 변경)

sudo su        // 현재 계정 ubuntu ---> mysql 최고 관리자 root로 변경 
mysql_secure_installation    /// -> 질문에 모두 y 입력
exit              // 나오기 

mysql           // mysql 잘 설치되었는지 확인 -> 입력창이 MariaDB[(none]] 으로 변경됨 
use mysql      // mysql db로 입장  
show tables                                             // 모든 자동 생성된 테이블이 쮺 나옴 (user 도 있음!) 
set password for 'root'@'localhost' = password('root');
select user, host, plugin from user;                //  plugin 내용이 'mysql_native_password' 인지 쳌
flush privileges;                                         // 마지막 명령어 입력 
ctrl + c          // root 계정에서 나가기 
exit               // mysql에서 나가기 

mysql -uroot -proot        // 마지막으로 접속 가능한지 확인 ! ** -> 오류나면 무언가 안된 것 ! 

 

 

 

3. 리눅스 server에서 쓸 코드 local server express에서 생성 -> github 올리기 

코드 구현 불편함으로 인해 locad PC server  -> GitHub upload -> Linux server clone 해서 사용하기 

1) 새로운 파워쉘 (name:local_back) 만들기 

2) vs 터미널 경로 - back 폴더, 파워쉘- local_back 에서 아래 명령어 실행 

npm init
npm i express 

3) server.js 파일 생성 / 코드 작성  -> node server.js 실행 -> 브라우저 잘 send 되었는지 쳌 

const express = require('express')
const app = express()

app.get('/', (req,res)=>{
    res.send('Hi Utan')
})

app.listen(3000,()=>{
    console.log(`server start port : 3000`)
})

4) 터미널 back 폴더 경로 들어온 상태에서 git upload ( ** key pair & node_modules 꼭 .gitignore에 담기 ** ) 

 

 

 

 4. gitHub -> 리눅스 server로 클론 clone 해오기 -> 서버 실행 

1) 터미널 파워쉘 aws-back으로 돌아가기 -> git clone

cd ~ 
git clone [git repo 주소]
pwd     // hom/ubuntu 나오는지 확인 

2) npm install 

cd [파일명]     //해당 파일로 들어가기 (git clone해온 repo name)
npm install 
ls -al             //현재 상태 체크 -> node_modules 잘 생성되었는지 확인 

3) 포트 넘버 변경하기 (해당 파일 들어가 있는 상태로) 

vi server.js      //  파일 보기 (or 파일명없으면 생성) 
i                   // 에디터 열기 -> 3000 -> 80으로 수정 (리눅스의 http port 80이었다 ! ) 
shift + : wq!    // vi 나가기 

4) 리눅스 server 실행  (경로 : clone해온 파일 안에서 해야함. server.js 는 그 안에 있음 ! ) 

sudo node server.js

 

 

 

 5. aws 리눅스 서버 백그라운드에 돌리기  & 모니터, 중단 방법 (1) by 리눅스 명령어  

1) 터미널 파워쉘 aws-server  선택 / 아래 명령어로 경로 설정  

cd ~
ls
cd [해당 클론된 파일로 들어가기] 

2) server & 를 붙여서 실행 --> 리눅스 서버가 백그라운드에서 계속 돌아간다. (다른 작업 가능) 

sudo node server.js & 

3) 실행중인 server 끄기 

ps -ef                          // 현재 실행 중인 파일 확인
sudo kill -9 [PID 숫자]     // ps -ef 에서 확인한 PID 숫자로 해당 프로세스 종료 

 

 

 

 6. Local server (3000)  &  aws 리눅스 서버 백그라운드 돌리기 실행, 모니터, 중단, 삭제 - 방법 (2) by package pm2  

1. Local server 백그라운드 돌리기

터미널 파워쉘 local-back 이용 

1) pm2 설치

npm i pm2 

2) package.json 수정 

{
  "name": "back",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "pm2 start server.js"            // < --------------수정
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1",
    "pm2": "^5.1.0"
  }
}

3) 서버 실행, 모니터(실행 중인 것 확인), 중단, 삭제하기 

npx pm2 start server.js
npx pm2 monit 
ctrl + c                  // monit 에서 나가기 
npx pm2 stop server
npx pm2 kill 

 

 

2. AWS Linux Server 백그라운드 돌리기 

터미널 파워쉘 : aws-back / 경로 back 

1) server.js 가 있는 폴더(gitHub에서 가져온)로 들어가기 

cd ~ 
ls
cd [파일명]

2) pm2 다운 받기 

sudo npm install -g pm2 

3) 실행시켜보기

sudo npx pm2 start server.js

4) 실행 명령어 짧게 만들기 ->  package.json 파일에서 start 부분 수정

vi package.json
i 
"start":"sudo pm2 start server.js" 로 수정

5) AWS server 실행시키기 

npm run start 

6) 끄기  / 삭제하기 

sudo npx pm2 stop server     // 중단 시키기
sudo npx pm2 kill                // 삭제하기 
sudo npx pm2 list                // 현재 상태 쳌

* npm pm2 list    -> list 다시 보는 명령어 

 

 

 

 

 7. mysql DB 연결하기  

위의 6번단계까지의 vs 폴더 back 에서 sequelize db 연결하고 restful api 를 작성하면 됨 !

일단 지금은 github에서 clone해오기 

* mysql 은 local pc & Linux 서버에서 각각 분리되어 있다. 

 

0) express github 클론 및 기타 설정

local-server 파워쉘에서 github 파일 clone + key pair & .gitignore 복붙 + npm install + config - config.json mysql 비밀번호 나의 local PC msyql 비밀번호와 일치한지 체크 + node server.js 서버 실행 

=> local host mysql db 연결은 원래 express 하는 것처럼 똑같이 ㄱㄱ ! 

 

** 파워쉘 aws-back 아래 1 ~ 7번을 다 하고나서 local-server 파워쉘에서 코드 gitclone 을 해왔는데 그 상태에서 aws-server 는 그대로! 다시 수정할 필요가 없었음 

 

1) 리눅스 db 설정 

-> 터미널 파워쉘 aws-back 선택 -> 리눅스 연결 by ssh 

local server express 를 sequelize db 연결된, 라우터가 되어있는 코드를 가져오기 

cd ~    // 현재 디렉토리에는 위에서 가져온 기본 express 코드 파일 clone해온 폴더도 있는 상태
git clone [AWS_back_router_with_sequelize_db]    //<- github 주소  
ls        // 잘 가져왔는지 확인 
cd [폴더명]   
npm install   // install all the packages 

2) 기존에 있던 github에서 clone해온 폴더 삭제

rm -rf ./파일명 
or 
rm -rf /home/ubuntu/파일명          

3) 가져온 파일 server 리눅스로 실행 시키기  (지금 요 파일은 pm2 가 설정안되어 있음)

node server.js       // 오류 

ERROR   -> 새로 clone 해온 express server의 mariaDB database  (cnofig파일에서 설정한) react_comment 가 아직 리눅스에는 없음 -> 생성해주기 

 

4) mysql DB 생성

mysql -uroot -proot
create database react_comment;
show databases;    // db생성 잘 되었는지 쳌 
ctrl + c                // 나가기

5) express mysql 비밀번호와 리눅스에서 설정한 mysql 비밀번호가 다른 경우 수정 

cd config
vi config.json
i         // -> insert mode로 바꾸고 password 수정
esc
shift + : wq! 

6) 리눅스 port : 80으로 설정하기  (server.js 가 있는 폴더로 들어간 상태에서) 

cd ..
vi server.js
i      // 포트 3001 -> 80수정
esc
shift + : wq! 

7) 리눅스 server 실행 

node server.js           //   -> 오류 최고 권한자만 서버 실행 
sudo node server.js    //   -> 실행 성공 

 

8) mysql DB 결과 확인

 

local pc msyql

브라우저 localhost:3001/api/comment로 들어가보면 내 local PC mysql 에 react_comment DB 안 comments table 내용이 json 형태로 쭉 나옴

 

리눅스 mysql 확인 

 브라우저에서  리눅스 public IP 주소/api/comment 로 들어가보면 [] 출력됨 postman에서 publicIP/api/comment POST으로 정보 넣어보기  -> 입력한 정보가 json으로 출력된다.

=> 리눅스 mysql react_comment db -> Comment table 보면 postman에서 POST한 내용이 들어가 있다. 

postman 사용방법

 

 

 

 

지금까지 한 내용 : aws Linux server 와 local server 환경 설정 , 각각 코드 맞춰 작성, clone, 수정 , mysql 설정 

 

 

 

 

 

 8.  amazon AWS Front-server 구축하기 - node.js, NginX 

1. Amazon ec2 새 인스턴스 생성 (이름 : front3) 

2. vs 터미널 파워쉘 front 생성 + 경로 front까지 들어오기

3. ssh 복붙 -> aws - front server 연결

4. node.js 설치 (aws-back-server에 설치한 절차와 같음)

node -v     // 설치 유무 확인 

sudo apt-get update
sudo apt-get install -y build-essetial
sudo apt-get install curl
curl -sL http://deb.nodesource.com/setup_14.x | sudo -E bash --
sudo apt-get install -y node.js 

node -v    // 잘 설치되었는지 확인 

5. NginX 설치 및 sites-available & sites-enabled폴더들의 

1) 백업폴더생성 

2) default 파일 삭제 

3) available 안에 설정 파일 생성

4) Symbolic Link 만들기 ! (바로가기) 

5) nginx 실행 시키기 

sudo apt-get install nginx   // NginX 설치 

sudo cp -r /etc/nginx/sites-available /etc/nginx/sites-available-backup
sudo cp -r /etc/niginx/sites-enabled /etc/nginx/sites-enabled-backup
ls -al        // 잘 생성되었는지 확인 

cd sites-available    // default 파일 각각 삭제 
ls -al
sudo rm default
cd ..
cd sites-enabled
ls -al
sudo rm default
cd ..

cd sites-available      
sudo vi myapp.conf       // myapp.conf 라는 파일 생성 
i                                // 에디터 열고 아래 코드 작성
esc                             
shift + : wq! 

                                // 바로가기 만들기 = Symbolic Link (경로 위치는 상관없음 / 가 절대경로라서!) 
sudo ln -s /etc/nginx/sites-available/myapp.conf /etc/nginx/sites-enabled/myapp.conf     
 
cd sites-enabled 
ls -al                          // 바로가기가 잘 만들어졌는지 확인 
sudo nginx -t               // successful 나오면 성공 ! 

sudo systemctl start nginx 

 

* sites-available > myapp.conf 파일에 작성하는 코드 ↓↓

 

 

 

<- www 라는 폴더의 경로 잘 봐두기 ! 저 경로에 www라는 폴더를 만들 예정, 그 안에는 index.html을! 

 

 

 

 

 

 

 

 

front 터미널 파워쉘에 연결한 aws front server public IP 로 브라우저 입력하면 아래와 같이 나온다.

 

 

6) myapp.conf 적은 경로대로 www폴더, index.html 파일 만들기 

cd ~
mkdir www    // 폴더 생성
ls                 // 폴더 확인
cd www     
vi index.html
i                  // 'hello nginx' 작성 
esc
shift + :wq! 

sudo systemctl restart nginx  // restart 하기 
ps -ef | grep nginx              // nginx 잘 돌아가는지 확인 

-> 다시 front-server public IP에 들어가보면 'hello nginx' 가 출력된다. 

지금 front 에 연결된 파일은 아무것도 없다 

<- 딱 요 상태 ! 이제 리액트 댓글 만들어놓은 코드를 가져올 예정 

 

 

 

 

 

 

 

 9. front server에 리액트로 만든 댓글창 코드 가져오기 

1) local-server 터미널 창, 경로 back, front와 동등한 위치에서 git clone 해오기

https://github.com/ingoo-code/webpack5.git

2) 가져온 코드에서 왼쪽 5개 먼저 복사, front폴더에 붙여넣기 

 

 

 

 

 

 

 

 

 

 

3) index.jsx 파일 수정

import React from 'react'
import ReactDOM from 'react-dom'
//import App from './components/App'
import './css/example6.css'

const App=()=>{
    return(
        <>
            hi 리액트
        </>
    )
}


ReactDOM.render(
    <App />,
    document.querySelector('#root')
)

4) package 다운로드 (터미널 경로 front 폴더로 들어간 상태에서) 및 실행시켜보기 

npm install
* npm install 중에 @pmmmmwh관련 ERROR 나면 아래 명령어 입력
-> npm install -D @pmmmwh/react-refresh-webpack-plugin --save --legacy-peer-deps

npm run dev   // 웹팩 실행하기 ----> localhost:8080 들어가보면 hi 리액트가 나온다. 

5) 웹팩 build 빌드하기 ----> dist 파일 생성됨 (index.jsx 의 모든 내용 + import된 내용이 dist/app.js로 압축된다) 

npm run build

-> webpack.config.js 의 환경 설정 안에 ReactRefreshWebpackPlugin이 있어서  code: 'ERR_INVALID_ARG_TYPE' ERROR가 났었다. 배포용일 때는 주석처리 or 제거하기 -> 다시 웹팩 빌드 -> 성공

https://blckchainetc.tistory.com/287

[webpack error] code: 'ERR_INVALID_ARG_TYPE'

npm run dev 

-> ERROR

이번엔 브라우저 localhost:8080에서 $RefreshSig$ is not defined 에러가 났다 -> webpack.config.js에서 refresh 주석처리 -> 브라우저에 내용이 잘 뜬다!

https://blckchainetc.tistory.com/288

[webpack ERROR] $RefreshSig$ is not defined

 

 

 

6) index.jsx  -> App 주석처리한거 다시 살리고 component 폴더도 git clone해온 폴더에서 복붙 

import React from 'react'
import ReactDOM from 'react-dom'
import App from './components/App'
import './css/example6.css'


ReactDOM.render(
    <App />,
    document.querySelector('#root')
)

-> npm run dev 실행 -> localhost:8080에 나옴 

 

 

 

 

 10. front>comment>api>api.jsx  get 요청 url -> aws back server public ip로 수정  

웹팩으로 실행한 localhost:8080에는 index.jsx의 내용이 출력된다. (지금은 댓글 내용) 근데 댓글의 내용을 mysql에서 가져오는 fetch(aws-back -server-public -ip   /api/commnet) 로 설정이 되어 있다. 지금 fetch 뒤에 aws back ip를 넣고 이거를 웹팩 리액트 쪽으로 잘 가져오게 만는 것 

React (fetch(aws-back-server/api/comment)) --> localhost:8080에 출력 

 

 

1) 댓글 창에 mariaDB 내용이 나오도록 설정해야함 (aws back server 안에 있는 mysql 내용) 

export const getComment = async (dispatch) => {
    dispatch({type:'GET_COMMENT'})
    try{
        const response = await fetch('http://3.14.11.147/api/comment')   // aws back server ip
        const data = await response.json()

        const result = data.map( (v,k)=>{
            return {...v , date:v.updatedAt.substr(0,10) }
        })

        console.log(result)
        dispatch({type:'GET_COMMENT_SUCCESS',payload:result})
    } catch (e) {
        dispatch({ type:'GET_COMMENT_ERROR',payload:e })
    }
}

-> ERROR     localhost:8080? 과 ec2의 ip가 서로 달라서 생기는 오류 -> cors 설치 

 

2) aws back server에 cors 설치하기 

aws back 파워쉘 back 폴더로 입장 -> aws back 리눅스 연결 

npm install cors
cd [aws back (github에서 가져온 server.js가 있는 부모 파일]
vi server.js                // cors 관련 코드 두 개 추가 

aws back server 실행 명령

sudo node server.js
         or
sudo npx pm2 list                    // pm2로 돌아가고 있는 서버 확인 
sudo npx pm2 start server.js       // pm2로 서버 실행 

localhost:8080

aws back server public ip  (aws back 리눅스 mysql의 내용 나옴) 

 

만약 리눅스 mysql db에 아무것도 없으면 안나온다 그럼 아래 명령어로 db 쳌 + 생성 + postman으로 post 해보기 

파워쉘: aws-back-server

mysql -uroot -proot
use react_commnet;
select * from Comments;

 

 

 

 

11. Nginx 설정 수정 -->  aws front server ip (or 도메인) 에 React 띄우기  

다 잘 작동되는지 확인 

1) front 파워쉘 - cd front - npm run dev 실행 

2) aws back 파워쉘 - ssh 연결 

3) local back 파워쉘 - npx webpack 실행 --> index.html 라이브서버로 켜보기 -> 잘 나오는지 (build 잘 되었는지) 확인

 

 

이제 nginx myApp.conf 파일에 설정한 www/index.html ----> webpack App.js로 변경하기 

4) front 파워쉘 (ubuntu 아님*local front) -> cd front -> github 올리기 

5) aws-front 파워쉘 (ubuntu ) -> github clone 및 www -> clone해온 github 저장소 이름으로 바꾸기 

cd ~
ls   // 현재 www만 있음 
git clone [github 주소]
ls
cd [git clone해온 폴더]
ls    //  front 파일들 다 있음    ----> 방금 다운한 저장소 이름 외워두기 ! 

cd /etc/nginx/sites-available
sudo vi myapp.conf 
i    // www 부분을-> github clone해온 파일명으로 수정  & index.html 은 파일 명이 같아서 수정 불필요
esc
shift  +  wq! 

6) 실행하기 

sudo systemctl stop nginx
sudo systemctl start nginx
sudo systemctl status nginx  //  active(running) 확인 

7) aws-front public ip 들어가보기 

지금 aws-front 연결 상태에서 react파일 git clone 해왔고 해당 파일을 aws-front nginx 파일로 설정함. -> aws-front ip 를 열면 localhost:8080에서 나온 것처럼 댓글들이 쭉 나온다.

aws-front ip에 /api/comment 안해도 되는 이유 : localhost:8080만 키면 바로 댓글 창 나온 것처럼 myApp.conf에 index.jsx 로 설정해놓음. -> ip만 쳐도 해당 내용들이 나온다. 

* aws-back : sudo node server.js 실행  / aws-front도 server 켜져있어야함 (명령어 위에 있음) 

 

aws-front public ip

aws-back public ip /api/comment

aws-back public ip/api/comment에 나온 결과물을 react의 api.jsx에서 fetch해와서 넣어야하는데 ERROR ,,, 

 

 

 

 

---

<지금까지 한 내용 >

 

Local back server & aws back server

 

-> aws Linux back server 생성 및 연결

-> local server 작성

-> github에 코드 올리기 

-> asw Linux back server clone해오기 및 환경설정 (node.js, mysql, pm2)

* pm2는 local, aws 둘 다 해주기 

-> local server & Linux server 각각 mysql 설정(비번, port, etc)

 

출력 상태 : 

=> aws-back public ip/api/comment -> 리눅스의 파일들 중(local에서 clone한) 라우터 안 api/comment 의 get을 출력 -> 리눅스 mysql 의 내용 출력 

=> Localhost:3001/api/comment   -> my PC mysql 의 내용 출력

 

 

AWS front server & React Webpack front server

 

-> aws Linux front server 생성, 연결 및 환경 설정 (node.js, nginx)   

=> aws-front public ip -> myapp.conf/index.html 의 내용 출력 

-> aws linux front server 리액트 댓글 웹팩 복붙 및 build / npm run dev

=> localhost:8080에 리액트 댓글창 출력

 

 

명령어 실행

Local server : node server.js    ( webpack 실행 시 -> npm run dev) 

aws Linux back server :  sudo node server.js (pm2 실행 시 -> npx pm2 start server.js)

aws Linux front server : sudo systemctl start nginx 

 

 

---

 

 

< LINUX 리눅스 명령어 >

리눅스 명령어
cd ~	/home/ubutu 로 이동
cd /	최상위 디렉토리로 이동
pwd	내 경로 보기
ls	현재 디렉토리 보기
ls -al	현재 디렉토리 모두 보기 (숨겨진 것들도!)
ls --help	사용방법
vi	파일 보기 or 파일 생성 (없을 경우)
i	vi 파일 보는 상태에서 편집 모드로 전환
esc	vi 파일 view 편집 모드에서 나오기
shift + :    wq!	vi 파일 편집 후 저장하고 vi view에서 나오기
shift + :    q!	vi 파일 수정된 부분 저장하지 않고 vi view에서 나오기
mkdir [폴더명]	폴더 생성
cp -r(옵션) [기존 디렉토리] [변경할 디렉토리]	파일 or 폴더 복사
mv [옵션] [기존 디렉토리] [변경할 디렉토리] ex) mv ./test.txt ./sample/test.txt    (test.txt를 sample 폴더 안에 이동)	파일 or 폴더 이동
ln [옵션] [기존 디렉토리] [바로가기 만들 디렉토리]	파일 or 폴더 바로가기 만들기
ps -ef	현재 실행 중인 파일 확인
sudo kill -9 [ps -ef 로 본 PID 숫자]	실행 중인 파일 삭제
cat [파일명]	해당 파일의 결과물 출력 (vi보다 편리)
exit	ubuntu 리눅스 초록계정 터미널에서 나가기
Options
-r	하위 폴더 포함
-f	강제 실행  **사용 시 주의 ex) rm -rf /  --> 전부 날아감
-rf	하위 폴더 포함 강제실행
|    (파이프라인)	앞에 쓴 내용 결과물을 바꿔줌
NginX 관련 명령어
sudo systemctl start nginx	nginx 실행시키기
sudo systemctl stop nginx	nginx 중단시키기
sudo systemctl restart nginx	nginx 재실행시키기
sudo systemctl status nginx	nginx 상태 보기
ps -ef | grep nginx	nginx 잘 돌아가는지 확인
sudo node server.js	Linux server 실행
ps -ef	Linux server 실행 중인 프로세스들 나오기
sudo kill -9 [pid 숫자]	해당 프로세스 삭제

 

 

 

 

---

 

 

 

 

https://blckchainetc.tistory.com/274

[89일차] Amazon AWS 웹서버 구축 / 호스팅/ 배포 설정 비용

https://blckchainetc.tistory.com/277

[ 90일차 복습1 ] Amazon AWS 리눅스 백그라운드로 서버 돌리기 / Node.js 에서 pm2 사용하기

https://blckchainetc.tistory.com/280

[91일차 복습] postman API CRUD / aws back server 올리기 / front server Nginx 설치 및 환경설정

https://blckchainetc.tistory.com/281

[Front server] NginX 란? Amazon Aws NginX 설치 및 기본 환경설정 세팅하기

https://blckchainetc.tistory.com/283

[92일차 복습] front + back React Webpack aws server로 가져오기

https://blckchainetc.tistory.com/286

[94일차]20210723 front server 연결 / Next 설치