🙋🏻♂️ 우리가 만든 Next.js 프로젝트가 있다고 가정하고, 깃허브에 배포하는 과정을 순서대로 정렬해 보았다.
homepage
에 url
을 추가한다.script
에 next export
를 추가했다.script
에 deploy
라는 명령어를 만들어 배포까지 한번에 가능한 명령어를 추가했다.💡 만들어준 deploy 명령어에 대해서..
touch out/.nojekyll
: Github page의 jekyll 처리과정에서 _next 이러한 파일을 특수 리소스로 간주하고 최종 사이트에 복사하지 않는데 .nojekyll 파일을 만들면 이를 막을 수 있다.git add -f out/
: git add, out폴더가 gitignore에 포함되어 있어서 강제로 addgit 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"
}
}
여기서 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;
prefix
를 추가해준다.
url
은 전부 앞서 말했듯이 homepage
!!export const prefix =
process.env.NODE_ENV === "production"
? "https://EngChooN.github.io/joonyoung-s-portfolio-page"
: "";
📌 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;
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
의 src
부분을 수정해 주지 않는다면, 깃허브 배포시 제대로 나오지 않는다. prefix
를 붙여서 사용을 하면된다.
<Box1
style={{
backgroundImage: `url(${prefix}/images/rending/rending1.jpg)`,
}}
>
💡 이미지가 아닌 file도 똑같이 하면 정상 출력된다.
<Right_Img src={`${prefix}/images/project/codeCamp.png`} />
yarn deploy
실행!!
개꿀팁이네요 감사합니당 ㅈㅓ도 조만간 해보겟음니다