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をインストール-公式ページ](https://www.gitlab.jp/install/#ubuntu)を見ながらインストール。

# 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!