GitLabの組み込みNGINXで別のREST-APIとVue.jsで作ったページを呼ぶ方法

概要

• Ubuntuで公式の手順でGitLabサーバーを起動した場合、組み込みNGINXが起動する。
• 同サーバー別ポートで別REST-APIサービスを起動するために上記のNGINXを用いたい。
• ついでに、Vue.jsで作ったサイトも同NGINXで表示したい。
• GitLabの設定ファイルのcustom_nginx_configを利用してこれらを実現する。

前提

• Ubuntu 18.04.6
• Ruby Version: 2.7.5p203
• Gem Version: 3.1.4
• Bundler Version:2.3.15
• Rake Version: 13.0.6
• Redis Version: 6.2.7
• Sidekiq Version:6.4.0
• GitLab: 15.2.2-ee
• PostgreSQL: 13.6
• GitLab Shell: 14.9.0
  • 上記はsudo gitlab-rake gitlab:env:infoにて確認

背景

• 契約VPSは一つしかなく、家族向けのGitLabサーバーを立ち上げるのに使ってしまった。
• しかし、REST APIなどを使った遊びもしたい。
• そこで、GitLabサーバーの組み込みNGINXをリバースプロキシにした。
• GitLabサーバーはgitlab.hoge.com, REST APIサーバーはhoge.com:8000を利用する。

GitLabサーバーの準備

• セルフマネージドGitLabをインストール-公式ページを見ながらインストール。

GitLabサーバとREST APIサーバーの暗号化(https対応)

• certbotクライアントが無ければインストールしておく

which certbot
sudo apt-get install certbot

• gitlabサーバが起動していたら停止

sudo gitlab-ctl stop

• コマンドの実行
  • 今回は2ドメインをまとめて実行する
  • 別々に実行し、それぞれのファイルを作っても良い

sudo certbot certonly --standalone -d hoge.com -d gitlab.hoge.com 

• 以下が出たら2を入力

What would you like to do?
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
1: Keep the existing certificate for now
2: Renew & replace the cert (limit ~5 per 7 days)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

• 以下のように表示される

IMPORTANT NOTES:
 - Congratulations! Your certificate and chain have been saved at:
   /etc/letsencrypt/live/gitlab.hoge.com/fullchain.pem
   Your key file has been saved at:
   /etc/letsencrypt/live/gitlab.hoge.com/privkey.pem
   Your cert will expire on YYYY-MM-DD. To obtain a new or tweaked
   version of this certificate in the future, simply run certbot
   again. To non-interactively renew *all* of your certificates, run
   "certbot renew"
 - If you like Certbot, please consider supporting our work by:

   Donating to ISRG / Let's Encrypt:   https://letsencrypt.org/donate
   Donating to EFF:                    https://eff.org/donate-le

• ID(メールアドレス)を要求されたら、適切なメールアドレスを入力。

GitLabサーバーと組み込みNGINXの設定

• 設定ファイルをひらく

sudo vi /etc/gitlab/gitlab.rb

• 'external_url'が適切になっているか確認し、必要なら直す。

external_url 'https://gitlab.hoge.com/'

• certbotで発行したSSL証明書を設定。

nginx['ssl_certificate'] = "/etc/letsencrypt/live/gitlab.hoge.com/fullchain.pem"
nginx['ssl_certificate_key'] = "/etc/letsencrypt/live/gitlab.hoge.com/privkey.pem"

• 組み込みnginxの追加設定ファイルを設定

nginx['custom_nginx_config'] = "include /etc/nginx/conf.d/hoge.conf;"

custom_nginx_configの中身を編集

• 以下のように編集。ただし、注意する点もある(自分はハマった)。
  • 1つ目のlocationのパスは"/api/"であることに注意(末尾に"/"がある)。
  • locationが"/api"だと、"hoge.com/api/moge/"にアクセス時に"http://localhost:8000//moge/"のようにスラッシュが重なる。
  • proxy_passは"http://localhost:8000/;"であることに注意(末尾に"/"がある)。
  • proxy_passが"http://localhost:8000;"だと、"hoge.com/api/moge/"にアクセス時に"http://localhost:8000/api/moge/"のようにlocationのパス一致以降にならない。
  • 2つ目のlocationは"/"なので、"hoge.com"にアクセス時に表示するhtmlファイルを配置する場所を表す。
  • htmlファイルの位置は"root"で書く。末尾に"/"は不要。

server {
        listen 443 default_server;
        listen [::]:443 default_server;
        server_name hoge.com;

        ssl on;
        ssl_certificate /etc/letsencrypt/live/gitlab.hoge.com/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/gitlab.hoge.com/privkey.pem;

        location /api/ {
                proxy_pass http://localhost:8000/;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto $scheme;
                proxy_set_header Host $http_host;
                proxy_redirect off;
        }

        location / {
                root /var/www/html;
        }
}

GitLabサーバーの設定再構成と起動

• 設定を反映する。
• "custom_nginx_config"を変更した時も以下を実行する

sudo gitlab-ctl reconfigure

• GitLabを再起動。

sudo gitlab-ctl start

GitLab組み込みNGINXのログを確認する方法

• 以下のコマンドでストリームで表示される

sudo gitlab-ctl tail nginx

HTMLファイルの配置

• "/var/www/html"以下にhtmlファイルを配置
• 今回はvue.js製のwebページを使うので、builしてできた"dist"以下をそのままコピー。
• 以下は操作イメージ。

cd ~/vue-development
npm run build
sudo cp dist/* /var/www/html/

確認

• REST APIが利用できることを確認

curl https://hoge.com/api/

• ブラウザで"https://hoge.com/"を開き、vue.jsで作ったページが見えることを確認。
• ブラウザで"https://gitlab.hoge.com/"を開き、GItLabサーバーに接続できることを確認。

おわりに

• この方法を利用すれば、別のポートのサービスも、webサイトも利用できる。
• 転送するサービスを増やしたい場合、custom_nginx_configのlocationを追加すればよい。
• Enjoy NGINX!