[React] github로 배포하기, github page

10608 단어 ReactgithubReact

전에 글 쓴 거 보다가 소소하게..프로젝트 했던거 링크를 눌렀는데

어라라...아무것도 건드린게 없는데 갑자기 안돼서 봤더니 이제 돈내야 된다고 함
...
그래서 어떻게든 열어두고 싶어서 깃허브로 다시 배포하기로 결정~!

빠른 간단 결론👍

사실 빠른 간단 정리라고 했지만 기본적인건 이게 전부인 것 같다

react 프로젝트 github page에 배포하기

  1. React 프로젝트에 아래 명령어로 설치
    npm install gh-pages --save-dev

  2. 📝package.json 에 아래 두 개 추가
    homepage : https://{깃허브 아이디}.github.io/{레포지토리 이름}/
    "deploy": "gh-pages -d build"

  3. 아래 명령어 차례로 실행
    npm run build
    npm run deploy

―――――――――― gh-pages branch 자동 생성 ――――――――――

  1. GitHub Repository > Settings > GitHub Pages > Source에서
    branch를 gh-pages로 설정 후 save (다른 브랜치로 해봤자 안 뜸)

주소값

homepage 프로퍼티에 설정하는 주소값은
GitHub Repository > Settings > GitHub Pages > Source를 설정할 때 확인 할 수 있으니 적용 전 확인하거나 아무 branch나 우선 save하여 주소값만 확인할 수도 있을 것 같다

참고로 저 파란 박스가 초록 박스가 되어야 변경사항이 적용된 것이다

오류 체이닝🤯 with BrowserRouter

역시 하나 고치면 다른 오류가 생긴다고..
저번 netlify처럼 얘도 SPA를 제대로 처리하지 못하는 것 같아서 생기는 여러가지 문제들..

흰 화면이 뜬다

위에서 설정한 homepage 프로퍼티를 아래와 같이 수정, 마지막 /삭제

"homepage" : "https://{깃허브 아이디}.github.io/{레포지토리 이름}"

BrowerRouter에 basename={process.env.PUBLIC_URL} 지정

public 폴더에 위치시켜뒀던 사진이 안 뜬다

github page자체의 오류 같음
public 폴더 안에 drinkImage라는 폴더를 만들어서 그 안에 이미지를 넣어두고
/drinkImage/img.png
로 src값을 지정해줘서 이미지를 불러오려 했더니 죄다 엑박이 떴다..

  • 첫 번째 해결 방법은 사진을 src 폴더에 넣는 것
    → 이미 public 폴더에 넣은 채로 코드를 짜서(사실 별거 없긴하지만..) 괜히 여러개를 수정해야할까봐 시도X

  • 두 번째 방법은 github page 주소를 이용한 절대경로 설정하기
    https://아이디.github.io/레포지토리이름/drinkImage/img.png

새로고침 or 라우팅 된 주소로 접속시 404 not found

netlify에서 발생했었던 역시 그때 그 문제...
다른 여러 방법 시도했는데 다 실패하던 와중에 아예 📝404.html을 만들어서 쿼리로 적용시키는 예제 코드를 찾았다

MIT의 오픈소스이므로 라이센스를 명시해주어야한다

📝404.html public 폴더에 추가
https://github.com/rafgraph/spa-github-pages/blob/gh-pages/404.html
📝index.html <head> 태그 안에 아래 코드 추가

  <!-- Start Single Page Apps for GitHub Pages -->
    <script type="text/javascript">
      // Single Page Apps for GitHub Pages
      // https://github.com/rafrex/spa-github-pages
      // Copyright (c) 2016 Rafael Pedicini, licensed under the MIT License
      // ----------------------------------------------------------------------
      // This script checks to see if a redirect is present in the query string
      // and converts it back into the correct url and adds it to the
      // browser's history using window.history.replaceState(...),
      // which won't cause the browser to attempt to load the new url.
      // When the single page app is loaded further down in this file,
      // the correct url will be waiting in the browser's history for
      // the single page app to route accordingly.
      (function (l) {
        if (l.search) {
          var q = {};
          l.search.slice(1).split('&').forEach(function (v) {
            var a = v.split('=');
            q[a[0]] = a.slice(1).join('=').replace(/~and~/g, '&');
          });
          if (q.p !== undefined) {
            window.history.replaceState(null, null,
              l.pathname.slice(0, -1) + (q.p || '') +
              (q.q ? ('?' + q.q) : '') +
              l.hash
            );
          }
        }
      }(window.location))
    </script>
    <!-- End Single Page Apps for GitHub Pages -->

https://github.com/rafgraph/spa-github-pages/blob/gh-pages/index.html

이거 하면서 다시 보니까 정말...무지성으로 만든게 보여서 좀 부끄러워졌다
그리고 더이상 이 프로젝트는 수정할 일 없을 거라고 생각했는데 자꾸만 신경쓰게되고...고치고 싶고...
이러면서...배우는게 아닐까...감히 생각...

내일배움단2주차 WIL🐱‍👤Javascript,JQuery,Ajax
[JAVA] SWEA 2930 - 힙

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage