# 20230320_NUTMEGにステージング環境を導入する
(例：20210901_LT会を開催しました)
###### tags: `ブログ記事`

- [x] 公開（ブログ公開担当者がいじるやつ）

太字斜体で書いてある内容を埋めて行ってください．
文章，画像は太字斜体の下の行に入れてください．
最初に書く時はREADMEを読んだら読むといいと思います．

<br>

## 表示されない情報
***書いた人の名前(自己紹介文と同じ名前)***
{
つさば
}

***記事の簡単な説明(検索した時にタイトルの下に出てくる文章)***
{
NUTMEGのプロダクトメンバーが誰でも簡単に立ち上げられるステージング環境をCloudflared（Cloudflare Argo Tunnel）を使用して構築しました。DockerコンテナとDocker Composeを使用することで簡単に環境を立ち上げられます。これはNUTMEGインフラチームが悩まされていた開発・本番環境差異で起こるバグ問題の解決に貢献します。
}

<br>

## 表示される部分
***サムネイル画像***
{
}

***カテゴリ***
以下の中から該当しそうなカテゴリを選択してください
※一つだけ選択してください
- [ ] 対外活動
- [x] 活動の様子
- [ ] メンバーの趣味

***タグ***
以下の中から該当しそうなカテゴリを選択してください．当てはまる物がない場合は適宜追加してください.
言語
- [ ] HTML
- [ ] CSS
- [ ] Python
- [ ] Go
- [ ] Ruby
- [ ] JavaScript
- [ ] TypeScript
- [ ] Dart
- [ ] Rust
- [ ] Kotlin
- [ ] Swift
フレームワーク・ライブラリ
- [ ] Ruby on rails
- [ ] Vue.js
- [ ] Nuxt.js
- [ ] React.js
- [ ] Next.js
- [ ] Gin
- [ ] Flluter
ツール
- [ ] GitHub
- [ ] ターミナル
- [ ] WSL
- [ ] Ubuntu
- [x] Docker
- [ ] Raspberry Pi
- [ ] Figma
分野
- [ ] Web-design
- [ ] API関係

---

***以下に本文を記載してください***

こんにちは。

NUTMEGでNUTMEGクラウドの開発・運用を行っているM1大浦です。

これまでNUTMEGでの開発を円滑に進めるために様々なインフラ開発を行ってきました。その中でも，最近行った「簡易的なステージング環境を構築した話」について紹介させていただきます。

# ステージング環境とは

ステージング環境とはシステム開発において最終的なテストを行う環境のことです。

リリースに向けて本番を想定した環境を用意し，実際に使ってみることでバグが存在しないことを確認します。ステージング環境で問題が発生しないことを確認出来たら本番環境にデプロイを行います。

簡単に言うとリハーサル会場のようなものです。

# 導入経緯
これまでのNUTMEGには，テスト環境やステージング環境がなく，開発環境とデプロイ環境の差異により，問題が起きることが多くありました。そのたびNUTMEGインフラチームは時間を削ってインシデント対応を行うというのがいつもの流れでした。

ステージング環境やテスト環境を作ることで，この問題は解決できますが，それを運用するためにインフラチームの負担が増えるのは本末転倒です。

そこで，「NUTMEGのプロダクトメンバー自身が簡単に立ち上げられるステージング環境があれば」と思い立ったのが経緯です。

# 使用技術
ステージング環境の立ち上げには**Cloudflared**（旧 Cloudflare Argo Tunnel）を使用しました。


Cloudflaredは，Cloudflareのネットワークとの間にトンネルを作成するツールです。これにより，自身のサーバーのポートを開放せずに公開することが可能となっています。

NUTMEGのプロダクトはほぼすべて，`Docker`，`Docker Compose`を使用しており，開発者は`docker compose up`のコマンドで開発環境の立ち上げを行っています。

Cloudflaredが同時に立ち上がる`docker-compose.stage.yml`を作成することで，開発環境を立ち上げるのと同じ労力でステージング環境を立ち上げることができます。

開発者の労力はそのまま，インフラチームのインシデント対応が減ってみんなハッピーというのが思い描く**新時代**です。

# 構築方法

最初の構築はすこし大変ですが，一度行ってしまえばどこの誰でもステージング環境を立ち上げることができます。

楽するために努力するは私の座右の銘です。

がんばりましょう。

## ステージング用のdocker-composeファイルを作成

NUTMEGでは開発に`Docker`，`Docker Compose`を使用しています。
既存の`docker-compose.yml`を参考に`docker-compose.stage.yml`を作成し，cloudflareのサービスを追加します。

設定項目は以下の通りです。

- `cloudflare/cloudflared:latest` コンテナを使用
- `./cloudflare/stage`を作成
- `/home/nonroot/.cloudflared`にマウント
- 起動時にtunnelを起動

`docker-compose.stage.yml`

version: '3'
services:
  cloudflare:
    image: 'cloudflare/cloudflared:latest'
    container_name: "cloudflare"
    volumes: ['./cloudflare/stage:/home/nonroot/.cloudflared']
    command: tunnel run

  service-1:
    ...

  service-2:
    ...

  service-3:
    ...
 

ここで`./cloudflare/stage`ディレクトリをDockerユーザーでも書き込み可能にしておきます。

chmod o+rwx ./cloudflare/stage/

## Cloudflareの設定

あとはcloudflareの設定です。

### ログイン

cloudflare.com に移動しログインします。
ここではアカウント作成手順は省略します。

### cloudflareを認証

以下のコマンドを入力し，立ち上げるcloudflareコンテナを認証します。

docker compose -f docker-compose.stage.yml run --rm cloudflare tunnel login

コマンドを入力するとログインURLが表示されるのでログイン。

# 出力

Please open the following URL and log in with your Cloudflare account:
https://dash.cloudflare.com/argotunnel...
Leave cloudflared running to download the cert automatically.
...

URLの先に飛ぶと以下の画面に遷移し，使用したいドメインで認証。

以上でcloudflareの認証が完了します。

認証情報は`./cloudflare/stage/cert.pem`に保存されます。

### Tunnelの作成

次にトンネルを作成します。
名前通りコンテナとClouflareをつなぐトンネルです。
これによって，外部からのアクセスを可能にします。

今回はNUTMEGで開発しているgroup-manager-2のステージング環境を作成するため，`<tunnel-name>`は`gm2-stg`という名前に設定しました。

docker compose -f docker-compose.stage.yml run --rm cloudflare tunnel create <tunnel-name>

以上が正常に完了すると`./cloudflare/stage/<tunnel-id>.json`が保存されます。

### DNS・リバースプロキシの設定

最後にDNS・リバースプロキシの設定です。

`cloudflare/stage/config.yml`に設定ファイルを作成します。
`hostname`に対して接続するサービスを指定します。
> 例：service-1.stg.nutfes.net にアクセスすると`docker-compose.stage.yml`の`service-1`の8080番ポートに飛ぶ。

`cloudflare/stage/config.yml`

tunnel: <tunnel-id>
credentials-file: /home/nonroot/.cloudflared/<tunnel-id>.json
protocol: http2

ingress:
  - hostname: service-1.stg.nutfes.net
    service: http://service-1:8080
  - hostname: service-2.stg.nutfes.net
    service: http://service-2:8000
  - hostname: service-3.stg.nutfes.net
    service: http://service-3:3000
  - service: http_status:404

configで設定したすべてのhostmameに対して以下のコマンドを実行し，CloudflareのDNSを設定します。

docker compose -f docker-compose.stage.yml run --rm cloudflare tunnel route dns <tunnel-name> <hostname(example.hoge.net)>

## 起動

以上の設定を済ませてしまえば，今後は以下コマンドで起動するだけです。

docker compose -f docker-compose.stage.yml up

うまくできていれば以下のログが確認できるはずです。

INF Connection <tunnel-id> registered with protocol: http2

ブラウザで`<hostname>`を確認してみるとちゃんと表示できますね。


## 最後に

以上がNUTMEGにステージング環境を導入した経緯とその方法でした。

NUTMEGのでの開発→デプロイのプロセスがスムーズになり，バグ対応も迅速化されることに期待します。

私たちNUTMEGインフラチームはNUTMEGメンバーが**使いやすいインフラ**を構築することを目標として日々活動しています。今後も使いやすいインフラを目指して，様々な技術に挑戦していきたいと思います。