• Eleventy
• Astro
• SvelteKit
• Next.js
• Nuxt.js
• Vite
• Webpack
• public 폴더를 커밋해야 할까요?

GitLab Pages 공개 폴더

- GitLab 16.1부터 .gitlab-ci.yml에서 게시된 폴더를 구성할 수 있는 기능을 소개했으므로 더 이상 프레임워크 구성을 변경할 필요가 없습니다. 자세한 내용은 페이지와 함께 배포할 사용자 정의 폴더 설정을 참조하세요.

다음 프레임워크를 위해 public 폴더를 구성하는 지침을 따르세요.

Eleventy

Eleventy의 경우 다음 중 하나를 수행해야 합니다:

• Eleventy 빌드 명령에 --output=public 플래그를 추가합니다. 예를 들어:

  npx @11ty/eleventy --input=path/to/sourcefiles --output=public
  

• .eleventy.js 파일에 다음을 추가합니다:

  // .eleventy.js
  module.exports = function(eleventyConfig) {
    return {
      dir: {
        output: "public"
      }
    }
  };
  

Astro

기본적으로 Astro는 정적 에셋을 저장하기 위해 public 폴더를 사용합니다. GitLab Pages의 경우 해당 폴더를 충돌이 없는 대체 이름으로 바꿔야 합니다:

1. 프로젝트 디렉터리에서 다음을 실행합니다:

   mv public static
   

2. astro.config.mjs에 다음을 추가합니다. 이 코드는 Astro에 폴더 이름 재매핑에 대해 알려줍니다:

   // astro.config.mjs
   import { defineConfig } from 'astro/config';
      
   export default defineConfig({
     // GitLab Pages에서 노출된 파일은 "public"이라는 폴더에 있어야 합니다.
     // 따라서 Astro에게 정적 빌드 출력을 해당 이름의 폴더에 넣도록 지시합니다.
     outDir: 'public',
        
     // Astro가 정적 파일에 사용하는 폴더 이름인 `public`은 이미 빌드 출력을 위해 예약되어 있습니다.
     // 따라서 기본값과 달리 `static`이라는 폴더를 사용합니다.
     publicDir: 'static',
   });
   

SvelteKit

adapter-static을 사용하는 경우, svelte.config.js에 다음을 추가합니다:

// svelte.config.js
import adapter from '@sveltejs/adapter-static';

export default {
  kit: {
    adapter: adapter({
      pages: 'public'
    })
  }
};

Next.js

Next.js 13의 릴리스로 많은 것이 변경되었습니다. 모든 정적 에셋이 올바르게 내보내지도록 다음 next.config.js를 사용하는 것이 권장됩니다:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    unoptimized: true,
  },
  assetPrefix: "https://example.gitlab.io/namespace-here/my-gitlab-project/"
}

module.exports = nextConfig

예시 .gitlab-ci.yml은 다음과 같을 수 있습니다:

pages:
  before_script:
    - npm install
  script:
    - npm run build
    - mv out/* public
  artifacts:
    paths:
      - public

Nuxt.js

기본적으로 Nuxt는 정적 에셋을 저장하기 위해 public 폴더를 사용합니다. GitLab Pages의 경우 public 폴더를 충돌이 없는 대체 이름으로 먼저 바꿔야 합니다:

1. 프로젝트 디렉터리에서 다음을 실행합니다:

   mv public static
   

2. nuxt.config.js에 다음을 추가합니다:

   export default {
     target: 'static',
     generate: {
       dir: 'public'
     },
     dir: {
       // Nuxt가 정적 파일에 사용하는 폴더 이름인 `public`은 이미 빌드 출력을 위해 예약되어 있습니다.
       // 따라서 기본값과 달리 `static`이라는 폴더를 사용합니다.
       public: 'static'
     }
   }
   

3. Nuxt.js 애플리케이션을 정적 사이트 생성하도록 구성하세요.

Vite

vite.config.js를 다음과 같이 업데이트합니다:

// vite.config.js
export default {
  build: {
    outDir: 'public'
  }
}

Webpack

webpack.config.js를 다음과 같이 업데이트합니다:

// webpack.config.js
module.exports = {
  output: {
    path: __dirname + '/public'
  }
};

public 폴더를 커밋해야 할까요?

필요하지 않습니다. 그러나 GitLab Pages 배포 파이프라인 실행 시 해당 이름의 아티팩트를 찾습니다. 예를 들어 npm run build와 같이 배포 전에 public 폴더를 생성하는 Job을 설정하면 폴더를 커밋할 필요가 없습니다.

로컬에서 사이트를 빌드하는 것을 선호하는 경우 public 폴더를 커밋하고 Job 동안 빌드 단계를 생략할 수 있습니다.