[Firebase&Web연동 3] 간단한 index.html 페이지 만들어서 배포해보기
● 들어가기 전
지난 포스팅에서 자신의 컴퓨터에 node.js를 이용해서 서버를 구축하는 방법을 살펴보았습니다. 이번 포스팅에서는 간단한 index.html 페이지를 만들어서 직접 서버를 가동해보고, 또한 전 세계 사람들이 볼 수 있도록 배포해 보도록 하겠습니다.
● 실습내용
1.간단한 index.html 페이지를 만들어서 서버 폴더인 public 폴더에 올리기
2.로컬에서 서버 가동 후 접속해보기
3.접속이 된다면 배포해보기
● index.html 파일 만들기
이번 메인페이지 작업에서는 bootstrap3 플랫폼을 이용해서 페이지 레이아웃을 만들어주고 디자인 작업을 할 것입니다. 직접 html, css, jquery를 사용해서 만들 수도 있지만, 이번 포스팅은 firebase와 web 연동에 대해 살펴보는 것이기 때문에 bootstrap을 사용해서 진행하도록 하겠습니다. 그리고 bootstrap과 관련된 예제가 있는 w3schools 을 참고해서 작업하도록 하겠습니다. w3schools 홈페이지나, bootstrap3 플랫폼에 익숙하신 분들은 직접가셔서 원하는 페이지를 한번 만들어 보셔도 좋을 것 같습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html lang="ko"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>파이어베이스 웹 연동 페이지</h1> <p>감사페이지 만들기</p> <p>테스트 페이지 입니다.</p> </div> </body> </html> | cs |
▲소스코드를 복사해서 public 폴더 안에 있는 index.html 파일에 붙여 넣기 해줍니다.
index.html 파일에 있던 기존 소스코드는 삭제 해 줍니다.
▲에디터는 개인적으로 MS사의 visualstudio를 사용하고 있습니다.
▲저장하시고 index.html을 더블 클릭하시면 위와 같은 창이 뜹니다. (아직 서버 구동은 안했음)
▲프로젝트 파일로 이동하신 다음에 pwd로 경로를 확인합니다.
확인이 끝났으면 firebase serve 명령어로 서버 구동을 해줍니다.
▲위와 같은 메시지가 뜨면 서버 구동에 성공을 한것입니다.
이제 위의 주소를 복사해서 웹브라우저에 입력해보겠습니다.
▲위와 같은 화면이 뜨면 로컬 서버 구동에 성공한 것입니다.
이제 마지막 작업인 배포를 해주도록 하겠습니다.
▲프로젝트 폴더로 이동합니다.
pwd로 위치를 확인한 다음, firebase deploy 명령어를 입력해줍니다.
▲위와 같은 화면이 뜨면 서버 구동에 성공한 것입니다.
hosting url은 이제 어디서든 접근할 수 있는 독립적인 자신의 프로젝트 주소입니다.
직접 웹브라우저에 입력해서 확인해 보겠습니다.
▲위와 같은 화면이 뜨면 호스팅에 성공한 것입니다.
파이어 베이스 데쉬보드로가서 어떤 일이 일어났는지 확인해 보겠습니다.
▲왼쪽 매뉴에서 호스팅을 클릭하시면 방금 배포한 프로젝트의 기록이 생겼습니다.
● 정리
웹호스팅을 해보신 분들은 이 방식이 생소하실 수 있습니다. 보통 웹호스팅은 FTP/SSH 방식으로 접근을 하니깐요. 또한 양방향 전송이 아닌 즉, 프로젝트 파일 업로드도 할 수 있고, 다운로드도 할 수 있는 방식이 아닌 업로드만 할 수 있게 만들어 놓았습니다...그래서 git이나 다른 툴을 이용해서 소스 백업을 해두셔야 합니다. 그럼에도 공짜로 웹서버를 이용할 수 있다는 점은 학생이나 프로젝트를 테스트 해야 하는 사람들에게 큰 메리트가 아닐까 싶습니다. 무료 계정에 1G 저장공간과 ssd 서버(월 트래픽 10G)를 제공해 주니깐요.
● 마무리
이 포스팅에서 firebase를 이용해서 서버를 구동하고 배포하는 방법을 알아보았습니다. 다음 포스팅에서는 메인 페이지를 꾸미고, firebase api를 이용해서 로그인 로그아웃 기능을 만들어 보도록 하겠습니다.
보다 자세한 설명은 유튜브에 영상으로 정리해 놓았으니 공부하시다가 참고하셔도 좋을것 같습니다
'Firebase > Firebase&웹' 카테고리의 다른 글
| [Firebase&Web연동 6] session을 이용해서 navigation bar 변경해주기 (3) | 2018.02.24 |
|---|---|
| [Firebase&Web연동 5] 로그인 기능 구현 (2) | 2018.02.23 |
| [Firebase&Web연동 4] email 가입 기능 구현하기 및 설정 (14) | 2018.02.23 |
| [Firebase&Web연동 2] node.js를 이용해서 개발용 로컬 웹서버 실행하기 (3) | 2018.02.22 |
| [Firebase&Web연동 1] 기본 세팅 하기 (1) | 2018.02.21 |
댓글