GitHub Action으로 Next.js + Typescript 배포하기

yo_onms·2022년 5월 10일

GithubAction deploy nextjs typescript

NextJs

목록 보기

2/6

NextJs + Typescript 프로젝트를 gh-pages로 배포하던중 배포화를 자동화 시키면 좋겠다라는 생각이 들어 시도를 하면서 겪은 에러 및 진행 방법을 공유드립니다!!

1. 배포 방법

package.json 파일 안의 “script” 속성에 “deploy”하는 명령어를 추가한다.

//package.json

 "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "deploy": "rm -rf node_modules/.cache && next build && next export && touch out/.nojekyll && git add out/ && git commit -m \"Deploy Next.js to gh-pages\" && git subtree push --prefix out origin gh-pages"
  },

위의 명령어들을 정리해 보면

rm -rf node_modules/.cache  : node_modules 캐시제거

next build : next 프로젝트 빌드

next export : next 프로젝트를 static html앱으로 컴파일한 out/ 폴더를 생성해 줌

touch out/.nojekyll : Github page의 jekyll 처리과정에서 _next 이러한 파일을 특수 리소스로 간주하고 최종 사이트에 복사하지 않는데 .nojekyll 파일을 만들면 이를 막을 수 있다.

git add out/ : 상의 변경 내용을 스테이징 영역에 추가

git commit -m "Deploy Next.js to gh-pages" : 커밋메시지 작성 및 로컬 레파지에 추가

git subtree push --prefix out origin gh-pages : github 저장소 gh-pages브랜치에 push

이 명령어 들을 가지고 있는 deploy를 실행시키면 배포가 자동으로 됩니다

npm run deploy

2. next.config.js

next.config.js 파일이 루트 폴더에 없다면 파일을 생성하고 다음과 같은 코드를 넣어준다. name은 자신의 깃허브 저장소 이름을 넣어준다.

//next.config.js

module.exports = {
  assetPrefix:
    process.env.NODE_ENV === 'production'
      ? 'https://yunminseok.github.io/Mlog'
      : '',
};

개발모드에서는 requestURL=localhost:3000/ 에 리소스를 요청하지만,

배포모드에는 requestURL = yunminseok.github.io/ 에 요청한다.

assetPrefix 속성을 통해 리소스 요청 주소를 따로 넣어주어야 한다.

2. env-config.js, babelrc.js

env-config.js 파일을 루트 폴더에 만들어주고 다음과 같은 코드를 친다.

// env-config.js

module.exports = {
  'process.env.BACKEND_URL':
    process.env.NODE_ENV === 'production'
      ? 'https://yoonminseok.github.io/Mlog'
      : '',
};

이제부터 process.env.BACKEND_URL 라는 환경변수를 사용할 수 있다. 이 환경변수는 이미지, 동영상 등의 리소스에 접근하거나 사용자에게 보여지는 URL을 설정할 때 쓰인다.

.babelrc.js 파일 안의 플러그인에 등록해준다.

// .babelrc.js

const env = require('./env-config');

module.exports = {
  presets: ['next/babel'],
  plugins: [
    [
      'styled-components',
      {
        ssr: true,
        displayName: true,
        preprocess: false,
      },
    ],
    ['transform-define', env],
  ],
};

3. 이미지 리소스 접근

위에서 만든 환경변수를 사용해서 process.env.BACKEND_URL 리소스에 접근해야 되지만 next/image를 사용해서인지 오류가 떠서 다른 방식으로 접근을 하였다.

//next.config.js

module.exports = {
  assetPrefix:
    process.env.NODE_ENV === 'production'
      ? 'https://yoonminseok.github.io/Mlog'
      : '',
  images: {
    loader: 'imgix',
    path: 'https://yoonminseok.github.io/Mlog',
  },
};

이런식 으로 loader와 path값을 지정을 해주면 밑의 코드와 같이 사용가능하다

<Image
  src={'/Introduce.png'}
  alt="Introduce_Logo"
  width={400}
  height={400}
/>

4. 느낀점

이렇게 Nextjs + Typescript + Gihub-action을 통해 Github pages로 배포하는 법을 알아봤다. 막상 시작할때는 설정부분이 너무 어려웠는데 구현 하고나니깐 npm run deploy명령 하나로 배포가 되는걸 보니 왜 개발자들이 자동화를 좋아하는지 알수 있는 작업이었다.

이제부터 자동화를 좋아하는 개발자가 되도록 노력해야겠다는 생각이 들었다