[Hosting] 깃헙으로 호스팅하기, Apache로 호스팅하기(윈도우)

 

안녕하세요

만들어본 웹 사이트를 서버로 hosting하는 두가지 방법과 차이점을 적어보겠습니다.

 

참고한 강의는 인프런의 생활코딩 Web1 강의 입니다.

( Web1의 "웹서버 운영-Github을 이용한 호스팅" 편 입니다. )

 

 

제가 호스팅할 웹 프로젝트는 그림판만들기 입니다.

아래는 저의 깃허브 입니다.

github.com/Hong-been/paintjs

Hong-been/paintjs

 

간단히 서론으로,

웹서버를 만드는 것과 html파일로 웹 사이트를 여는 것의 차이를 살펴보겠습니다.

 

서버를 만들면 웹주소가 http(Hyper Text Transfer Protoco)로 시작하게 됩니다.

이는 브라우저와 서버의 관계가 생성됨을 의미합니다.

즉, 브라우저가 서버에게 정보를 요청하고, 서버가 브라우저에게 정보를 제공하는, 정보를 주고받을 수 있는 상태가 되었다는 것을 의미합니다. 

 

그러나 html,css로 코딩해서 만든 html을 열면 file의 저장위치로 시작하는 웹 사이트가 열리게 되는데, 이는 브라우저만 존재하는 웹 사이트 입니다. 즉, 브라우저와 서버가 정보를 주고받는 상태가 아닌 브라우저가 브라우저에게, 자문자답의 형식인 웹 사이트가 되는 것입니다.

 

 

---

방법 1. Github으로 hosting하기

 

우선, 본인의 Github에 완성된 코드를 올립니다.

그리고 Settings 버튼을 눌러 보시면 이런 화면이 나옵니다.

 

[코드를 올린 깃헙 페이지-setting]

 

이제 쭉 밑으로 내려보시면 GitHub Pages 코너를 찾을 수 있습니다.

여기에서 Source - Branch - main을 선택해주고 Save 해줍니다.

이제 상단 초록색창에 발행되었다는 메세지에 주소가 나타납니다.

 

[Branch: main을 저장한 모습]

 

이 주소로 가보면... 따란..~~! (심심한 환호)

 

hong-been.github.io/paintjs/

PaintJS

---

방법 2. Apache로 hosting하기

 

Apache는 오픈소스에 무료로 이용할 수 있는 웹 서버입니다.

우선, 아래 링크에 가서 WAMP를 다운받아 줍니다. 

 

bitnami.com/stack/wamp/installer

Install WAMP, Download WAMP

 

설치 후,

아래의 경로대로 따라가 보시면 뭔가 파일들이 들어있을 텐데, 원하는 본인의 파일로 대체하여 주세요.

C:\Bitnami\wampstack-8.0.1-0\apache2\htdocs

[원하는 웹사이트 코드로 대체]

 

이제 아래 경로에 가셔서

C:\Bitnami\wampstack-8.0.1-0

 manager-windows라는 응용프로그램을 켜주시면 아래와 같은 창이 나오는데,

Go to Application로 본인의 웹 사이트를 킬 수 있습니다.

 

상단의 Manage Servers로 가시면 서버를 stop or start할 수 있습니다.

 

이 서버가 running되고 있을 동안에 http://본인의 ip주소 를 입력하면 사이트로 접속할 수 있습니다.

 

---

3. Github hosting vs Apache hosting 차이점

 

깃헙에서 하는 hosting은 static web hosting(정적 호스팅) 의 일종으로,

제가 만든 그림판 사이트와 같이 데이터베이스를 사용하지 않고 프론트엔드(html, css, js)만으로 운영이 되는 hosting입니다. 대부분 무료로 깃헙 외에도 bitballoon, neocities, amazon s3, azure blob, google cloud storage 등이 있습니다.

 

그리고 Apache를 사용하기 위해 설치한 WAMP에서 M은 MySQL database의 약자로, 데이터베이스와 연동이 가능합니다. 그림판에서는 사용하지 않지만, 데이터베이스를 다뤄야하는 많은 웹 사이트에서는 필수적이겠죠.

 

 

 

소통하고 싶은 부분이 있다면 언제나 댓글 주세요. 감사합니다.