서버 작업 -> (AWS + Nginx붙이기 과정 설명)
📌[AWS] 사용방법
(✨아래서 다운 받아지는 .ppk파일 잘 가지고 있기!!)
📍step1
1. AWS➡️
2. 루트사용자로 로그인(아래 진행 에서는 마이크로 사용)➡️
3. ec2 클릭➡️
4. 인스턴스 시작➡️
5. 이름만 입력(ex. project)➡️
6. 인스턴스 유현에서 t2.nano or t2.miroco ➡️
7. 키페어 생성(rsa, .ppk선택 되어 있는 상태에서), (이때다운받아지는 파일(.ppk) 꼭 저장하기 중요!!) -> 인스턴스 시작➡️
8. 모든 인스턴스 보기 ->인스턴스 아이디 클릭(실행중이어야 한다) -> (인스턴스 클릭 -> id클릭)➡️
9. 푸티 실행(네이버 클라우드 설치 파일) -> hostname을 ec2_user@로 입력➡️
10. aws에서 퍼블릭 ip주소 복사해서 @뒤에 붙이기(할당받은 주소, 탄력적 ip주소 설정을 하지 않으면 추후 수정을 하면 주소가 바뀔수 있다.)
->connection SSH -> auth에서 private key file...에 아까 다 운 받았던(.ppk) 중요하다고한 파일 선택➡️
11. ssession에 open클릭(or 바로 open클릭) ==> 서버가 켜짐➡️
📍step2
따라하기 참고💡
(2.4부터 참고) - shift + ins : 복사(리눅스 명령에서의 복사)
->위싸이트 참고 해서 켜진 서버 콘솔에 복사 하기(위 싸이트와 현재 진행한느 프로젝트에서 사용하는게 조금 다르다 아래 순서로 진행)
- sudo yum update (complete나오면 성공)
- sudo yum install git
- sudo amazon-linux-extras install nginx1.12
- curl -o- https://raw.githubusercontent.com/nvm- sh/nvm/v0.34.0/install.sh | bash
(이순서로 참고랑 순서가 여기서 부터 조금 다름)- . ~/.nvm/nvm.sh
📢이때 (nvm -v 했을때 example.. 성공)
-nvm install 16.15.1
-📢node -v(버전나오면 성공)
-📢npm -v(버전나오면 성공)
-📢git -v(버전나오면 성공)
📍step3
1. 깃에서 프로젝트 주소 복사
2. git clone 레포지토리 주소
3. cd portfolio_react -> cd client -> npm install
📝간단 설명
(node모튤즈는 용량이 커서 깃으로 가지고 오면 따라 안온다)
(install하면 client에 package.json, dependencies에 있는 것을 자동으로 다운 받아준다)
(npm, yarn -> 패키지 관리하는 역할을 하는 것.(yarn이 더 좋 다 빠 르고 보안이 좋음))
(오류뜨면 yarn설치??) (yarn == npm install이랑 같음)
4. ls 했을때 node_moduls뜨면 성공(client폴더 위치 기준)
📍step4
1. npm run build(client기준)
(📝설명 : 리액트는 브라우저가 읽을 수 없기에(react -> js로 변경 필요) : npm run build가 이역할을 한다.)
(build에 js,css...에 변환된 폴더들이 실제로 올라가게 되는 것이 다.) - 오래걸림
(프로젝트가 크면 안될수도 있음)
->📢확인 : ls에 build가 생기면 -> cd build해서 ls에 index.html이 있으면 성공
📍step5
(💡index.html을 niginx에 연결하는 잡업)
- sudo vi /etc/nginx/nginx.conf
- aaa 하면 아래 insert뜸(수정이 가능하다는 의미) -> server부분 #으 로 전체 주석
- shift + ; -> wq! (저장하고 나가기)
(📢sudo vi /etc/nginx/nginx.conf 한번더 해서 server부분 주석 잘되었는지 확인)- sudo mkdir /etc/nginx/sites-enabled
- cd /etc/nginx -> 📢ls에서(sites-enabled 생기면 성공)
- sudo mkdir /etc/nginx/sites-available -> 📢ls (sites- available생기면 성공)
- sudo vi /etc/nginx/sites-available/###.conf (project로 변 경) ==>📢 ~하고 빈화면 쭉나옴
->(==빈화면에 입력 하면 된다==)server{ listen 80; location /{ root /home/ec2-user/portfolio_react/client/build; (깃허브 레포지 터리 이름 = portfolio_react) index index.html index.html; try_files $uri $uri/ /index.html; } }- esc -> shift + ; -> wq!
- sudo ln -s /etc/nginx/sites-available/임의의이름.conf /etc/nginx/sites-enabled/임의의 이름.conf (임의의 이름 project로 변경)
(ex현재 진행 상황에서의 경우. sudo ln -s /etc/nginx/sites-available/project.conf /etc/nginx/sites-enabled/project.conf)- sudo nginx -t -> 성공 확인
(✏️✏️✏️
위에서 해주어야 하는 작업 누락됨 추가로 해주기 : sodu vi/etc/nginx/nginx.coinf ->
include /etc/nginx/conf.d/*.conf; 아래에
include /etc/nginx/sites-enabled/project.conf; 입력 해주기
-> esc -> shift + ; -> wq!
(에러뜨면 중간에 작업 누락 확인)
)
📍step6
1. sudo systemctl status nginx(서버 상태 확인)
2. nginx서버 키고나서 해당 명령어를 입력 했을때 running라고 뜨면 성공
3. sudo systemctl start nginx (nginx서버키기),
sudo systemctl stop nginx (nginx서버 끄기),
sudo systemctl restart nginx (재실행)
(====여기까지 리눅스 에서 해야 하는 작업 끝===)
📍step7
AWS ➡️ 인스턴스 ➡️ 인스턴스 id ➡️ 보안 ➡️ 보안그룹 링크 클릭 ➡️ 인바운드 규칙편집
➡️규칙 추가 ➡️ 포드범위3000, 소스(첫번째 - anywhere ip4)
➡️규칙 추가 ➡️ 포드범위80, 소스(첫번째)
➡️규칙 저장
➡️인스턴스 ➡️ 인스턴스id ➡️ 인스턴스 퍼블릭 ip복사(할당된 주소) --> url에 입력하면 현재 500오류(권한이 없기 때문에)
➡️리눅스 터미널 에서 chmod 711 /home/ec2-user -> sudo systemctl restart nginx (수정후 항상 재실행)
==>📢할당된 주소로 url에 입력하면 프로젝트 나와야 정상(AWS설정)
📍step8
(추후 필요한 작업 : ++서버연결, mysql연결 필요)
📌[💡부가 설명]
-초기에 마이크로로 설정한 것을 기반으로 이 주소로 접속한 트레픽을 기반으로 나중에 트레픽을 계산해서 청구
(마이크로는 적은 접속으로 리밋이 걸려 있음, 많은 사용자가 접속을 할 수 없다.)
-라우트 : ip를 도메인이름으로 연결 시키는 것 : 원5,000원 정도
-ppk(푸티파일) : 인증키 개념, 잃어버리면 다시 설정해주어야함.
-푸티 : 리눅스 편집 툴
-프로젝트 수정시 : 겟허브에 커밋해서 최신화 해주기 -> git pull origin master -> npm run build -> sudo systemctl restart nginx(안해도 적용될수도 있다, 적용안되면 하기)
📌[💡도메인 구매 방법]
구글 -> 가비아(회원가입) -> https://to2.kr/d8t 참고 해서 구매
🎈도에인 구매 방법 참고 하기
📌현재 필요는 없고 추후에 필요하면 더 공부할 내용!
[✏️ 설정을 해도 퍼블릭 주소 바뀌지X는 설정]
(
다음에 우선 생략
->왼쪽 탄력적 ip(ip주소가 고정이 아니기 때문에 바뀌는 것을 방지하기 위해서, 설정을 해도 퍼블릭 주소 바뀌지X) -> 탄력적 ip주소 할당
)
📌[리눅스 명령어]
파란색 : 폴더
-ls : 폴더 경로(현재 경로(폴더)에서 뭐가 있는지)
-cd 폴더이름 : 폴더 이동
-wq! : 저장하고 나가기
-q! : 나가기(저장X)
-sudo systemctl status nginx(서버 상태 확인)
-sudo systemctl start nginx (nginx서버키기)
-sudo systemctl stop nginx (nginx서버 끄기)
-sudo systemctl restart nginx (재실행)
