Help us understand the problem. What is going on with this article?

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_urlgitlab_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'] = 'admin@example.com'
        gitlab_rails['gitlab_email_display_name'] = 'Admin'
        gitlab_rails['gitlab_email_reply_to'] = 'hello@example.com'
        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
  • プロジェクトのメニューの SettingsPages が増えているはず。

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_urlhttps を指定しても、リンクとして表示されるのは http
  • どこか設定が悪いのかもしれないが、とりあえず httphttps にリダイレクトできるようにした。

image.png

以上

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away