[React][side project] mbti궁합 테스트(3) - aws Amplify 배포 & 가비아 도메인 붙이기

🎈이전글과 이어지는 글입니다 - 마지막

 

7. 배포 준비(1) - SNS로 링크 전달 시 썸네일, 타이틀 변경을 위한 metadata 수정

📂 public index.html 수정

     -meta 태그를 추가해서 링크 공유시 썸네일 이미지, 웹사이트 명, 간단한 소개, url 주소를 표시하고자

      한다.

<meta property="og:url" content="https://www.chemistry-test.co.kr/" />
<meta property="og:title" content="우리의 모든 것" />
<meta property="og:description" content="mbti 별자리 띠 혈액형 모든 궁합을 한번에 확인해보세요!" />
<meta property="og:image" content="heart.png" />

 

📂 manifest.json 수정 - src를 원하는 이미지로 수정해줌 

 "icons": [
        {
            "src": "./heart.png",
            "sizes": "64x64 32x32 24x24 16x16",
            "type": "image/x-icon"
        },
        {
            "src": "./heart.png",
            "type": "image/png",
            "sizes": "192x192"
        },
        {
            "src": "./heart.png",
            "type": "image/png",
            "sizes": "512x512"
        }
    ],

추가로, PC 웹사이트의 타이틀과 파비콘 아이콘을 바꾸려면, 이 두가지를 변경해주면 된다. 

<link rel="icon" href="heart.png" />

title>우리의 모든 것</title>

 

7. 배포 준비(2) - 사용자 줌인 막기, 화면 설정

사용자가 줌인을 할 수 없게 방지하고 초기 크기를 기본적으로 꽉 차게 보이게 하려면 추가적으로 수정을 해야한다.

📂 public index.html 수정

<meta content="minimum-scale=1.0, 
				width=device-width,
 				initial-scale=1
				maximum-scale=1, 
				user-scalable=no" 
				name="viewport" />

1) minimum-scale : 최소 크기 설정

2) width=device-width : 콘텐츠를 디바이스 크기에 맞춤

3) initial-scale=1 : 초기 크기 성정 -> 기본 꽉찬 화면으로

4) maximum-scale=1 : 최대 크기 설정

5) user-scalable=no : 사용자가 크기를 조절할 수 있는지 유무 (yes/no)  
6) name="viewport" : 뷰포트 선언

 

8. 배포(1)  - GITHUB 저장소 생성

깃헙에 새로운 저장소를 생성하고,

 

1) 변경사항 stage에 올리기

$ git add .

2) 해당 변경사항을 커밋

$ git commit -m "쓰고싶은 메세지"

 

3) push 해서 깃헙 저장소에 업로드 (url -> 저장소 링크  / branch 이름)

url은 깃헙 저장소에서 복사 해오면 됨 

$ git push https://github.com/codnjs779/chemistry-test.git master

 

9. 배포(2)  - AWS Amplify

amplify를 검색해서 찾고 설치해준다. ( 설치과정, 셋팅은 이 글에서는 다루지 않음)

 

1) New app 을 클릭하고 host web app 을 눌러준다.

 

2) 저장소 선택

 깃헙에 저장소를 만들어 줬기 때문에 깃헙을 선택하면 됨

 

3) 해당하는 저장소 선택

 

이부분은 특별한게 없으면 그냥 다음 버튼을 눌러서 진행시키면 된다. 그 다음 검토부분도 마찬가지다.

완료하고 저장 및 배포를 누르면 배포하는 과정이 나오면서 잠시 기다리면 배포를 확인해 볼 수 있다.

 

이런 화면이 나오면 배포에 성공한 것이다.

 

이제 도메인을 붙여볼 것이다. 

 

10. 도메인 붙이기

🔷 가비아에서 원하는 도메인을 검색해서 구매

https://www.gabia.com/?utm_source=google&utm_medium=cpc&utm_term=%EA%B0%80%EB%B9%84%EC%95%84&utm_campaign=%EA%B0%80%EB%B9%84%EC%95%84 

웹을 넘어 클라우드로. 가비아

 

 

🔷 aws Route 53

 

1) 호스팅 영역 선택

 

 

2)호스팅 영역 생성

 

도메인 이름에 가비아로 구매한 도메인 넣어줌  -> 호스팅 영역 생성 버튼을 클릭

노란색 부분 옆에 4가지 주소가 생성이 되었을 것이다. 그럼 다시 가비아 사이트로 넘어가서

 

도메인 관리에 들어간 뒤 네임서버를 수정해 줄것이다.

 

🔷 가비아 네임서버 수정

아까 Router53에서 생성한 4개의 주소를 여기에 붙여넣어준다. 적용을 시키고 

구매했던 도메인 주소를 복사한다.

 

🔷 amplify 도메인 수정

 

  도메인 관리를 클릭한다.

 

- 사용자 지정 도메인을 추가해서 구매한 도메인을 붙여넣어주면 완성된다.

아까 배포했던 화면으로 돌아가서 확인 해보면,

이렇게 변경되어있는 걸 확인할 수 있다.

 

 

🔽

아래의 주소는 MBTI궁합 프로젝트 배포사이트이다. https://www.chemistry-test.co.kr/

우리의 모든 것

상단에서 적용했던 meta data도 잘 적용된 것을 확인 할 수 있다.❤

 

 

🎈 이상으로 MBTI 포스팅을 마친다.