웹사이트 배포하기

Git

웹사이트 배포하기

ddorongg 2022. 12. 29. 19:11

포트폴리오를 만들다보니 웹사이트를 배포해야하는데 또 이런 건 처음이라 혼자 구글링 해가면서 배운 배포하는 법을 정리해보려고 한다.

물론 큰 사이즈의 웹사이트는 배포를 안해봐서 잘 모르겠지만 내가 만든 프로젝트들은 웬만하면 이런 방법들로 배포가 잘 될 것 같아 내가 알아볼 수 있게끔만 써 봄.

일단 내가 선택한 방법은

1. netlify

2. github pages

이렇게 2가지

근데 중요한 건 둘 다 메인 파일이 index.html이어야 한다는 것!!

- 그렇담 React 파일은 어떻게 해야 하지?

답은 build 설치하면 됨 (이따 뒤에서 적을 예정)

그리고 레포지터리랑 add-commit-push의 과정을 꼭 거쳐야 한다!!!

오늘도 하루종일 이 과정이 헷갈렸어서 확실히 정리

먼저 깃허브에서 레포지터리를 만든다

Create a new repository를 누르거나 New를 누르면 생성하는 곳으로 이동 (맨 오른쪽 제외한 초록 버튼 선택)

레포지터리 이름 본인이 식별가능하게 지정해서 적어두고 Create repository 그러면 이제 레포지터리 생성 완료 배포까지 3분의 1정도 왔다.

1. netlify 이용하기

먼저 이 사이트를 이용하기 위해서는 이메일로 회원가입하거나 깃허브에 회원가입이 되어 있어야 한다. 나는 회원가입이 되어있어서 깃허브와 연동하여 로그인 했다.

로그인 하면 이렇게 뜸 (나는 이미 배포한 후라 Sites에 뭐가 있지만 처음이라면 아무것도 없음)

Sites 옆에 Add new site를 클릭하면

이렇게 총 3가지 방법으로 배포할 수 있는데 난 깃허브와 연동을 해놓아서 맨 첫번째 방법을 선택히였다.

파일 자체를 드래그해서 배포하는 방식은 Deploy manually를 이용하면 된다. (하지만 깃허브와 연동해놓는 것이 나중에 수정사항이 발생했을 때 훨씬 편할 듯 하다)

Import an existing project를 클릭하면

이 화면이 뜨고 여기서 GitHub 클릭

깃허브에 저장된 레포지터리들이 나오고 이 중 배포할 프로젝트를 선택

변경 없이 deploy site를 누르면 된다.

30초 정도 기다리면 사이트가 만들어지면서 주소가 생성됨!

주소는 netlify.app 앞 부분만 변경 가능한데 홈에서 배포 완료된 주소를 바꾸고 싶은 프로젝트 클릭 후

site settings - Domain management - domains 들어가서

Options 클릭하면 Edit site name을 통해 수정 가능하다.

참고로 내가 배포해야할 프로젝트는 카카오 지도api를 담고 있어서 https://developers.kakao.com/ 에 들어가서

내 애플리케이션 - 앱 설정 - 플랫폼 - (아래로 스크롤) web에 사이트 도메인을 내가 netlify를 이용해서 배포한 주소로 변경해야 해당 주소로 접속 했을 때 지도가 잘 뜬다 ㅎ

netlify 404에러 해결

- 파일이름이 index copy 3.html 이런식으로 되어있었는데 (거의 최종 최최종 진짜최종 같은 느낌으로다가,,)

index.html로 바꾸어 주니 잘 되었다 휴^^

2. Github pages 이용하기

1) 레포지터리 생성

이름은 자기가 원하는 걸로 설정 (원래는 본인아이디.github.io로 해야했는데 이제는 아무거나 설정해도 된다고 함)

2) Github page 패키지 설치

프로젝트 폴더 경로에 깃허브 페이지 생성을 도와주는 패키지를 설치한다

npm install --save gh-pages

yarn add gh-pages --dev

3) Package.json에 코드 추가

프로젝트 폴더에 있는 Package.json을 열어 아래 코드를 추가해준다.

1. homepage 추가

"homepage": "https://본인아이디.github/레포지터리 이름"

2. delploy 추가

"scripts" 하위에 아래 코드 추가

"predeploy": "npm run build",
"deploy": "gh-pages -d build"

"predeploy": "yarn build",
 "deploy": "gh-pages -d build"

예시 )

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "gh-pages -d build",
    "predeploy": "npm run build"
  },

"predeploy": "npm run build"
배포 전에 build가 되어있지 않다면 build부터 실행
(deploy 전에 수행)

"deploy": "gh-pages -d build"
깃허브 페이지에 build 폴더를 배포

"gh-pages -d build": build 디렉토리(-d)에 있는 파일을 GitHub Pages에 업로드함.

"npm run build" : 현재 프로젝트 코드를 빌드함

3. build

배포용 파일로 만들기 위해 build 명령어를 입력
(predeploy 설정을 해두었기 때문에 필수 과정은 아님)