Cloud9+Docker ComposeでSwagger Editorを開く

Cloud9を利用して、Swagger Editorを利用したかったので試してみました。
最小限の対応で行います。

環境

• AWS Cloud9
• Docker Compose(v2.17.3)
  • こちらを参考にインストール https://docs.docker.com/compose/install/linux/#install-the-plugin-manually

対応方法

docker-compose.yamlの準備

Cloud9ではポート 8080、8081、8082 を経由して HTTP を使用する必要があるため、ホスト側のポートを8080で指定します( https://docs.aws.amazon.com/ja_jp/cloud9/latest/user-guide/app-preview.html )
コンテナ側も8080のポートを指定します。

services:
  # Swagger Editor
  swagger-editor:
    image: swaggerapi/swagger-editor
    container_name: "swagger-editor"
    ports:
      - "8080:8080"

セキュリティグループの編集

Cloud9のEC2のセキュリティグループより、8080ポートを自分のIPアドレスのみを許可します。

実行

docker-compose.yamlが存在するディレクトリ内で以下のコマンドを実行します。

docker compose up

実行結果↓

XXXXX:~/environment/swagger $ docker compose up
[+] Running 13/13
 ✔ swagger-editor 12 layers [⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿]      0B/0B      Pulled                                                                                                                                           5.2s 
   ✔ 63b65145d645 Pull complete                                                                                                                                                                             0.8s 
   ✔ 8c7e1fd96380 Pull complete                                                                                                                                                                             1.3s 
   ✔ 86c5246c96db Pull complete                                                                                                                                                                             1.3s 
   ✔ b874033c43fb Pull complete                                                                                                                                                                             1.4s 
   ✔ dbe1551bd73f Pull complete                                                                                                                                                                             1.6s 
   ✔ 0d4f6b3f3de6 Pull complete                                                                                                                                                                             1.7s 
   ✔ 2a41f256c40f Pull complete                                                                                                                                                                             2.6s 
   ✔ d024d991094b Pull complete                                                                                                                                                                             2.7s 
   ✔ 8aed0d947118 Pull complete                                                                                                                                                                             2.7s 
   ✔ 911f2e3a75e9 Pull complete                                                                                                                                                                             2.8s 
   ✔ a5d4afd8ede0 Pull complete                                                                                                                                                                             3.2s 
   ✔ 3eeec1b42c92 Pull complete                                                                                                                                                                             3.2s 
[+] Running 1/1
 ✔ Container swagger-editor  Created                                                                                                                                                                        0.1s 
Attaching to swagger-editor

画面確認

Cloud9のEC2のパブリックIPv4アドレスをコピーして、ポートを指定することでアクセスが可能です。

オープンアドレスでそのまま開いてしまうと、通信がhttpsとなってしまうため、アクセスができなくなります。

http://パブリックIPv4アドレス:8080でアクセスすることでブラウザ上で確認が可能となります。