.gitlab-ci.yml에서 게시 폴더를 구성할 수 있습니다. 더 이상 프레임워크 구성을 변경할 필요가 없습니다. 자세한 내용은 Pages로 배포할 사용자 정의 폴더 설정을 참고합니다.

다음 프레임워크에서 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 requires exposed files to be located in a folder called "public".
     // This instructs Astro to put the static build output in a folder of that name.
     outDir: 'public',
   
     // The folder name Astro uses for static files (`public`) is already reserved
     // for the build output. This uses a folder called `static` instead.
     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  # specifies that this is a Pages job and publishes the default public directory

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

Nuxt.js#

Nuxt는 기본적으로 정적 자산을 저장하는 데 public 폴더를 사용합니다. GitLab Pages에서는 먼저 public 폴더의 이름을 충돌하지 않는 다른 이름으로 바꿉니다.

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

   mv public static
   

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

   export default {
     target: 'static',
     generate: {
       dir: 'public'
     },
     dir: {
       // The folder name Nuxt uses for static files (`public`) is already
       // reserved for the build output. This uses a folder called `static` instead.
       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 실행 중에는 빌드 단계를 생략할 수 있습니다.