【GitLab.com】 Vue.js / Nuxt.js でビルドしたファイルを GitLab Pages でホスティングさせるには

こちらの記事 qiita.com で紹介されているように、 GitLab.com ではプライベートリポジトリが無制限で無料らしい。しかも GitHub Pages と同じく、 GitLab Pages というホスティング機能まであるのだとか！

GitLab Pages でのホスティング方法は、 master ブランチの直下に .gitlab-ci.yml を配置した後、ローカルから GitLab.com に push してやるだけ。後は GitLab.com の方で CI が走り、ビルドされた静的ファイルを

https://[ユーザー名].gitlab.io/[プロジェクト名]

のURLに自動でホスティングしてくれる。

ホスティング対象の静的ファイルを直接 push するのであれば、こちらの記事 http://okakacacao.wpblog.jp/technology/gitlab-pages-introductionokakacacao.wpblog.jp を参考にして、リポジトリ直下に配置する .gitlab-ci.yml を

pages:
  stage: deploy
  script:
  - mkdir .public
  - cp -r * .public
  - mv .public public
  artifacts:
    paths:
    - public
  only:
  - master

と書いてやれば大丈夫だった。

Vue.js や Nuxt.js でビルドした静的ファイルをホスティングしたいのであれば、こちらの記事 qiita.com を参考にして、以下のようにすればOK。

【Vue.js の場合】

.gitlab-ci.yml を

image: node:latest
pages:
  stage: deploy
  only:
    - master
  before_script:
    - 'yarn config set cache-folder .yarn'
    - 'yarn install'
  script:
    - 'yarn build'
    - 'cp -pr dist public'
  artifacts:
    paths:
      - public

のように書いた後、 config/index.js の assetsPublicPath を '/' と書き換えてやればOK。

参考: qiita.com

【Nuxt.js の場合】

.gitlab-ci.yml を

image: node:latest
pages:
  stage: deploy
  only:
    - master
  before_script:
    - 'yarn config set cache-folder .yarn'
    - 'yarn install'
  script:
    - 'yarn generate'
    - 'cp -pr dist public'
  artifacts:
    paths:
      - public

のように書いた後、リポジトリ直下の nuxt.config.js の module.exports = { } 中の末尾に

,
router: {
  base: '/リポジトリ名/'
}

を書き加えてやる。また、 favicon.ico のパスも変えてやる必要があるので、同じく nuxt.config.js の

link: [
  { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]

を

link: [
  { rel: 'icon', type: 'image/x-icon', href: '/リポジトリ名/favicon.ico' }
]

のように書き加えてやればOK。

参考: fiahfy.blogspot.com

無料ユーザが GitHub Pages で Vue.js / Nuxt.js のファイルを public にしたくない場合、 Vue.js / Nuxt.js のリポジトリはローカルのみで管理するか、 Bitbucket などのプライベートリポジトリに push して、 dist ディレクトリのみを GitHub に push する、というやり方が必要だったが、 GitLab.com であれば、 Vue.js / Nuxt.js リポジトリを master に push するだけで、ビルドからホスティングまでやってくれる。

Vue.js / Nuxt.js リポジトリを GitLab.com に push するだけで ホスティングできる、というのはすごく気軽なので、これからは GitHub Pages ではなく GitLab Pages をメインにしていこうかな。