Next.js 프로젝트 GitHubPages 로 배포하기..

준영·2022년 7월 21일
10

🙋🏻‍♂️ 우리가 만든 Next.js 프로젝트가 있다고 가정하고, 깃허브에 배포하는 과정을 순서대로 정렬해 보았다.


📍 package.json 수정

💡 만들어준 deploy 명령어에 대해서..

  • touch out/.nojekyll : Github page의 jekyll 처리과정에서 _next 이러한 파일을 특수 리소스로 간주하고 최종 사이트에 복사하지 않는데 .nojekyll 파일을 만들면 이를 막을 수 있다.
  • git add -f out/ : git add, out폴더가 gitignore에 포함되어 있어서 강제로 add
  • git commit -m : 'deploy to gh-pages'라는 커밋 메세지를 작성
  • git subtree push —prefix out origin gh-pages : github 저장소 gh-pages브랜치에 push


    🙋🏻‍♂️ 깃허브 배포 브랜치명은 무조건 'gh-pages'여야 한다!
{
  "name": "react-nextjs-deploy",
  "version": "0.1.0",
  "private": true,
  "homepage": "http://nostrss.github.io/react-nextjs-deploy", // homepage 추가
  "scripts": {
    "dev": "next dev",
    "build": "next build && next export", // export 추가
    "start": "next start",
    "lint": "next lint",
    // deploy 추가
    "deploy": "next build && next export && touch out/.nojekyll && git add -f out/ && git commit -m 'deploy to gh-pages' && git subtree push --prefix out origin gh-pages"
  },
  "dependencies": {
    "next": "12.2.0",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "babel-plugin-transform-define": "^2.0.1",
    "eslint": "8.19.0",
    "eslint-config-next": "12.2.0",
    "gh-pages": "^4.0.0"
  }
}

🤔 Next.js로 만든 프로젝트를 깃허브에 배포하면 css랑 img가 적용이 안되서 나오는데, 약간의 세팅이 필요하다..

📍 next.config.js 수정

여기서 repository는 package.json의 homepage에 있는 url을 넣어주면 된다.

/** @type {import('next').NextConfig} */

const debug = process.env.NODE_ENV !== "production";
const repository = "joonyoung-s-portfolio-page";

const nextConfig = {
  reactStrictMode: true,
  assetPrefix: !debug ? `/${repository}/` : "", // production 일때 prefix 경로
  trailingSlash: true, // 빌드 시 폴더 구조 그대로 생성하도록
};

module.exports = nextConfig;

📍 config/config 추가

prefix를 추가해준다.

  • 🙋🏻‍♂️ url은 전부 앞서 말했듯이 homepage!!
export const prefix =
  process.env.NODE_ENV === "production"
    ? "https://EngChooN.github.io/joonyoung-s-portfolio-page"
    : "";

📍 context/context.js

📌 context api를 모르신다면... 👉 context api를 알아보자..

context api(recoil같이 전역관리)를 이용하여 config.js에서 preix를 가져와 추가해 주어야 한다.

  • 🙋🏻‍♂️ context api가 싫다면, 최상위 컴포넌트에서 props로 prefix를 보내도 상관없음!!
import React from "react";

const PortfolioContext = React.createContext();

export const PortfolioProvider = PortfolioContext.Provider;
export const PortfolioConsumer = PortfolioContext.Consumer;

export default PortfolioContext;

📍 app.jsx 최상위 컴포넌트를 provider로 감싸기

import { PortfolioProvider } from "../src/components/commons/context/context";
import { prefix } from "../config/config";

function MyApp({ Component, pageProps }: any) {
  return (
    <PortfolioProvider value={{ prefix }}>
      <RecoilRoot>
        <Global styles={globalStyles} />
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </RecoilRoot>
    </PortfolioProvider>
  );
}

📍 img 사용 예제

프로젝트를 완성하고 배포하려고 한다면, imgsrc부분을 수정해 주지 않는다면, 깃허브 배포시 제대로 나오지 않는다. prefix를 붙여서 사용을 하면된다.

url 예제

      <Box1
        style={{
          backgroundImage: `url(${prefix}/images/rending/rending1.jpg)`,
        }}
      >

src 예제

💡 이미지가 아닌 file도 똑같이 하면 정상 출력된다.

<Right_Img src={`${prefix}/images/project/codeCamp.png`} />

👍 그 후 마지막으로 yarn deploy 실행!!

📍 결과물

https://engchoon.github.io/joonyoung-s-portfolio-page/

profile
개인 이력, 포폴 관리 및 기술 블로그 사이트 👉 https://aimzero-web.vercel.app/

1개의 댓글

comment-user-thumbnail
2022년 7월 29일

개꿀팁이네요 감사합니당 ㅈㅓ도 조만간 해보겟음니다

답글 달기