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의 경우,
먼저 그 폴더의 이름을 충돌이 없는 대체 이름으로 바꿔야 합니다:
-
프로젝트 디렉토리에서 다음을 실행하세요:
mv public static
-
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
를 사용할 수 있습니다.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
폴더를 충돌이 없는 대체 이름으로 먼저 바꿔야 합니다:
-
프로젝트 디렉토리에서 다음을 실행하세요:
mv public static
-
nuxt.config.js
에 다음을 추가하세요:export default { target: 'static', generate: { dir: 'public' }, dir: { // Nuxt가 정적 파일을 위해 사용하는 폴더 이름(`public`)은 이미 // 빌드 출력을 위해 예약되어 있습니다. 따라서 우리는 기본값에서 벗어나 // 다음 대신 `static`이라는 폴더를 사용하고 있습니다. public: 'static' } }
-
Nuxt.js 애플리케이션을 정적 사이트 생성(Static Site Generation)하도록 구성하세요.
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 배포 파이프라인이 실행될 때 해당 이름의 artifact을 찾습니다.
배포 전에 npm run build
와 같이 public
폴더를 생성하는 작업을 설정한 경우, 폴더를 커밋할 필요는 없습니다.
사이트를 로컬에서 빌드하는 것을 선호하는 경우, public
폴더를 커밋하고 작업 중에 빌드 단계를 생략할 수 있습니다.