Help us understand the problem. What is going on with this article?

Coder(オンラインVSCode)+ngrokでサーバを公開する/公開停止する

TL;DR

2019/05/08 追記

(下記は2019/03/06時点の文章です)

  • ログインするとVSCodeが起動して、各プロジェクトの1つ上のディレクトリが表示されるようになっていた
  • 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 screenshot-coder.com-2019.03.04-03-18-07.jpg

備考:

  • 基本的に無料。有料プランもある
  • パスワード登録をお勧めする
  • 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を公開する

screenshot-64e94ad5.ngrok.io-2019.03.04-01-39-35.jpg

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

screenshot-coder.com-2019.03.04-01-41-04.jpg

再読込時:
screenshot-64e94ad5.ngrok.io-2019.03.04-01-41-22.jpg

サーバを片付ける

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

動画 https://youtu.be/zXhQ1I9swzo

# 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

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

screenshot-coder.com-2019.03.04-01-46-57.jpg

コンテナを片付ける

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

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

雑感とか

Hope this helps.

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした