250311 - NestJs GithubPages 배포하기

일단 예전부터 동아리 사이트가 있었는데, 그걸 밀어버렸다.

그래도 나름 개발동아리인데 react 도 아니고 html 로 만들엇길래..

페이지는 지금 쓰고 있는게 있어서 여름 방학 때 새로 만들 예정이다

 

일단 동아리에서 슬랙을 사용하고 있는데 90일이 지나면 사라지기 때문에 너무 불편했고

부원들이 자주 찾는 파일들을 한 곳에 모아놓고, 여기서 확인하라고 말할 것이 필요했다

그래서 링크 페이지를 만들었고 github pages 로 배포까지 끝냈다

별도의 /뒤의 레포지토리명 없이 동아리 깃허브 계정 그 자체의 페이지를 배포하였다

따라서 깃허브에서 레포 이름도 sm-solux.github.io 이다

 

1. 사용할 모듈 설치

npm install gh-pages

 

2. nest.config.ts 파일 수정

const nextConfig: NextConfig = {
  output: "export",
  images: { //이미지 최적화 모델 사용하지 않음
    unoptimized: true,
  },
  assetPrefix:
    process.env.NODE_ENV === "production"
      ? "https://sm-solux.github.io" //사용할 url 입력
      : "",
};

 

3. packages.json 파일 수정

"homepage": "https://sm-solux.github.io", //사용할 url 입력
"scripts": { //두개 추가
	"predeploy": "npm run build",
	"deploy": "echo. > out/.nojekyll && gh-pages -d out --dotfiles",
}

 

** 구글링해서 찾은 글에는 "build" : "nextbuild && next export" 라고 되어 있었는데

14로 바뀌면서 export 를 빼줘야 한다고 한다

 

4. 다 설정하고 npm run deploy

-> 성공시 out 폴더가 하나 생겨난다~

 

5. 깃허브 레포 설정 부분

여기에 들어가서 Branch: main -> gh-pages 로 변경해주고, 저 사이트에 들어가면

내가 빌드한 화면이 뜬다!

 

아직 수정이 조금 더 필요하긴 하다

부원들이 잘 써줬으면 좋겠담