GithubPage + SPA 배포하기

shleecloud·2022년 8월 5일

들어가며

최근 github page로 간단한 SPA를 띄우는 작업을 했다. 그 과정에서 페이지가 뜨지 않아서 많이 당황했다. Github page에선 SPA를 고려하지 않기 때문에 발생한 헤프닝이다. 그래서 404 페이지에 리다이렉션을 보내주는 내용을 넣어준다. 내가 만든건 아니고, Repository 내용을 붙여넣어 해결했다. 하단에 번역까지 해주신 공식 Repo 주소를 걸어놨다.

설정 정보

public/index.html

base 태그에 주소를 적어줘야 하위 파일 경로가 고정됨
해당 태그가 없을 시, 하위 페이지로 들어갈 경우 해당 페이지를 기준으로 경로를 설정함

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <!-- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> -->
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
        <meta name="theme-color" content="#000000" />
        <meta name="description" content="shleecloud" />
        <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
        <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
        <!-- for SPA on GithubPage config -->
        <base href="https://shleecloud.myapp.co.kr/" />
        <script src="js/bundle.js"></script>
        <!-- for SPA on GithubPage config -->
        <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
        <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
        <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>
        <title>shleecloud</title>
    </head>
    <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
        <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    --></body>
</html>

public/404.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>shleecloud</title>
        <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 takes the current url and converts the path and query
            // string into just a query string, and then redirects the browser
            // to the new url with only a query string and hash fragment,
            // e.g. http://www.foo.tld/one/two?a=b&c=d#qwe, becomes
            // http://www.foo.tld/?p=/one/two&q=a=b~and~c=d#qwe
            // Note: this 404.html file must be at least 512 bytes for it to work
            // with Internet Explorer (it is currently > 512 bytes)

            // If you're creating a Project Pages site and NOT using a custom domain,
            // then set segmentCount to 1 (enterprise users may need to set it to > 1).
            // This way the code will only replace the route part of the path, and not
            // the real directory in which the app resides, for example:
            // https://username.github.io/repo-name/one/two?a=b&c=d#qwe becomes
            // https://username.github.io/repo-name/?p=/one/two&q=a=b~and~c=d#qwe
            // Otherwise, leave segmentCount as 0.
            var segmentCount = 0;

            var l = window.location;
            l.replace(
                l.protocol +
                    '//' +
                    l.hostname +
                    (l.port ? ':' + l.port : '') +
                    l.pathname
                        .split('/')
                        .slice(0, 1 + segmentCount)
                        .join('/') +
                    '/?p=/' +
                    l.pathname.slice(1).split('/').slice(segmentCount).join('/').replace(/&/g, '~and~') +
                    (l.search ? '&q=' + l.search.slice(1).replace(/&/g, '~and~') : '') +
                    l.hash,
            );
        </script>
    </head>
    <body></body>
</html>

public/CNAME

AWS Route53 서비스를 통한 도메인 할당

shleecloud.myapp.co.kr

App.tsx

BrowserRouter 컴포넌트의 basename 설정으로 하위 페이지 설정 가능
- 만약 route53같은 도메인을 쓰지 않을 경우, repository 이름이 하위 페이지로 들어감
  ex) myname.github.io/myrepo <BrowserRouter basename="/myrepo" >

export const App = () => {
    return (
        <BrowserRouter basename="/">
            <Routes>
                <Route path="/" element={<Layout />}>
            </Routes>
        </BrowserRouter>
    );
};