GitLab Pages 공개 폴더

Tier: Free, Premium, Ultimate Offering: GitLab.com, 자체 관리, GitLab Dedicated

다음 지침을 따라 다음 프레임워크의 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

참고: GitLab Pages는 정적 사이트만 지원합니다. SvelteKit의 경우, adapter-static을 사용할 수 있습니다.

adapter-static을 사용할 때, svelte.config.js에 다음을 추가하십시오: 

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

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

Next.js

참고: GitLab Pages는 정적 사이트만 지원합니다. Next.js의 경우, Next의 정적 HTML 내보내기 기능을 사용할 수 있습니다.

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

참고: GitLab Pages는 정적 사이트만 지원합니다.

기본적으로 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 폴더를 생성하는 작업을 설정한 경우 폴더를 커밋할 필요는 없습니다.

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