Cloud9 で プレビュー（Preview）ウインドウが表示されない時の対応方法


AWS のオンラインIDE **[Cloud9](https://aws.amazon.com/jp/cloud9/)** にて、**プレビュー画面を表示できずに躓いた**ため、ここに解決方法をメモしておきます。
ここでは、Vue.js を使って説明を進めていきますが、他の SPA（シングルページアプリケーション）や WEBアプリ開発でも対応方法は同じだと思います。
困っている方の参考になれば嬉しいです。

# サマリー：問題の現象と解決方法
## 正常時
Cloud9 で WEBアプリ開発をする際、
画面上部の「Preview」→「Preview Running Application」で簡易のブラウザが起動し、
アプリの挙動を確認することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341404/3cc0f603-bacc-7690-c79a-df464fa24dc2.png)

## トラブル時
しかし、「Preview」→「Preview Running Application」を選択しても、
期待通りにプレビュー画面が表示されないことがあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341404/586e1219-e5bb-ba55-45a6-2831beb85da5.png)


## 解決方法
上記のトラブルに直面した際の解決方法を説明します。

**1. 画面上部の「View」 → 「Console」を選択します。**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341404/d1d25e66-3ecb-9642-eaca-6a296e8a2d79.png)

**2. この操作によって、画面下部にコンソール画面が表示されます。**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341404/5fcbfcfa-d6b8-d135-c1be-d79a08984db6.png)

**3. この状態で、「Preview」→「Preview Running Application」を選択します。**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341404/23ee6134-4024-30fd-af32-0df3e09eb82c.png)

**4. 上記操作によって、コンソール画面にブラウザが起動し、プレビュー画面が表示されます。**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341404/1f7c612d-b9f1-5103-5ddf-443aea5ace8d.png)

**めでたしめでたし** :clap:

# おまけ：問題の発生から解決までをウォークスルー
プレビュー画面が表示されないのはどのような時なのか、そしてどのようにして解決できるのか、以下に再現をしました。
興味のある方はご覧ください。

### 1. Vue アプリを起動
Vue のプロジェクトフォルダにて、```$ npm run serve``` をします。
アプリが起動した状態になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341404/47a0ee99-eeaa-e5cb-750b-53435e38f6ec.png)


### 2. Cloud9 で起動したアプリをプレビュー
画面上部の「Preview」→「Preview Running Application」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341404/ade7ce56-54f3-5354-8848-7a3d317bfc12.png)
ターミナルの隣でブラウザが起動し、開発したアプリの画面が表示されます。
ここまでは期待通りです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341404/5668b704-6f95-75d1-5024-4fb358be6c97.png)


### 3. 【ここがトラブルの原因！】プレビューを閉じる
動作確認を終え、ブラウザを閉じます。
この際、本来はブラウザのタブの「×」ボタンを押すべきですが、今回は**間違えて右上の「×」ボタンを押します。**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341404/439d78f5-8bec-b1fa-b735-85b959ec9463.png)
そうすると、下のコンソール画面が全て消えてしまいます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341404/71935041-1166-d453-28fc-d17ea0174770.png)

### 4. 【ここが誤解につながる！】ターミナルの再表示
ここで、多くの人は、「ターミナルを消してしまった！」と焦り、
画面上部の「Window」→「New Terminal」を選択し、再度ターミナルを表示させる対応をします。
ターミナルが再度現れて解決したように見えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341404/e33841d9-bf02-a587-3543-abaf3a552cbd.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341404/af6d5557-41d6-c880-1176-9090fc3a273e.png)
**しかし、ここにトラップがあります！**
閉じてしまったコンソール画面を再表示できたわけではないのです。
続きを見ていきましょう。

### 5. アプリを起動してプレビュー画面を開こうとすると...
開発を続け、再度アプリを起動しようとします。
ターミナルにてプロジェクトフォルダへ移動し、```$ npm run serve``` をします。問題なくアプリは起動します。
その後、例によって「Preview」→「Preview Running Application」を選択しますが... **アプリが表示されません！**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341404/a31cbe55-6ec6-e26d-941a-b60bc95449c2.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341404/94e88447-aae1-aa23-95a7-f84be17f42e4.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341404/1855f4d0-4157-b96f-b224-55c5b0383cd7.png)

**これが（おそらく）このページを見ている方が直面している、「プレビューが表示されない」現象です。**

### 6. 原因
実は、プレビュー画面にて「×」ボタンを押した際、**プレビュー画面は終了ではなく非表示**になっています。
Windows でいうところの「閉じる」ボタンではなく「最小化」ボタンを押していたイメージです。

### 7. 解決策
最小化されたコンソール画面は、画面上部の「View」 → 「Console」を選択することで再度表示されます。
非表示になっていたコンソール画面が再度表れて、プレビュー画面も見えるようになります！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341404/b571f5a3-3178-f60c-d9bc-c2704d314f60.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341404/509a18d3-7217-b905-ad82-b83172786370.png)
**良かった！**

### 補足
なお、上記の操作でプレビュー画面に表示されているアプリは、
１回目の ```npm run serve``` で起動したアプリです。（ポート番号8080で動いています）
２回目の ```npm run serve``` コマンドで起動しているアプリもあります。（こちらはポート番号8081で動いています）
そのため、２個目の起動中のアプリを停止することを忘れないでください。
停止方法は、２回目の ```npm run serve``` をしたターミナルにて、 ```Ctrl + C``` をすれば停止できます。


# おわりに
以上、私が躓いたことについてまとめた記事でした。
同じトラブルで詰まっている方の参考になれば幸いです。