0805 Next 배포 + https

 

0805

Next 빌드해서 올리는거

https 까지 하는거 - 보안을 위해서

 

local_front

aws_front

 

front 폴더를 github에 올려준다

 

aws_front 에서 ubuntu 계정을 열어준다

ssh -i "hyejun-laptop.pem" ubuntu@ec2-3-34-51-137.ap-northeast-2.compute.amazonaws.com

 

한개의 PC에는 한개의 포트만 사용가능

 

우리가 하려는거는 Next.js

express 같은 서버가 하나 존재함.

 

Nginx 는 하나의 웹서버임

# Nginx

- 80번 포트로 실행했고 /home/ubuntu/[git저장소이름]/index.html 을 열어달라고 한다.

특정 파일을 열어줄 수 있게끔 해준다.

 

# Next

package.json 

scripts dev

Next도 하나의 express 서버와 같다고 보면 된다.

Next 를 80번 포트로 올려보는게 목적

 

# Local

1. 빌드 

npm run build   - package.json 에서 build : 'next build'를 처리해줬기 때문에 된다. 

npx next build  - 원구문

둘 다 가능

 

만약 build 가 안된다면

/pages 안에 있는 jsx 파일 중 에러가 있는지 혹은 빈 파일이 있는지 확인해보자

오류를 수정하고 나면 build 를 다시해보면 된다.

 

2. 웹서버 실행 - port 80 !== npm run dev

npm run start

npx next start

둘 다 가능

80번으로 포트 바꾸기

package.json으로 가서

"start": "next start -p 80",

하고 npm run start

크롬으로 가서 loaclhost 까지만 쳐도 나온다.

 

다시 서버 끄고

github에 올려보자

[.gitignore]

/node_modules

/hyejun-laptop.pem

*hyejun-laptop.pem

*.next

이렇게 올리고

aws_front 가서

 

pwd 확인하고

/home/ubuntu

git clone https://github.com/hyejjun/ReactNext.git

하고 ls 하면

ReactNext [=원격저장소] 가 나온다.

cd ReactNext 로 디렉토리를 만들어준다.

 

npm install

npm run build

npm run start

 

순서대로 실행

 

sudo npm run start

-80번 포트를 쓰고 있다는 오류가 난다면

 

sudo systemctl stop nginx

하고 다시 

sudo npm run start

 

크롬으로 와서 주소창으로 들어간다

front 의 ip 4 주소를 넣어서 들어간다 3.34.51.137

 

여기까지는 http 이고

https 는 433 port 라서 따로 바꿔줘야 한다.

인증서 필요함

- 인증서 발급 받아야함

https 는 유료임 - 3개월 짜리 무료가 있음!

client  Nginx   Next

80      433     80->3001

 

80 번 포트를 433 으로 리다이렉트를 해준다.

ubuntu@ip-172-31-1-139:~/ReactNext$ vi package.json

80을 3001로 바꿔준다.

 

pm2

서버를 두개 돌릴거라서

next 서버도 백그라운드에서 돌아가야 한다.

 

~/ReactNext 안에서

npm install pm2

 

# pm2 시작할때

- sudo npx pm2 start server.js

node server.js

 

- npx pm2 start npm -- start

npm run start

 

# nginx 환경설정

cd /etc/nginx/sites-available

ls 치고

파일 중 myapp.conf 파일이 존재하는지 확인

myapp.conf 를 수정해야한다.

sudo vi myapp.conf

 

server {

 

    listen 80;

    location /{

        proxy_set_header HOST $host;

        proxy_pass http://127.0.0.1:3001;

        proxy_redirect off;

    }

 

}

 

하고 nginx 서버 켜보자

sudo systemctl start nginx

sudo systemctl status nginx

 

도메인 연결했던 분들은 http://도메인

안했다면 http://퍼블릭ip주소

* 도메인 연결하신분

- sudo vi myapp.conf

loaction 위쪽에

server{

    listen 80;

    server_name hyejun.co.kr;

    proxy~~

    ...

} 

 

sudo systemctl restart nginx 

해줘야 한다.

 

# 인증서 발급

동시에 nginx 세팅 같이함

 

certbot -> 어떤 회사가 만들어 놓은 툴이다.

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

알아서 다 세팅해준다.

 

1. certbot 설치해야한다.

# 옛날거니까 이거는 안되는거임!

- wget https://dl.eff.org/cerbot-auto

 

# 현재 버전 가능함

cd ~ 에서 깔자

$ sudo snap install certbot --classic

$ sudo certbot --nginx          // 인증서 가져오고 nginx 있는거 자동적으로 세팅해줌

1. email 을 입력해라

hjlee9725@gmail.com

2. 약관 동의 같은게 두번 나옴

3. DNS 관련된 내용이 나옴 - 만약 거기서 도메인이 나왔다면 1 누르고 엔터

 

# 도메인을 할거다?

$ sudo certbot --nginx 다시 하고 

sudo vi /etc/nginx/sites-available/myapp.conf

보면 뭔가 추가된게 있을거임

sudo systemctl restart nginx

로 서버 다시 실행시켜줌

 

# 3개월 마다 인증서 발급 자동으로 받는거 세팅

$ sudo certbot renew --dry-run

 

하면 successful 이 뜨면 된거임!

 

$ cd /etc/cron.d 여기로 이동

$ ls

certbot 이라는 파일이 존재하는지 확인

없으면 만들어야함

$ sudo vi certbot 

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 ngnix reload'

저장하고 나감

 

다시 cd [레퍼지토리] 로 돌아옴

 

# 이미지가 안나온다면?

ls -al

.next 앞에 부분에 뭐라고 적혀있나?

drwxrwxr-x   5 ubuntu ubuntu   4096 Aug  5 01:52

만약 앞에가 drwxrwxrwx 로 되어 있다면

 

d rwxrwxrwx

앞글자 첫번째는 디렉토리인가 파일인가 구분값이다

d : 디렉토리

- : 없으면 파일이라는것

 

rwxrwxrwx

여기에 r이 몇개 들어가 있나? r의 의미는 읽기 - 누군가가 읽을 수 있나?

r : 읽기

w : 쓰기가 가능한가?

x : 실행이 가능하냐?

다 있다면 가능

만약 없다면 (- 로 되어있다면) 그건 불가능임

 

$ sudo chmod -R 111 .next

이렇게 하면 .next 가 바뀌고 주소로 들어갔을때 실행이 안됨

 

근데 왜 똑같은게 3개가 있나? - 읽을 수 있는사람 / 쓸 수 있는사람

d   rwx     rwx     rwx

    유저     그룹    다른사람들

 

유저 : 리눅스 사용자 ubuntu 의 권한

그룹 : ubuntu 라는 사용자가 ubuntu 안에 있다는 것

 

원래는 clinet 한테는 w 는 주면 안됨

d rwxrwxr-x

이렇게 해줘야함

 

d   rwx     rwx     rwx

1   421     421     421

0

 

--x --x --x

  1   1   1

 

r-x r-x r-x

 5   5   5

: 더한 값으로 표현함

 

r-- r-- r--

4   4   4

 

rwx r-x r--

7   5   4

 

그래서 권한 바꾸기

sudo chmod 777 memo.md

ls -al 하면

전체에게 권한이 생김

 

 

 

------------------------------------------------------------------------

 

오늘 발생한 문제

인스턴스를 지워서 다시 만드니까 앞에 npm node js 설치하는걸 새로 싹 세팅해줘야 했음

2021.07.20 - [수업/AWS] - 21.07.20 AWS_front

이거 해주고

 

또 새로 만들었으니 탄력적 ip 만들어줘야함

만들고 새로운 인스턴스에 연결해야함

연결하고 그 탄력적 ip를 hyejun.co.kr에 다시 연결해주기 ㅠㅜ - back 은 연결할 때 탄력적 ip 만들고 다시 연결하기

 

휴 암튼 여기까지는 했는데

nginx 502 bad gateway 오류가 나는거..

$ sudo systemctl restart nginx

이거 했는데도..

알고 봤더니

$ npx pm2 start npm -- start

이걸 먼저 해줘야 했음..

 

그리고 저거 도메인 certbot 이랑 연결하는거

 

$ sudo certbot --nginx 다시 하고 

했는데 암것도 안뜨면 엔터로 나가고

sudo vi /etc/nginx/sites-available/myapp.conf

해서

server{

    listen 80;

    server_name hyejun.co.kr;

    proxy~~

    ...

} 

이렇게 하고

서버이름 입력해주고 다시

$ sudo certbot --nginx 다시 하면

내가 설정한 도메인이 나옴 1 입력하고 엔터하면 연결이 된다.

그런 다음에 

$ sudo systemctl restart nginx 

 

그러고 크롬 들어가서 hyejun.co.kr 하면 잘 나옴,