📌 깃랩(Gitlab) 무료로 웹사이트 배포하는 방법(웹 호스팅)
요즘 정적 웹사이트의 경우, 별도의 서버를 구성하지 않고도 손쉽게 배포를 할 수 있는 방법들이 다양하게 제공되고 있다. 이를 이용해야 할 경우들이 몇몇 있는데, 개인 프로젝트를 만들거나, 포트폴리오 또는 간단한 웹사이트를 만들 때가 이에 해당한다.
그 중에서도 Gitlab Pages는 Gitlab의 CI/CD 기능을 기반으로 안정적이고 유연한 무료 웹 호스팅 서비스를 제공한다. 깃허브에 비해 상대적으로 덜 알려져 있지만, Gitlab을 적극적으로 활용하고 있는 개발자라면 한 번쯤은 알아두면 좋을 실용적인 선택지다.
1. Gitlab Pages 시작하기
https://docs.gitlab.com/user/project/pages/
GitLab Pages | GitLab Docs
GitLab Pages Tier: Free, Premium, UltimateOffering: GitLab.com, GitLab Self-Managed, GitLab Dedicated GitLab Pages publishes static websites directly from a repository in GitLab. These websites: Deploy automatically with GitLab CI/CD pipelines.Support any
docs.gitlab.com
The most-comprehensive AI-powered DevSecOps platform
From planning to production, bring teams together in one application. Ship secure code more efficiently to deliver value faster.
about.gitlab.com
2. 프로젝트 생성하기
깃랩에 들어가서 로그인을 한 뒤,
( your work > Projects > New Project > Create blank project )
Create blank project를 클릭하여 새로운 프로젝트를 생성한다.
1. Project name을 입력한다.
* {useName}.gitlab.io 형식으로 하면 깔끔한 URL 생성이 가능하다고 한다.
2. groups 또는 Users에서 원하는 그룹이나 계정을 선택한다.
3. Visibility Level은 Public을 선택한다.
3. 파일(index.html) 추가하기
프로젝트를 생성한 후,
+ 버튼 > New file 을 클릭하여 새 파일을 추가해준다.
파일은 index.html 로 설정
<html>
<head>
<title>웹 호스팅</title>
</head>
<body>
<div>
<h1>
웹 호스팅 테스트입니당
</h1>
</div>
</body>
</html>
4. 파일(.gitlab-ci.yml) 추가하기
pages:
stage: deploy
script:
- mkdir .public
- cp -r * .public
- mv .public public
artifacts:
paths:
- publicindex.html파일을 추가했으면 .gitlab-ci.yml 파일도 추가를 해주면 되는데,
이건 Gitlab CI/CD 파이프 라인에서 웹사이트를 정적 파일로 빌드해서 배포하는 pages job이다.
Gitlab은 public/ 디렉토리를 찾아서 그 안의 파일을 Pages에 호스팅해주기 때문에, 이걸 맞춰주는게 핵심!
1. pages
: 이 이름이 무조건 pages여야 깃랩이 배포를 트리거 한다.
2. stage: deploy
: 이 job이 언제 실행될 지를 지정하는 것, 일반적으로 깃랩 CI 파이프라인은 build, test, deploy 순으로 구성되는데, 여기서는 페이지를 배포하는 단계니까 deploy로 설정한 것이다.
3. script
: 이 job에서 실제로 실행할 명령어들
4. artifacts
: job의 결과물(산출물)을 저장하는 역할,
public/ 폴더를 깃랩이 CI 결과물로 저장하고, 깃랩 Pages 서버가 이걸 웹에 공개하는 것
5. Pipelines
project의 왼쪽 메뉴에서
Build > Pipelines 에 들어가면 빌드 상황을 확인할 수 있다.
여기서 Stages 에 체크표시가 되어있으면 배포가 완료된 것!
✔️ URL 전체공개 하는 방법
프로젝트의 왼쪽 메뉴에서
Setting > General 에 들어간 후, Visibility, project features, permissions 의 모든 요소들을
'Everyone With Access' 로 바꿔주면 다른 사람한테 내 웹 사이트 보여줄 수 있다~~!
