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上で秒でサーバを立てるに触発された、コマンドまとめ
• やること: オンラインIDE、もといオンラインVSCode Coderでサーバを立てて片付ける
• 所要時間： 15分
• 想定読者: 初学者にこそ体験して欲しい
• 用意するもの: PC、ネットワーク環境、SMSを受信できる電話番号
• as of 2019/03/04

Coderアカウントを作る

1. Coderにアクセス
2. Sign Up
   

備考：

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

サーバを立てる

動画 https://youtu.be/cfSUZC3exC4

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

# 確認: 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が有効になる

# 確認: 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を公開する

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

再読込時：

サーバを片付ける

注意：この項目は副作用を起こさないかどうか、未検討です

動画 https://youtu.be/zXhQ1I9swzo

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

公開停止後はアクセス不能になる

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

コンテナを片付ける

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

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

雑感とか

• 文明は進歩しているのだなぁ
• コンテナのリセットできるのが魅力
  • Linuxコマンドを安全に練習できる、ただしDebian系
  • IaCの練習になる
• ローカルのサーバはnodeでなくてもいい
  • e.g. ngrok × apache で、Macローカル環境を外部公開した話。

Hope this helps.