[100일차] Next 배포 방법 / https 도메인 연결

 

 

 

프론트 서버 amazon ec2 사용 올리기

 

1 대의 pc에서는 똑같은 port no를 사용할 수 없다. 

ex) server.js 두 파일 모두 port:80 이라면 -> 에러

 

오늘 올릴려는 환경 : Next.js (React로 만들어진 프레임워크) 

우리는 React 배포는 해봤음

 

React와 Next 다른 점 : 

Next 사용 이유 : SSR이 가능하기 때문 (express와 같은 서버가 존재 - db접속과 같은 용도가 아닌 코드를 실행시켜주는 서버) 

리액트의 경우 배포할 때 server가 필요했었다 -> NginX (웹서버)

'/'  NginX 가 요청을 받음 -> /home/ubuntu/[git 저장소명]/index.html 

NginX 가 할 수 있는 기능은 모두 express에서도 가능! 

리액트 특성상 index.html 하나만 열어놔도 나머지 pages 볼 수 있다. - single page application 이라서! 

run dev -> 개발서버 돌리기 

 

 

Next만 사용했을 때 (실무에서는 이렇게 안씀. 그냥 눈으로 확인해보기) 

Nginx가 할 수 있는 서버를 가지고 있는게 = next 

package.json. 의 scripts 를 보면 dev 

build - build하겠다. 

start - server로 실행해보겠다. 

NEXT도 하나의 서버가 돌아가는 것과 같다. 

 

오늘 요 NEXT 80번 포트로 올려보기 

local에서 text 해보기 

1. build 

2. 웹서버 실행 

 

 

 

 

 

 

 

 

 

 

1) front 터미널 - amazon ec2 fron 리눅스 연결 -> 초록색 글자 나오게 ! 

 

PEM 파일 퍼미션 에러 

https://techsoda.net/windows10-pem-file-permission-settings/

윈도우10 SSH 접속시 PEM 파일 퍼미션 에러 해결방법 - 테크소다

 

2) 해당 front코드 github에 올리기

 

3) Local에서 build -> 웹서버

터미널 -> front (ubunto 말고 !)  상태에서 build 하기 

build 명령어 두 가지 
npm run build // 요게 되는 이유는 package.json 설정 했음 
or
npx next build   // 원 구문 

 

오류 나면 ? 

이유 1 : pages 폴더 안에 파일 중 내용이 아예 없는 파일이 있다면 오류

이유 2 : 오타 / 잘못 불러옴 

 

 

4) 실행하기

npm run start 

 

port 3000으로 나옴 (default) 

 

 

5) port 바꾸기 

package.json 

next start -p 80 으로 수정 

npm run start

 

 

localhost 만 입력해보면 blog 나옴 

 

 

 

이제 aws에서 build해서 실행 시키기 

 

 

6) local server 종료 / github에 수정한 것 다시 push 

왠만하면 .next 는 gitignore 해놓기 

아까 .next도 이미 github에 올려서 지금 gitignore에 적어도 계속 트레킹 됨 

 

↓ cache 지우고 다시올리기 

https://blckchainetc.tistory.com/273 

[GitHub] .gitignore 가 안될 때 / git에서 해당 파일의 변화를 감지하고 트래킹할 때 멈추게 하는 방법

 

 

 

 

7) 리눅스 터미널에서 실행하기 

리눅스 터미널 경로 -> git clone [저장소 주소]

cd [저장소 명] 까지 들어가기 

 

git clone [저장소 주소]
cd [저장소 주소] 
npm install
npm run build
npm run start ----> permission 오류 
sudo npm run start ----> 여기서 오류 나옴 Error: listen EADDRINUSE: address already in use 0.0.0.0:80

 

이유 : Nginx에서 80port 가 실행되고 있어서 ! 

 

nginx 끄기 

sudo systemctl stop nginx
sudo ststemctl status nginx
sudo npm run start 

 

amazon ec2 public ip 주소 확인 -> localhost로는 안나옴 - 지금 연결한건 리눅스라... 

 

=> 지금 nginx 서버 80을 끄고 next 80 서버를 킴 

 

여기까지가 next의 배포 방법 

 

 

 

 

 

 

 

 

 

 

 

 

vi package.json
i -> 3000 -> 3001로 변경 

 

 

next server도 백그라드에서 돌아가야함 (예전에 pm2 한 것처럼!) 

& 를 붙여도 되고 pm로 해보기 

 

ubutn 터미널 git clone 해온 [저장소명] 들어간 상태에서 

npm install pm2

파일이 아닌 명령어를 실행시키는 것 

파일명이 없음 

여기서는 아래 명령어로 실행 

npx start pm2 npm -- start 

3001은 다른사람 접속을 허락한 적은 없음 

 

=> next 80 ---> 3001까지 변경 완료 

 

 

 

 

nginx ----> next로 보내기 

cd /etc/nginx/sites-available
ls          - myapp.con파일 있는지 확인
sudo vi myapp.conf          - 관리자권한으로 수정해야함 // 아래 코드 
i          - location부분 싹 지워주기 
esc
shift +  : + wq! 

sudo systemctl start nginx       
sudo systemctl status nginx -> 확인 

도메인 없으면 public ip주소로 들어가서 확인 

 

 

도메인 있는 경우 

 

 

 

https : port 443 

일반적으로 port 80처럼 쓰는게 아니라 '인증서' 필요 / '발급' 필요 / 유료- 3개월짜리 무료가 있음

인증서 : text로 된 key값 

브라우저에서 80으로 요청해도 https로 되도록 만들기 (redirect사용) 

 

 

https 세팅하기 

 

1. 인증서 발급하기 

2. 인증서 토대로 nginx 세팅 

 

certbot 툴을 사용해서!

인증서 발급 받을 수 있는 툴 설치하고 우리가 사용하는 서버 프레임워크를 뭔지만 알려주면 알아서 세팅해줌 !

 

최신 버젼 : https://certbot.eff.org/

옛날 버젼을 보게되면 무시하자 -----> wget https://dl.eff.org/certbot-auto

 

 

설치하기 (인증서 유효기간 : 3개월) 

sudo snap install certbot --classic
sudo certbot --nginx         // -인증서 가져오기 & nginx 안에 있는 내용을 자동으로 세팅해줌 
---> email 입력 / y 두번 / 도메인 입력 

 

->  /etc/nginx/sties-available/myapp.conf 의 내용이 수정되어 있음 ! 긴 코드가 쭉 생김 

 

 

서버를 껐다 다시 켜주기 

sudo systemctl restart nginx 

 

https 로 바뀜 ! 

자물쇠 누르고 인증서 유효 누르면 유효기간이 나옴! 

3개월마다 계속 발급 받아야함 

 

자동으로 인증서 발급 받도록 세팅하기 

sudo certbot renew --dry-run   

 

** 2021.08.18 실제로 어플 배포를 해보며 certbot 인증서 발급 및 자동갱신 중 ! 

 

sudo certbot renew --dry-run     // -> 나의 인증서가 자동갱신이 가능한 인증서인지 확인해줌
(sudo) certbot renew             // -> 지금 갱신하기 
sudo certbot certificates         // -> 인증서 정보 , 만기 날짜를 알려줌 

 

Crontab 크론탭이라는 프로그램이 ubuntu에 기본 설치되어 있음! 요걸 사용해서 3개월 주기로 자동 갱신되도록 만들기 

sudo crontab -l           //crontab 보기 
sudo crontab -e          // crontab 편집
view /var/log/syslog     // crontab 실행 로그 

Crontab 의 규칙

분/시/일/월/요일/명령 순서

 

예시) 매월 1일 18시에 인증서를 갱신하고 싶을 때 

$ 0 18 1 * * /usr/bin/certbot renew --renew-hook="sudo systemctl restart apache2"

-> 우리는 아파치 안씀! -> nginx로 

 

 

 

 

 

cd /etc/cron.d    
ls -al            // -> certbot 파일이 있는지 확인 ! (아마 없을 것.. -> 만들기 vi) 
sudo vi certbot    //앞에 etc 여서 관리자로 실행  --> 아래 내용 입력 

SHELL=/bin/sh
PATH=/user/local/sbin:/user/local/bin:/sbin:/bin:/user/sbin:/user/bin
0 */12 * * * root certbot -q renew --nginx --renew-hook 'service nginx reload'

 

실제 사용한 것

 

 

예전 것 (연습용)

 

 

자세한 내용은 위의 웹사이트가서 readme 잘 읽기

 

 

 

 

 

 

** 리눅스 

 

drwxrwxr-x
d--x--x--x-

 

r: 읽기 (4)

w: 쓰기 (2) - 누군가가 쓰는게 가능한가

x:  실행 (1) - 누군가가 실행이 가능한가

 

 

d rwxrwxrwxx 

첫 번째 d = 디렉토리 or 파일

두 번째 ~ 끝에서 첫번째[-1] = 권한 (3자리씩 끊기)

 

rwx rwx rwx 

유저, 그룹, 다른사람들 (클라이언트)

 

유저 : 리눅스 사용자 (ubuntu) 

그룹 : 속한 곳클라이언트 : 보통 '쓰기(2)' 권한을 주지 않음 

 

권한바꾸기 - chmod (최고 관리자만 가능)