GitLabはじめました

元画像を表示

この記事は，SYSKEN Advent Calendar 2018 の3日目の記事です。

副部長のぐらたんです。GitLabを使ってあれこれするようになったのでGitLabの布教を兼ねてこの記事を書くことにしました。今回は内蔵CIとPages機能について話していきます。

GitLabとは

Gitホスティングサービスの一種です。雑に言えばGitHubとかBitbucketとかと似たようなやつです。ただし無料でオンプレ運用できたりCI/CDとかPages機能が内蔵されているなど他のサービスとの差はあります。

なにができるのか

内蔵されてるCI/CDを使ってpushがあったらテストを走らせたり，静的なウェブサイトを公開したり(Pages)といろいろ便利なことが出来ます。いいですね。

ちょっと使ってみる

上の説明だけだと寂しいので簡単なサンプルを添えて流れを説明していきます。Pugを一緒に使って簡単なウェブサイトを公開してみましょう。環境はLinuxを想定していますがmacOSでも多分動きます。Windowsは知りません。

リポジトリを作る

gitlab.comでささっとアカウントを作ってプロジェクト(GitHubのリポジトリに相当するもの)を作ってください。

公開するサイトを作る

リポジトリのルートに ‘index.pug’ という名前のファイルを作って下のサンプルをコピペしてください。

doctype html

html(lang="ja")
h1 Hello Pug! //- ここの'Hello Pug!'は好きな文字に変えて大丈夫です

次に同じくリポジトリのルートに ‘package.json’ を作成してください。中身は以下のようにします。

{
  "name": "advent-sample-2018",
  "version": "1.0.0",
  "dependencies": {
    "pug": "^2.0.3",
    "pug-cli": "^1.0.0-alpha6"
  },
  "scripts": {
    "pug": "node_modules/.bin/pug",
    "build": "pug --pretty index.pug"
  }
}

node_modulesをpushすると大変なことになるのでignoreしましょう。 ‘.gitignore’ を作成してください。中身は以下のようにします。

# npm
node_modules
package-lock.json

# build result
index.html

ここまでできたら一度ローカル環境でちゃんと動くか確認しましょう。以下のコマンドを実行してみて下さい。index.pugと同じ階層にindex.htmlが生成されるはずです。生成されたファイルをお好きなブラウザで開くと下の写真のように表示されることを確認してください。

npm install
npm run build

.gitlab-ci.ymlを作る

ここからが本題です。さっき作ったサイトをGitLab Pagesで公開してみましょう。

リポジトリのルートに ‘.gitlab-ci.yml’ という名前のファイルを作成してください。この中にGitLabのCIにあれこれやらせるための設定を書いていきます。下のサンプルをコピペしてください。

image: node:slim

pages:
cache:
paths:
  - node_modules/
script:
  - npm install
  - npm run build
  - mv index.html public/
  artifacts:
    paths:
    - public
  only:
    - master

中の設定を簡単に解説すると