vue を gitlab pages (Gitlab CE) で公開しようとした時にちょこちょこ時間がかかってしまったので作業内容をメモ

1. 前提

• AWS EC2 + ALB で docker-compose.yml で gitlab を立ち上げている。
• DNS は Route53、SSL は ACM 。
• gitlab のバージョンは、11.8 。
• vue cli のバージョンは、3.2.1 。

2. docker-compose.yml の更新

• 下記の pages_external_url と gitlab_pages['inplace_chroot'] の行を追加。

web:
  image: 'gitlab/gitlab-ce:latest'
  container_name: 'gitlab'
  restart: always
  hostname: 'git.example.com'
  environment:
    GITLAB_OMNIBUS_CONFIG: |
        external_url 'https://git.example.com'
        nginx['listen_port'] = 80
        nginx['listen_https'] = false
        gitlab_rails['gitlab_shell_ssh_port'] = 22
        gitlab_rails['time_zone'] = 'Asia/Tokyo'
        gitlab_rails['gitlab_email_enabled'] = true
        gitlab_rails['gitlab_email_from'] = '[e-mail]'
        gitlab_rails['gitlab_email_display_name'] = 'Admin'
        gitlab_rails['gitlab_email_reply_to'] = '[e-mail]'
        gitlab_rails['smtp_enable'] = true
        gitlab_rails['smtp_address'] = 'xxxxx.us-east-1.amazonaws.com'
        gitlab_rails['smtp_port'] = 587
        gitlab_rails['smtp_user_name'] = 'xxxxxxxxxxxxx'
        gitlab_rails['smtp_password'] = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
        gitlab_rails['smtp_domain'] = 'example.com'
        gitlab_rails['smtp_authentication'] = 'login'
        gitlab_rails['smtp_enable_starttls_auto'] = true
+        pages_external_url 'https://pages.git.example.com'
+        gitlab_pages['inplace_chroot'] = true
  ports:
    - '8080:80'
    - '10022:22'
  volumes:
    - '/srv/gitlab/config:/etc/gitlab'
    - '/srv/gitlab/logs:/var/log/gitlab'
    - '/srv/gitlab/data:/var/opt/gitlab'

• gitlab 再起動

sudo docker-compose restart

• プロジェクトのメニューの Settings に Pages が増えているはず。

3. SSL 証明書の発行と、ALB の設定追加

AWS ACM

• *.pages.git.example.com の証明書を作成する。
  • 現状は、 https://git.example.com で gitlab を運用と仮定。

AWS ALB

• ターゲット作成
• リスナーのルール追加
• リスナーの証明書追加
  • 上記で発行した SSL を追加する。

4. プロジェクト(リポジトリ)の直下に .gitlab-ci.yml の作成

• vue create myproject を作ると public ディレクトリが作成されるが、ここでは邪魔なので削除している。
• tags は、 ci runner のための設定。

image: node:latest
pages:
  stage: deploy
  only:
    - master
  before_script:
    - 'npm install'
  script:
    - 'npm run build'
    - 'rm -fr public'
    - 'cp -pr dist public'
  tags:
    - shared
  artifacts:
    paths:
      - public

5. プロジェクト(リポジトリ)の直下に vue.config.js が無ければ作成

• css や js の読み込みを相対パスにしたかったから。
  • 下記は、都合上かなり無意味な記述している。やりたいことは publicPath: "./"

module.exports = {
  publicPath: process.env.NODE_ENV === "production" ? "./" : "./"
};

6. http のリダイレクト設定を ALB に追加

• pages_external_url で https を指定しても、リンクとして表示されるのは http 。
• どこか設定が悪いのかもしれないが、とりあえず http を https にリダイレクトできるようにした。

以上