netlify에서 react소스 배포해보기 + 커스텀 도메인 연결

가비아에서 세일하는 도메인을 1년에 550원에 샀다 유후~~

새로 산 도메인에 react 프로젝트를 배포해보려고 한다.

 

이것저것 알아보는 중에 지인으로부터 좋은 곳을 추천받았다.

바로 netlify였다.

 

이번 포스팅에서는 Netlify로 React앱을 배포, 그리고 github와도 연동하고

구입한 커스텀 도메인과 https 연동까지 해보도록 하겠다.

 

목차

1. Netlify 회원가입
2. Github 저장소 프로젝트 연동
3. Deploy settings
4. 사이트 배포 완성
5. 커스텀 도메인 연결

---

1. Netlify 회원가입

netlify 홈페이지로 접속해 회원가입을 진행하자 www.netlify.com

Netlify: Develop & deploy the best web experiences in record time

Sign up 버튼을 눌러 Git hub 계정으로 가입 ㄱㄱ ( 다들 개발자니까 있겠죠? )

---

2. Github 저장소 프로젝트 연동

 

로그인 후 New site from Git을 선택

지속적인 배포로서, 깃허브 버튼을 누른다.

netlify를 통해 원격 저장소를 연결해주면, netlify가 사이트를 자동으로 만들어준다.

 

소스 수정 후 원격 저장소에 push를 하면 netlify가 자동으로 확인하여 최신 소스로 업로드해준다.( ㄷㄷ 신세계.. )

버튼을 누르면 아래와 같은 창이 뜨는데 netlify가 처음 인분은 인증 한번 해주면 된다.

배포할 저장소를 선택해 준다.

---

3. Deploy settings

배포 설정 단계이다.

[ Base directory ]는 설정 안 해줬고

[ Build command ]는 react 프로젝트라 npm run build로 입력했다.

[ Publish directory ] index.html 이 있는 곳 build 폴더로 적어주었다.

( npm run build 후 build 파일은 build 폴더 밑으로 간다. )

 

다 입력 후 하단의 Deploy site 버튼을 눌러준다.

배포가 완료되기 전까진 Site deploy in progress란 문구가 뜨니 조금 기다리자

---

반응형

4. 사이트 배포 완성

 

한 30초? 정도 기다리면 저 주황색 블록 부분에 사이트 주소가 나온다.

해당 URL로 접속하면 정상적으로 배포가 잘 되었는지 확인이 가능하다.

여기까지만 하면 완성이다.

설정에서 Site settings 란 버튼을 누른 후 Change site name 버튼을 누르면 사이트명 수정이 가능하다.

단 커스텀 도메인을 직접 설정하는 것은 아니고 Netlify 도메인의 하위만 바꾼 것이다.

 

좀 있다가 구매한 커스텀 도메인으로 연결해보도록 하자

참고로 조금 기다리면 https 설정까지 자동으로 된다. 넘나 좋다... 

---

5. 커스텀 도메인 연결

 

전편에서 산 커스텀 도메인을 연결해 보도록 하자 

도메인 구입 방법에 대해선 아래 포스팅을 참고하길 바란다.

https://doinge-coding.tistory.com/76

토이 프로젝트 [1] - 도메인 구입하기

 

Netlify 홈페이지를 다시 접속한다. 하단의 Domain Settings를 클릭한다.

[ Add custom domain ] 버튼을 클릭한다.

 

Custom domain 칸안에 구매한 도메인 주소를 입력 후 Verify 버튼을 눌러준다. 

본인 도메인 확인창이 나오면 yes 를 눌러주자

 

다음 이 화면이 나오는데 아직은 도메인만 등록된 상태이다 Check DNS configuration 버튼을 눌러 네임서버를 확인해 준다.

다음 나오는 네임 서버들을 가비아 도메인 관리 사이트에서 변경해 주도록 한다.

 

가비아 홈페이지를 들어가 준다. 로그인 후 도메인 정보 변경에서 구입한 도메인을 선택한 후 네임서버 탭을 눌러준다

netlify에서 나온 네임서버들을 입력해준 후 소유자 인증까지 한 후에 적용을 누르면 완료된다.

 

여기까지 해주면 완료 ( 도메인 변경까지는 몇 분 정도 소요된다. )

 

 

아래 도메인은 커스텀 도메인 구입 후 netlify에 react 소스를 빌드 한 후에 연동한 모습입니다.

https://www.lululife.shop/

LuluGram

이제 하나씩 채워가보도록 합시다.