Coder（オンラインVSCode）+ngrokでサーバを公開する／公開停止する

# TL;DR

2019/05/08 追記

- 当初はCoderでコンテナをスクラップ＆ビルドできる点に魅力を感じた。
- Coderがマネタイズ方針を変更したので、リモートサーバにVSCodeをインストールして利用できる点が主眼になった。
- 2019/05/08現在、リモート開発がしたければ下記の選択肢を優先的に検討した方が良い。
    - VSCodeのRemote Development機能が革命的な話。 - Crieit https://crieit.net/posts/VSCode-Remote-Development
    - Remote Development with Visual Studio Code https://code.visualstudio.com/blogs/2019/05/02/remote-development
    - リモート PHPインタープリターの設定 - 公式ヘルプ | PhpStorm  https://pleiades.io/help/phpstorm/configuring-remote-interpreters.html


（下記は2019/03/06時点の文章です）

- ログインするとVSCodeが起動して、各プロジェクトの１つ上のディレクトリが表示されるようになっていた
- Coderはクラウド管理を企業向けサービス、リモートVSCodeをオープンソースに分離した様子
- 今のところrestart containerはあるがreset containerは見つからない
    - OSを破壊した時はどうやって回復させるのか不明
    - 元の魅力が結構薄れた
    - AWSとAWS Cloud9のポテンシャルを検討したい

（以降は2019/03/04時点の文章です）

- [Coder上で秒でサーバを立てる](https://qiita.com/teradonburi/items/1b9186c1785446e6e669)に触発された、コマンドまとめ
- やること: オンラインIDE、もといオンラインVSCode [Coder](https://coder.com/)でサーバを立てて片付ける
- 所要時間： 15分
- 想定読者: 初学者にこそ体験して欲しい
- 用意するもの: PC、ネットワーク環境、SMSを受信できる電話番号
- as of 2019/03/04

# Coderアカウントを作る
1. [Coder](https://coder.com/)にアクセス
2. Sign Up 
![screenshot-coder.com-2019.03.04-03-18-07.jpg](https://qiita-image-store.s3.amazonaws.com/0/368897/0acee1f9-bb14-df37-704f-c86d0f11b2ba.jpeg)

備考：

- 基本的に無料。有料プランもある
- パスワード登録をお勧めする
- GitHub, Googleアカウントでも認証できるらしいが、正常にログインできないことがあったのでお勧めしない
- 二段階認証が必要なため、SMSが受信できる電話番号が必須

# サーバを立てる

動画 https://youtu.be/cfSUZC3exC4

1. index.htmlを作る
1. nvm, node, npmをインストール
1. サーバを起動
1. ngrokを起動して、サーバを公開

```bash
# 確認: OSバージョン
uname -a
# 確認: 現在の場所
pwd
# nvmをインストール
apt-get update
apt-get install build-essential libssl-dev
curl https://raw.githubusercontent.com/creationix/nvm/v0.25.0/install.sh | bash
# 上記install.shのバージョンは適当
# 正しくは: https://github.com/creationix/nvm#installation-and-update

# 新規ターミナルからnvmが有効になる
```
```bash
# 確認: nvmが有効であること
nvm --version
# nvm管理下にnodeをインストール
nvm install stable
# 確認: npm, nodeが有効であること
nvm list
npm -v
node -v

# nvm alias default <version>
# を指定した方がいい
# 指定しない場合は新ターミナル開く度に毎回 nvm use <version> する必要がある

### ここまでコンテナに影響

### ここからプロジェクト固有

#（このプロジェクトにまだインストールしてない場合）
# ngrokインストール
npm install serve ngrok

# ローカルでサーバ起動
npx serve . &
# 確認: ネットワーク内で接続してindex.htmlを読み込めること
curl <ON_YOUR_NETWORK_URL>

# ngrokで公開
npx ngrok http 5000

```

ngrok起動時に `Forwarding` と記載されたURLに接続すると、index.htmlが表示される
ngrokはHTTP/HTTPSの両方のURLを公開する

![screenshot-64e94ad5.ngrok.io-2019.03.04-01-39-35.jpg](https://qiita-image-store.s3.amazonaws.com/0/368897/848f125a-16af-c8a5-33e8-0e112774fdc7.jpeg)

Coder上でindex.htmlを書き換えてURLを再読み込みすると反映される

![screenshot-coder.com-2019.03.04-01-41-04.jpg](https://qiita-image-store.s3.amazonaws.com/0/368897/e329db12-c11c-9f59-550b-e176c236a4f1.jpeg)

再読込時：
![screenshot-64e94ad5.ngrok.io-2019.03.04-01-41-22.jpg](https://qiita-image-store.s3.amazonaws.com/0/368897/6d3288a5-1b17-7e3b-176e-5d081e9dfc9e.jpeg)

# サーバを片付ける

<font color="red">注意：この項目は副作用を起こさないかどうか、未検討です</font>

動画 https://youtu.be/zXhQ1I9swzo

```bash
# ngrokの公開を停止する
# ngrokは本来Ctrl+Cで止められるが、Coderで上手く入力できないので無理矢理に止める
ps aux | grep ngrok.http # で、取れたPIDをkillする
kill -9 <NGROK_PID>
```

公開停止後はアクセス不能になる
![screenshot-64e94ad5.ngrok.io-2019.03.04-01-45-21.jpg](https://qiita-image-store.s3.amazonaws.com/0/368897/c602e27a-916b-2180-f92f-5e9bed53f9b0.jpeg)

```bash
# ローカルで起動しているサーバを停止する
ps aux | grep npx.serve # で、取れたPIDをkillする
kill -9 <NPX_SERVE_PID>
```

![screenshot-coder.com-2019.03.04-01-46-57.jpg](https://qiita-image-store.s3.amazonaws.com/0/368897/fd59ba41-b48c-2d6a-b066-6e0a6bf82cd7.jpeg)

# コンテナを片付ける

動画 https://youtu.be/4ssrUMvnP7k

- コンテナをResetできる
- ほぼ全て初期化される
- nvmなどもインストール前に戻る
- プロジェクトの中身は空になる（意図は不明だが、プロジェクトの名前だけ残る）

# 雑感とか
- 文明は進歩しているのだなぁ
- コンテナのリセットできるのが魅力
    - Linuxコマンドを安全に練習できる、ただし[Debian系](https://ja.wikipedia.org/wiki/Linux%E3%83%87%E3%82%A3%E3%82%B9%E3%83%88%E3%83%AA%E3%83%93%E3%83%A5%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3#Debian%E7%B3%BB)
    - IaCの練習になる
- ローカルのサーバはnodeでなくてもいい
    - e.g. [ngrok × apache で、Macローカル環境を外部公開した話。](https://tech.naviplus.co.jp/2015/06/08/)



Hope this helps.