0w0

github actions 사용기

다음 프로젝트에 대한 생각하다

프론트엔드 시험(일본어) 한국어을 보고 이것을 하면 되겠다 생각했다.

동기

요건에는 따로 나오지는 않지만, 회사 블로그를 보면 CI를 구축했는가? 항목이 있다.

또한 근래 어찌저찌 CI와 접촉이 많아 궁금했기에 시작했다.

시작하기

github 저장소의 아무 프로젝트나 들어가서 Actions를 클릭하고 필요한 방식을 선택한다.

이번에는 github pages에 next.js를 올리고 싶으므로 skip으로 진행

설정

next-deploy.yml

.github/workflows/next-deploy.yml

name: github pages

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

  workflow_dispatch:

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: setup node
        uses: actions/setup-node@v3
        with:
          node-version: '16'
          cache: 'npm'
          # 처음 push할 때는 cache가 있으면 에러라서, cache를 지웠다가 두 번째부터 넣었다.

      - name: npm install
        run: npm install --frozen-lockfile

      - name: next build
        run: npm run build

      - name: next export
        run: npm run export

      - name: add nojekyll
        run: touch ./out/.nojekyll
        # 폴더에 `_` 있으면 인식 안 되는 것 때문에

      - name: next deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          publish_dir: ./out

package.json

"scripts":{
  // ..
  "export":"next export"
  // 추가
}

next.config.js

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

const isProd = process.env.NODE_ENV === 'production';

const nextConfig = {
  reactStrictMode: true,
  trailingSlash: true,
  images: {
    loader: 'akamai',
    path: '',
  },
  assetPrefix: isProd ? '/repository-name/' : '',
  // ex) github.com/test > /test/
};

module.exports = nextConfig;

특이사항

다른 글을 보면 자동으로 생기는 것 같은데 필자는 그게 안 되서 일단 수동으로 git checkout -b gh-pages해서 gh-pages 브런치를 생성했다.

:::note 추가

글로 쓴 코드를 기반으로 새 프로젝트, 새 레포지토리로 push하니 자동으로 gh-pages가 만들어졌다. 아마 진행과정에서 무엇인가 내가 순서를 잘 못 뒀거나 빼먹은 모양

git :::

결론

git

github pages

읽을거리