이번에 포트폴리오의 필요성을 느껴 github page를 통해 배포하는 방법을 찾아 보고 서칭하고 성공한 내용을 담은 블로그다.!.! ㅎㅂㅎ
Github Setting
공식문서를 보면 아주 자세히 설명이 되어있다. 그치만 링크의 링크는 피곤하니까~
1. 우상단의 New 클릭 하여 새로운 레포 만들기
2. 레포 이름을 사용자깃허브아이디.github.io 로 생성!
3. 세팅 진입
4. code and automation에서 Pages클릭
5. Build and deployment에서 브랜치 설정 후 save클릭!
- 위 과정은 해당 브랜치에 변경사항이 푸시되면 자동으로 배포를 실행하게 자체적으로 내장되어있다.
이 과정을 모두 거치고 나면 main 브랜치의 index.html이 http://사용자깃허브아이디.github.io 에 배포된다. 참 쉽쥬~?
근데.. Next.js는 메인 디렉토리에 index.html이 없는걸요..ㅠ 그러면 뭐가 나와요?!
그럼 어쩌냐며는! 이제 다음 과정을 살펴보자
Nextjs Setting
프로젝트 생성은 공식문서를 참고해서 만들자 ~.~
일단 기본적으로 지식을 가지고 가보자. Next.js는 서버에서 React의 JavaScript 코드를 실행하여 초기 HTML이 생성된다. 이 html을 우리는 배포해야한다. 그러기 위해서는 빌드, 빌드된 파일 배포 등의 과정을 거쳐야 우리가 원하는 화면이 노출될것이다!
그러니까 요약해보자면
빌드 -> 빌드된 파일 푸시 -> 자동배포
이렇게 과정을 거쳐야 한다는 것이다.
이 과정들을 좀 더 편하게 진행 하기 위해 gh-pages라는 라이브러리를 다운받아서 사용한다.
npm install gh-pages그리고 package.json에 몇가지를 추가한다.
"homepage": "https://사용자아이디.github.io/",
"scripts": {
"dev": "next dev",
"build": "next build",
"predeploy": "npm run build",
"deploy": "touch out/.nojekyll && gh-pages -d out -t true",
"start": "next start",
"lint": "next lint"
},그리고 next.config.mjs도 수정한다.
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export',
reactStrictMode: true,
images: {
unoptimized: true
},
trailingSlash: true,
};
export default nextConfig;
이렇게 수정후
npm run deploy명령어를 실행하면 predeploy를 먼저 실행 후 deploy 명령어를 실행한다.
📍 deploy명령어를 살펴보자.
touch out/.nojekyll:
touch: 파일을 생성하는 Unix 명령어.
out/.nojekyll: 'out' 디렉토리에 '.nojekyll'이라는 빈 파일을 생성.
목적: GitHub Pages가 Jekyll을 사용하여 사이트를 처리하는 것을 방지, Next.js와 같은 프레임워크로 빌드된 사이트에서 필요
gh-pages -d out -t true:
gh-pages: gh-pages 라이브러리를 실행. gh-pages 브랜치가 없다면 브랜치 생성, 있다면 해당 브랜치 aiming
-d out: 'out' 디렉토리의 내용을 배포.일반적 Next.js의 빌드 출력 디렉토리.
-t true: 'dotfiles'(점으로 시작하는 숨김 파일)도 포함하여 배포. 이는 '.nojekyll' 파일을 배포에 포함시키기 위해 필요.이런저런 과정을 거치고 나면 해당 레포지토리에 자동으로 gh-pages브랜치가 생성되고 build의 결과로 생긴 out폴더 안의 내용이 해당 브랜치로 푸시되어있다.
그리고 아까 main브랜치로 고정시켜놨던 깃허브 세팅 또한 gh-pages로 변경후 저장한다.
저장 이후 위 탭의 Actions를 누르면 배포되고있음을 확인 할 수 있다.
성공후 링크로 들어가면 성공적으로 배포되어 있는것을 확인 할 수 있다!
근데 아마 이상하게 npm run dev로 보는 페이지와는 다르게 css가 어딘가 없는것을 볼 수 있다. 그 세팅을 아래서 해보자!
postcss setting
프로젝트 생성시 생성된 postcss.config.js를 수정해보자! 해당 파일은 css 후처리기로 모던 css 기능을 사용하고 브라우서 호환성을 높인다.(처음에 .mjs파일로 생성했는데 클로드씨가 js로 바꾸라고 해서 일단 그렇게 진행했음..)
일단
npm install autoprefixer --save-dev ,
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};이렇게 수정후 npm run deploy를 진행하면 css가 적용된 모습을 확인할 수 있다.
