Vue-firebase 프로젝트 생성하기, 웹 호스팅

Vue-firebase 프로젝트 생성하기, 웹 호스팅

 

 

이번 글에서는 Vue에서 firebase 프로젝트를 생성하려고 한다.

 

 

firebase 백엔드를 이용하면 데이터베이스에 대한 지식없이도 간편하게 스스로 웹사이트의 폼에 대한 정보나 그 외 정보들을 저장하고 관리할 수 있다. 

 

 

1. 먼저 google에 firebase를 검색해서 사이트에 들어가고 오른쪽 상단에 콘솔로 이동을 누른다.

 

 

 

2. 프로젝트 생성을 클릭하고 프로젝트 생성에 아무거나 적어준다. (계속을 누르다보면 애널리틱스 생성과 같은 것도 있는데 이것도 어떻게 하든 상관없다. 일단 넘어가자)

 

 

 

3. authentic에 들어간 뒤 4가지 탭 중에 Sign-in method에 들어간다.

 

 

 

 

4. 만약 이메일에 관한 데이터정보를 담고 싶으면 이메일을 클릭한 뒤 사진의 위에 이용설정을 on해주면 된다. (아래는 off)

 

 

 

 

 

5. 이번엔 firestore Database에 들어가서 시작하기를 클릭한 뒤 테스트모드로 설정해준다. (지역은 asia northeast3를 클릭)

 

 

 

 

 

6. 다시 사이드바로 들어와서 제일 상단에 프로젝트 개요를 클릭, web표시인 </> 를 클릭 

 

 

 

 

 

7. 앱이름은 아무거나, 아래 사진과 같이 visual studio에 npm install firestore를 해준다.

 

 

 

8. 이후 firebase 호스팅에 배포에 맨 위 2가지 코드를 다 Terminal에 copy한다. (마지막 deploy는 1,2번째 하고나서 9번과정을 하고 한다.)

2번째 코드인 init을 하게되면 선택하는 부분이 나오는데 이 때 hosting ~선택 -> use an existing project -> 내가 만든 프로젝트 선택 

 

 

 

9. npm run build를 해서 dist파일을 생성하게 한다. (dist파일은 내가 작성한 프로젝트들 ex)App.vue, layout.vue와 같은 것들을 압축해서 만들어놓은 파일이다.) 

 

 

 

 

10. 8번해서 했던 마지막 코드인 Terminal에 firebase deploy를 해주면 웹 호스팅이 완료된다.