GitLabはじめました

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

最近腸内アポカリプス(腹部の激痛)に悩まされているぐらたんです。GitLabを使ってあれこれするようになったのでGitLabの布教を兼ねてこの記事を書くことにしました。今回は内蔵CIとPages機能について話していきます。

目次

  1. GitLabとは
  2. なにができるのか
  3. ちょっと使ってみる

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 腸内アポカリプス //- ここの'腸内アポカリプス'は好きな文字に変えて大丈夫です

次に同じくリポジトリのルートに ‘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

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

  • image: CIでウェーイするDockerコンテナを指定します。
  • pages: CIで実行するJobの名前です。
  • cache: キャッシュするディレクトリ・ファイルを指定します。
  • script: ここに書いたスクリプトが上から順に実行されます。
  • artifacts: 公開する成果物ディレクトリ・ファイルを指定します。
  • only: ここに書いたブランチに対してpushがあったときのみCIが動きます。

詳しく解説すると私が死んでしまうので詳しい設定については以下のサイトを参考にしてみてください。

英語: https://docs.gitlab.com/ce/ci/yaml/

日本語: https://qiita.com/ynott/items/1ff698868ef85e50f5a1

Pages上に公開する

ここまでできたら一度git pushしてください。pushするとGitLab上のプロジェクトページのCI/CD=>ジョブで走ってるジョブを確認できます。

ジョブが成功したら

https://{ユーザー名}.gitlab.io/{リポジトリの名前}

にアクセスしてみてください。先程ローカルで確認したのと同じものが表示されるはずです。

※初回は表示されるようになるまで数分かかるので404が出ても焦らないでください。気長に待ちましょう。

最後に

今回はGitLabの便利な機能について軽く解説してみましたが,GitLabは機能がてんこ盛りなのでここで触れていない機能も山のようにあります。ぜひ実際にプロジェクトを運用しながら他の機能も使ってみてください。

明日は縣が担当です。内容未定ですがまぁ多分面白いことを書いてくれると思います。

リンク

サンプルコード: https://gitlab.com/glatan/advent-sample-2018

デモサイト: https://glatan.gitlab.io/advent-sample-2018/


コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください