카테고리 없음

도메인 설정 및 front 연결하기 NEXT 맛보기

seongjin08 2021. 7. 23. 10:53

도메인 산곳에 가서 도메인 설정에 들어가기 나는 가비아에서 사서 

가비아에 로그인후 서비스관리 가서 도메인에 관리툴 들어가서 네임서버 바꾸기 

네임서버는 아마존ec2 페이지에가서 먼저 계속 바뀌는 ip 주소를 고정 시키기 위해서 

메뉴에 탄력적 IP로 가서  탄력적 IP주소 할당 버튼을 누르고 할당을 두번 받아서 두개를 만든다!!

주의할점은 이건 돈이 나갈수 있을수 있으므로 필요한 만큼만 만들기!! 할당을 받았는데 안생기면 필터를 없애야한다!!

나도 안생겨서 4개나 할당받고... 작업누르고 릴리스 눌러서 다시 삭제함!

할당을 받으면 front 랑 back 으로 만들어서 하나씩 선택하여 작업에서 탄력적 IP 주소 연결을 하면 된다

거기 들어가면 select Box 에서 원한는 디렉토리를 선택후 연결하면 할당된 IPv4 주소가 내 고정적인 IP가 된다.

EC2 대시보드로 돌아가서 

 

 

IP 주소가 같은지 확인하면 된다!!

이제 아마존ec2 위에있는 검색창에 Route 53 을 검색후 들어간다.

꿀팁 !   ctrl 을 누르고 클릭하면 새창이 생김~

여기서 옆에 호스팅 영역을 클릭하고 호스팅 영역 생성 을 클릭후 본인이 산 도메인을 입력후 생성한다

생성후 처음 들어가면 2가지만 있을것이다.

먼저 유형이 NS 인것의 값/트래픽 라우팅 대상 에 4개의 알지못할 영어를 

가비아에 네임서버에 차례대로 1~4 차에 입력해주면된다!!

 

다시 아마존으로 돌아와서 레코드 생성을 한후 유형 A로 백과 프론트의 IP를 입력하여 2개 생성후

유형 CNAME 으로 해서 www.seong-jin.net  일때 seong-jin.net 으로 가게 연결해주면 연결 완료!!!

 

이후에는 vs Code 로 돌아가서 front 작업하며 보여주고 싶은 파일을 변경하면 된다~!

 

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

front sever에 들어가서 홈디렉토리에서 

git clone 받기 

 

 

nginx 경로 수정하기

 

cd /etc/nginx/sites-available

sudo vi myapp.conf  들어가서

자기 파일 있는 곳으로 경로 수정하기  나는 파일 이름이 front 라서 front 로 바꿈

 

sudo systemctl stop nginx

sudo systemctl start nginx 

 sudo systemctl status nginx 

 

한 후 도메인으로 넘어가 보면 성공!!

 

 

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

 

네이버 search Advisor    웹마스터 도구

검색엔진

 

csr  : cient side render

ssr  : server side render

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

 

NEXT 깔아보기

 

npm init

npm install next react react-dom

이걸깔면 babel webpack이 깔림 

React관련 개발환경이 모두 설치가 됩니다.

package.json 내용 추가 

 

 

dev 뒤에  -p [원하는 포트번호] -H 0.0.0.0 를 붙여주면 

기본이 3000 포트라서 중복을 피하게 변경할 수있으며 뒤에 -H 0.0.0.0 은 같은 와이파이를 쓸경우 핸드폰으로도 접속이 가능하다.!!

 

이제 pages 폴더를 만들고 안에 index.jsx 파일을 만들고 

코드 작성후 터미널에서 npm run dev 를 치면??? 

와우 localhost: 본인이 설정한 포트 번호 치면 된다.!!

또 pages 폴더 안에 다른 ex) post.jsx 파일을 만들어서 코드를 치면 !!

url  뒤에 /post 를 치면 작동한다!! 되게 편리하다