Axure로 만든 html 페이지를 Firebase를 이용해 배포하려고 합니다
순서는 이렇게 됩니다!
설정 과정
1. 다운로드(환경 준비)
2. Firebase 인증
3. Hosting
1. 다운로드(환경준비)
1-1 npm 다운
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
1-2 cmd 에서 다음과 같이 커맨드 작성 후 버전이 나오면 설치 완료 된 것 입니다.
|
1
2
|
node -v
npm -v
|
2. Firebase 인증
2-1 Firebase 가입 및 프로젝트 만들기
Firebase 홈페이지에서 회원가입을 한 후 '콘솔로 이동'을 클릭 해 콘솔로 이동하면 다음과 같은 페이지가 나오면
'프로젝트 추가'를 눌러줍니다.
프로젝트 이름을 적어주고 '계속' -> '프로젝트 만들기'를 누른 후 조금만 기다려주면 프로젝트가 만들어집니다.
2-2 로컬 설정
cmd에서 다음과 같이 커맨드 작성을 해줍니다.
|
1
2
|
npm install firebase-tools -g
firebase init # firebase.json (REQUIRED) 생성
|
'firebase init'을 한 후
- Are you ready to proceed? Yes - What do you want to use as your public directory? test (이미지 기준으로 C:\Users\lchy0 밑 test 폴더에 만든다는 의미) - Configure as a single-page app (rewrite all urls to /index.html)? Yes (index.html를 생성하겠다. 나중에 수정해 줄 예정) - Set up automatic builds and deploys with GitHub? No |
C:\Users\lchy0\test에 들어가보면 index.html이 생성된 것을 확인할 수 있습니다.
2-3 서버 가동
|
1
|
firebase serve # Start development server
|
http://localhost:5000으로 접속해보면
우선은 초기화되어 있는 상태이기 때문에 'OPEN HOSTING DOCUMENTATION'을 누르면 hosting 하는 방법으로 넘어가게 됩니다.
이제 호스팅하고 싶은 index 파일을 수정한 후 새로고침 하면 페이지가 달라져 있을 것입니다.
(이전에 만들어놓은 html 파일을 복사해서 사용했습니다. 혹시나 몰라 링크 남겨 둡니다.)
[html 파일 링크: https://github.com/chea-young/test]
3. Hosting
3-1. 프로젝트 id 복사하기
프로젝트를 생성 완료 된 페이지에서 '프로젝트 설정'을 클릭하면
프로젝트 ID를 확인할 수 있습니다. 이것을 복사해 두세요.
3-2 Hosting하기
cmd에서 다음과 같이 커맨드를 작성합니다.
|
1
|
firebase deploy --project test-22ec6
|
이렇게 완료 되었다는 표시가 나와서 Hosting URL에 들어가보면
호스팅이 잘 된 것을 확인할 수 있습니다.
Hosting 된 주소: https://test-22ec6.web.app/
개미와배짱이
test-22ec6.web.app