웹 호스팅 서비스 netlify 사용법 : 내가 만든 웹사이트 배포하기!

 

안녕하세요! 

이번 포스팅에서는 웹 호스팅 서비스 netlify(네트리파이)를 이용해서 내가 만든 웹사이트를 배포하는 방법에 대해서 소개해보겠습니다. 시작하기에 앞서, 관련 내용에 대해서 글로 되어있는 포스팅을 보는 것보다 동영상을 통해 학습하기 원하시는 분들은 제 유튜브 동영상 링크를 미리 소개할테니 참고해 주세요. 

=> youtu.be/hXuTQm1FVic

 

 

웹 호스팅이란? 

 

웹 호스팅이란 웹사이트를 올려놓을 인터넷상의 공간을 임대해주는 것입니다. 내가 만든 웹사이트를 내 컴퓨터에 저장만 해 놓으면 나 말고는 아무도 볼 수 없습니다. 따라서 사람들에게 내 웹사이트를 공개하고 싶다면 웹 서버의 일부 공간을 할당받아 그곳에 내 웹사이트 자료를 올려놓고 사람들이 거기에 접근할 수 있게 해야 합니다. 이때 웹 서버 공간을 임대해주는 서비스가 바로 '웹 호스팅 서비스'인데, 여러가지 서비스 중에서도 이번 포스팅에서는 netlify를 이용하는 방법을 안내해드리겠습니다. 

 

 

netlify를 사용하는 이유?

 

웹 호스팅 서비스를 제공하는 플랫폼은 아주 많은데, 그 중에서도 netlify는 사용법이 무척 간단하고, 일정 수준의 용량까지는 무료로 이용할 수 있어 초보자들에게도 부담없는 서비스입니다(광고 아닙니다 아무도 저 따위에게 광고 맡길 생각 안함 ㅠㅠ). 그럼 바로 시작해보겠습니다. 시작하기 전에 준비사항부터 미리 확인해보겠습니다. 

 

 

준비사항 

 

- 완성된 웹사이트 자료(HTML, CSS, 자바스크립트, 미디어파일 등이 있는 폴더)

- 인터넷 사용 가능한 환경 

- 개인 이메일 주소(이메일 주소를 입력해 서비스를 이용할 수 있습니다)

 

그럼 이제 시작합니다.

 

 

사용 방법

 

1. 먼저 다음 링크로 이동합니다. netlify 메인 페이지입니다. 

=> www.netlify.com/

 

2. 이미 계정이 있으신 경우 로그인을 하시고, 없다면 우측 하단의 Sign up을 눌러 회원가입을 먼저 해야합니다. 

 

3. 회원가입은 깃헙, 깃랩, 빗버킷 계정을 연동하거나 이메일로 진행하실 수 있는데, 누구나 할 수 있도록 이메일 가입을 예로 들어보겠습니다. 

버튼 중 가장 아래에 있는 Email 버튼을 눌러주세요.

 

4. 실제 내가 사용하고 있는 이메일 주소와, netlify 접속용 패스워드를 입력한 다음 Sign Up 버튼을 눌러 다음으로 넘어갑니다. 

 

5. 그러면 이메일 확인을 요청하는 화면이 나타납니다. 

이때 내 이메일 계정에 접속한 다음, netlify 측으로부터 전송된 메일을 열고 Verify 를 눌러주면 확인 처리가 됩니다. 

이제 접속 준비 완료! 

 

6. 접속 이후에는 다음과 같은 화면이 가장 먼저 나타납니다. 화면 상단의 메뉴 중 Sites 를 선택합니다. 

 

7. Site 메뉴의 가운데 쯤에는 점선으로 구분된 영역이 하나 보이는데, 내가 배포하고자 하는 내 웹사이트 폴더(제 경우엔 좌측에 있는 'type-animation')를 드래그해 그 영역 안에다 떨어뜨려 주시면 됩니다. 

 

영역 안에 떨어뜨리는 순간을 캡쳐하는 데 실패했는데(ㅠㅠ), 어려운 과정은 아니므로 이미지 생략하겠습니다 ^^;;

 

8. 드래그 이후 시간이 조금 지나면, 다음과 같이 화면이 바뀝니다. 

내 페이지가 netlify에서 할당해준 서버에 올라갔고, 임의로 생성된 이름을 가진 상태가 되었습니다. 화면 상단에 초록색으로 'https://nifty-bardeen-408c73.netlify.app' 라고 표시된 것이 보이실 겁니다. 이 주소에 내 웹사이트가 배포된 것입니다. 

그러나 이대로 끝내기엔 아쉽습니다. 내 사이트 이름을 내가 원하는 이름으로 변경하는 작업을 진행하겠습니다. 도메인을 구입하신 경우에는 구입한 도메인을 쓰시면 되지만, 도메인을 직접 구매하지 않고 이름을 변경하는 경우에는 무조건 url이 *.netlify.app 으로 끝나야 합니다. 여기에서는 구매한 도메인이 없는 경우를 가정하고 진행하겠습니다. 

 

9. 화면 상단에 Site settings 버튼을 눌러줍니다. 

 

10. Site settings로 이동하면 General 메뉴에서 Site details를 확인할 수 있습니다. 여기에서 Change site name을 선택합니다. 

 

11. Change Site name 다이얼로그 창이 뜨면 내 웹사이트 이름으로 사용하고자 하는 이름을 입력하고 Save 버튼을 눌러주세요. 

 

12. 그러면 배포된 내 웹사이트에 변경된 이름이 적용됩니다. 이제 내가 입력한 이름으로 내 웹사이트에 접근할 수 있게 되었습니다. 

(아래 이미지에서 'type-animation.netlify.app'이 생성된 url입니다)

 

이상입니다. 위 과정을 마치고 나면 이제 내가 만든 웹사이트를 다른 사람들에게도 공개할 수 있는 '웹사이트 배포'가 완료됩니다. 참 쉽죠? 

마지막으로 제가 포스팅을 진행하면서 실제로 배포한 페이지 링크를 보이면서 끝내도록 하겠습니다. 배포가 완료된 것에 대한 증명이라고 보시면 되겠습니다(페이지 내용은 무척 단순한 타이핑 애니메이션이지만^^;;). 

=> type-animation.netlify.app/

 

 

마무리!

 

이상으로 웹 호스팅 서비스 netlify 이용해서 내가 만든 웹사이트 배포하기, 에 대한 포스팅을 마칩니다. 부디 초보자 분들에게 많은 도움이 되기를 바라며 이만 인사드립니다. 바이바이!