다음 프레임워크에 대한 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를 구성하려면 astro.config.mjs에 다음을 추가합니다:

   // 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.js 작동 방식이 많이 변경되었습니다. 모든 정적 에셋을 올바르게 내보낼 수 있도록 다음 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 예시는 다음과 같이 최소화할 수 있습니다:

create-pages:
  before_script:
    - npm install
  script:
    - npm run build
    - mv out/* public
  pages: true  # 이것이 Pages 작업임을 지정하고 기본 public 디렉토리를 게시합니다

이전 YAML 예시는 사용자 정의 잡 이름을 사용합니다.

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 폴더를 만드는 잡을 설정하면 폴더를 커밋할 필요가 없습니다.

사이트를 로컬에서 빌드하는 것을 선호한다면 public 폴더를 커밋하고 잡 실행 중에 빌드 단계를 생략할 수 있습니다.