#01. 프로젝트 초기화

서론

블로그 이전을 결심하게 된 계기는 사실 별게 없다.

그냥... 내 손으로 이쁘게 만들고 싶어서.

그리고 포트폴리오 사이트와 블로그 등, 나만의 저장소를 통합해서 만들고 싶어서.

 

 

계획

그렇다면 어떻게 이를 실현하는 것이 좋을까?

현재 내가 원하는 블로그(통합 저장소)는 다음과 같은 기능을 포함시키는 것이 목적이다.

 

1. 하나의 네비게이션 바로 포트폴리오, 블로그 모두 접근 가능 (도메인이 같아야..)
2. Serverless function 무제한
3. 자유로운 커스터마이징 (자체 제작이 목적)
4. # 파라미터를 이용해서 contents table 제작 (3번의 연장선)
5. 낮은 비용 (0원 챌린지)

 

우선 1, 3, 4번의 목적을 충족시키기 위해 Next.js를 이용하기로 결정하였다.

/(루트)에 포트폴리오 페이지를 배치하고 블로그는 /blog 에 올리는 것이다.

이렇게하면 하나의 네비게이션으로 모두 접근 가능해진다.

뿐만 아니라, 바닥부터 만드는 것이기 때문에 자유로운 커스터마이징도 가능하다.

 

2, 5번의 목적을 충족시키기 위해 gh-pages를 이용해 github.io에 배포하기로 결정했다.

사실 간단하게 배포하려면 Vercel을 이용한 배포가 가장 간단하다.

실제로 작성 당시 진행 중인 외주 프로젝트는 Vercel을 이용해서 배포 중이다.

하지만, Vercel은 최대 12개의 serverless function만 올릴 수 있다는 단점이 있다.

Serverless function

간단하게 /pages 폴더 아래에 존재하는 page component 함수를 의미.
즉, 12개의 제한은 같은 도메인 내에 하위 도메인(디렉토리)이 12개만 업로드 가능.

 

 

실현

그럼 시작해보자.

 

프로젝트 생성

우선 프로젝트를 생성한다.

npx create-next-app woong-pool --typescript

 

이름은 woong-pool... 웅덩이로 정했다..ㅎ

이 명령을 수행하고 나면 5가지의 선택 옵션이 나오는데, 본인은 다음과 같이 설정했다.

ESLint - yes
Tailwind CSS - yes
`src/` directory - yes
App router (recommend) - no
import alias - no

 

ESLint는 오류검사를 위해 필수로 설치한다.

 

Tailwindcss를 사용할 예정이기 때문에 간단하게 설정하기 위해 초기화할 때 설치한다.

 

`/pages`를 `/(루트)`에 두는 것 보다 페이지에 필요한 에셋 대부분을 `/src`에 두는 것을 선호하기 때문에

/src 디렉토리를 쓰도록 설정한다.

 

App router는 사용방법을 아직 잘 몰라서 일단 사용하진 않는다.

(전에 이걸 yes로 초기화 한 적이 있는데 폴더 구조가 상당히 달라져서 헤맸던 기억이...)

 

import alias는 나중에 개인적으로 커스텀할 예정이라 no.

(나중에 ../components 대신 @/components 와 같이 커스텀할 예정)

 

 

프로젝트 초기화

이제 기본적인 설정을 해보자.

우선 gh-pages에 배포할 예정이니 gh-pages 패키지를 추가하자.

npm i gh-pages

 

package.json에서 다음과 같은 한 줄을 추가하자.

{
  ...
  "homepage": "https://wjlee611.github.io/",
}

 

보통 위의 주소 뒤에 리파지토리 이름을 더 붙이는데,

본인은 special repository같이 실제로 저 주소에 deploy하기 위해 저렇게 설정했다.

 

여기서 난 더욱 간결화된 배포를 원했다.

그래서 이번에 처음으로 github action을 사용해보기로 결정했다.

따라서 이 기능을 활용하기 위해 몇가지 설정이 필요하다.

 

package.json에서 다음과 같은 한 줄도 추가하자.

{
  ...
  "script: {
    ...
    "export": "next export",
  }
}

 

나중에 action에서 `npm run export` 명령어를 사용하기 위함이다.

 

또한 next.config.js 파일을 다음과 같이 수정하자.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  output: "export",
  images: {
    unoptimized: true,
  },
};

module.exports = nextConfig;

 

output: "export"로 설정한다.

여기서 images.unoptimized: true는 빌드시 생기는 경고때문에 추가했다.

어차피 지금은 이미지 최적화에 대해 자세하게 모르기도 하고, 코드상으로도 구현하지 않기에

일단은 이미지 최적화 기능은 끄는것으로 설정했다.

 

 

Github & Action

리파지토리를 만들어주자.

여기서 주의해야 할 점은 반드시 이름은 wjlee611.github.io로 설정하는 것과

repository를 public으로 열어놓는다는 점이다.

 

생성하고 나서 아래의 명령어를 woong-pool 폴더에서 입력하여 원격 저장소와 연결 및 push한다.

git remote add origin https://github.com/wjlee611/wjlee611.github.io.git
git branch -M main
git push -u origin main

 

그리고나서 wjlee611.github.io 리포를 새로고침하면 아까 만들어둔 woong-pool이 잘 올라가있다.

 

이제 Settings > pages 로 들어가서 몇가지 설정을 해주자.

먼저 Source를 Github Action으로 설정한다.

그리고 아래에 workflow가 Next.js로 자동으로 설정되는데 Configure를 눌러준다.

그리고 자동완성된 명령어 대신 아래의 명령어 집합을 입력한다.

name: Deploy Next.js site to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ["main"]

# For deploy
permissions:
  contents: write

jobs:
  # Build job
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Install and Build
        run: |
          npm ci
          npm run build
          npm run export
          touch out/.nojekyll
      
      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          branch: gh-pages
          folder: out

 

하나하나 뜯어보며 알아보자.

on: push: branches: ["main"]
배열에 들어있는 브랜치에 변화가 생겼을 때 아래의 작업을 수행한다.

permission: contents: white
아래의 amesIves/github-pages-deploy-action@v4가 리포에 접근하기 위한 권한을 열어준다.

jobs: build: runs-on: ubuntu-latest
실제로 작업이 실행된다. ubuntu-latest 환경에서 진행된다. (깃허브 서버)

... steps
- name: Checkout
작업을 초기화 및 시작한다. actions/checkout@v3 사용.

- name: Install and Build
ubuntu 안에서 아래의 명령어를 실행하여 프로젝트를 빌드한다.
명령어가 종료된 시점에서 /out 디렉토리에 빌드된 정적 웹사이트가 나온다.
이 때, 4번째 줄 명령어 때문에 .nojekyll 파일이 생성될텐데,
이는 자동으로 jekyll을 이용한 정적 파일 생성을 방지한다.

- name: Deploy
folder: out에 생성된 정적 웹사이트를 branch: gh-pages에 호스팅한다.
amesIves/github-pages-deploy-action@v4를 이용한다.

 

이제 다시 Settings > pages 로 들어가서 Source를 Deploy from a branch로 바꿔준다.

그리고 아래의 Branch를 gh-pages로 설정하면 끝!

 

 

테스트

수정사항을 만들고 main 브랜치에 push해보자.

그러면 아래와 같이 최신화된 웹사이트를 action이 자동으로 빌드 및 배포해준다!

Action: Deploy Next.js site to Pages (우리가 만든 것!)

 

Action: pages-build-deployment (by amesIves/github-pages-deploy-action@v4)

 

그러면 아래와 같이 gh-pages를 이용한 사이트 배포 완료!

웅덩이

 

특수 리파지토리로 만들었기 때문에 주소 뒤에 별도의 리파지토리가 붙지 않고,

이미지와 css역시 정상적으로 나온다.

 

이제 다음부터는 천천히 블로그 기능을 만들어보자.