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のポートを指定します。  

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

### セキュリティグループの編集
Cloud9のEC2のセキュリティグループより、8080ポートを自分のIPアドレスのみを許可します。  
![スクリーンショット 2023-05-14 16.42.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1412976/658be3c3-28c8-93c8-d550-ded3b872db95.png)


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

実行結果↓  
```bash
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アドレスをコピーして、ポートを指定することでアクセスが可能です。  
![スクリーンショット 2023-05-14 16.58.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1412976/a62d44ec-fc42-8599-42da-0a0df1f573d1.png)

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

`http://パブリックIPv4アドレス:8080`でアクセスすることでブラウザ上で確認が可能となります。  
![スクリーンショット 2023-05-14 17.05.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1412976/888493ac-d665-f9de-13a8-c8aa7304c43e.png)