개인 프로젝트

[개인프로젝트]ADB 사이트 호스팅(feat.파이어베이스)

gongmille 2025. 7. 11. 11:09

이제 사이트는 다 만들었으니 호스팅을 통해 배포할 순서이다.

이전에 계획했던대로 파이어베이스 호스팅을 이용하기로 했다.

 


연동중이던 파이어베이스 프로젝트로 들어가면 왼쪽에 빌드가 있다.

 

app hosting과 헷갈리면 안된다.

 

 

지금 나는 만들어둬서 이렇게 2개가 되어 있다.

 

상세는 이쪽 게시글을 참고했다.

https://hyjang.tistory.com/entry/React-Firebase%EB%A1%9C-%EC%95%B1-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0

 

[React] Firebase로 앱 배포하기

들어가며리액트 프로젝트를 제작한 후 배포를 할때 npm run build를 하여 배포한다.만약 파일질라같은 FTP에 배포할 땐 build 파일에 있는 파일들을 모두 옮기고, 도메인/index.html과 같은 주소로 접속

hyjang.tistory.com

 

처음 만들때 실수로 public을 입력해서 제대로 되지 않았다.

 

>>반드시<<

 

npm run build를 먼저 해서 파일을 생성한 뒤에 

what do you want to use~~~ 항목이 나와 (public)이라고 적혀 있는 항목에서 build라고 적길 바란다.

처음 참고 했던 정보글이 pubilc을 썼어서 따라 썼더니 제대로 안나와서 한참을 헤맸다.

만약 같은 이슈로 찾아헤매는 사람이라면 npm 명령어를 사용해 빌드를 한 뒤에 

firevase.json으로 가서 수정을 하길 바란다.

 

{
  "hosting": {
    "site": "dont-buy",
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

 

맨 처음 프로젝트 사이트를 만들었을 때 이름이 별로라 다른 사이트 추가를 이용해 이름을 간결하게 바꾼 걸 추가했다. (그게 위쪽 호스팅 대시보드에 있는 것 중 두번째 것이다.)

그리고 json 파일에 public 바로 아랫줄에 site 부분을 추가한다.

 

그리고 파일을 변경하면 꼭 npm run build 를 한 뒤에 firebase deploy를 입력한다.

그래야지 파이어베이스에도 배포가 되어서 적용이 된다.

 

처음 했을때 여전히 바뀌지 않아서 고민했는데 시간이 지나니 적용이 되는 걸 확인 할 수 있었다. 시간이 조금 걸리는 듯 하다.

 

사실 뒤의 web.app이나 .firebaseapp.com 부분이 마음에 안들어서 바꾸고 싶었지만 그럴경우 따로 돈을 지속적으로 내야하는지라 그냥 포기했다.

 

배포된 사이트 : https://dont-buy.firebaseapp.com/

 

ADB-Adopt don't buy

 

dont-buy.firebaseapp.com