フリーで使えるクラウドIDE「Codenvy」を使って Vue.js の開発を始めてみる

2018-11-09

TOC

  1. サービス・ライブラリなど
  2. Codenvy と他サービスの比較
  3. Codenvy を始めてみる
  4. Team の作成
  5. Workspace の作成
  6. Workspace を Share する
  7. Port の開放
  8. Webpack の設定の変更
    1. ホストを変更する
    2. disableHostCheck を true にする
    3. ポートを変更する
  9. 実行
  10. URL の確認
  11. できているはず
  12. まとめ

こんにちは。shundroid です。
高校生活が本格的になってきました。楽しいですが忙しいですね。

さて、今回は、友人とアプリを１つ開発することになりました。
そこで、環境構築などを友人の pc で行うのは手間がかかるため、
その必要がない、クラウドIDEを用いることにしました。
使い方などを記録しておこうと思います。

サービス・ライブラリなど

  • Vue.js : Web アプリ開発のフレームワークです。最近ホットになってきてうれしいです。
  • クラウドIDE : クラウド上で動くIDEです。環境構築の手間がいらないので、スマホで動作するものもあります（codeanywhereなど）
  • Eclipse Che : クラウドIDE の一種です。あの Eclipse の「Next-Generation IDE」だと公式サイトには書いてありますね。
  • Codenvy Eclipse Che をホストしているサービスです。

Codenvy と他サービスの比較

同等のクラウドIDE サービスとして、AWS Cloud 9 と codeanywhere が有名です。
それぞれのサービスの特徴をあげておいます。

  • AWS Cloud 9 は一番有名なクラウドIDEなのではないでしょうか。Amazon が買収して無料で使えなくなりました。
  • codeanywhere は「anywhere」というだけあって Android などスマホ版のアプリがあります。しかし無料では１日2時間までしか使えないという制約があります。

Codenvy は無料でわりと高機能に使えて、さらに友人と開発するのに必要な「チーム開発」機能があったので選びました。ただしバグが少しありますね…。

Codenvy を始めてみる

https://codenvy.io/site/login

ここにアクセスして、アカウントを取得します。

そうするとこのような Dashboard が開きます。

Team の作成

今回は友人との開発なので、まず Team を作ります。
一人でしか使わない方はこの節は飛ばしてください。

左側の「Create Team」をクリックして、

https://codenvy.io/dashboard/#/team/create

に移動します。

チーム名を入力したら終わりです。簡単。
メンバーは後から追加可能です。

Workspace の作成

左側の「Create Workspace」をクリックして、

https://codenvy.io/dashboard/#/create-workspace

に移動します。
後はウィザード通りに進めればよいのですが、
チーム開発をするときにとても気を付けなければならないところがあります。

ここでWorkspaceを紐づけるTeamを決めることですね。なぜかこれは後から変える方法が見つからなかったので、ここでミスるとWorkspaceを作り直す必要があります。

Stack は Vue.js なので Node を選択してくださいね。

なお、この Projects のところからは Github のリポジトリをインポートしたり、
Git を選択すると非公開の Bitbucket のリポジトリをインポートしたりすることもできます。

Project は後から Workspace に追加したり、作成したりすることも可能です。

Workspace を Share する

チームで Workspace を使う際、なんと Workspace を Team に紐づけるほかに、
Share という設定を変える必要があります。

左上の Workspaces をクリックして、

https://codenvy.io/dashboard/#/workspaces

に移動します。

Workspace を選択して、設定に移ります。

Share → Add Developer を選択して、Workspace を使う User を追加してください。

ここにつまづいて１時間くらいとられました…

Port の開放

Codenvy ではどうやらポートごとにサーバーが割り当てられるそうです。
例えば、9000 番ポートにアクセスするため、3000 番ポートにアクセスするため、・・・という風にそれぞれサーバーが設定されています。

デフォルトでは 9000 番や 3000 番が開けられています。他のポートを利用したい場合は、追加する必要があります。

Workspace を Share するときの設定画面に移動して、「Server」→「Add Server」から追加します。

Reference は何でもいいんですけど例えば「node-8080」、portに開放したいポート番号を入力します。（8080など）

Webpack の設定の変更

※ここは vue-cli v3 を利用して生成されたプロジェクトについての話です。そうでない場合は適宜なんか補ってください。

僕は Bitbucket から Project を import しているので、それがそのまま codenvy で使えているのですが、codenvy 上で vue-cli を利用してプロジェクトを作る場合は、ターミナルを開き、

1
2
$ npm i vue-cli
$ ./node_modules/.bin/vue init webpack <プロジェクト名>

を実行してください。
ターミナルは下のほう、もしくは Run → Terminal から開けます。

Codenvy で Webpack を利用して、App を実行するために必要となる変更は次の通りです。

  • host の変更
  • disableHostCheck を true にする
  • (port の変更)

ホストを変更する

デフォルトでは localhost や 127.0.0.1 になっているかもしれませんが、外部からのアクセスを可能にするため、 0.0.0.0 にします。

<プロジェクト名>/config/index.js を、次のように変更します。

1
2
3
4
5
6
7
8
9
10
// ...
module.exports = {
  // ...
  dev: {
    // ...
    host: '0.0.0.0'
    // ...
  }
  // ...
}

disableHostCheck を true にする

ここはハマりました。このままでもアクセスは可能なのですが、
「Invalid Host Header」というレスポンスがされてしまいました。

<プロジェクト名>/build/webpack.dev.conf.js を、次のように変更します。

1
2
3
4
5
6
7
8
9
// ...
const devWebpackConfig = merge(baseWebpackConfig, {
  // ...
  devServer: {
    disableHostCheck: true
    // ...
  }
  // ...
})

あまりジェネレートされたファイルは変更したくないのですが、仕方がないですね。

ポートを変更する

先ほど Port の開放で、「8080」ポートを開放しているなら大丈夫なのですが、
9000 や 3000 ポートを利用したい場合はこの作業が必要です。

<プロジェクト名>/config/index.js を、次のように変更します。

1
2
3
4
5
6
7
8
9
10
// ...
module.exports = {
  // ...
  dev: {
    // ...
    port: 9000 // or 3000, 8080, ...
    // ...
  }
  // ...
}

実行

下のターミナル（出ていない場合は Run → Terminal）で、次のように実行します。

1
2
3
$ cd /projects/<プロジェクト名>
$ npm i
$ npm run dev

こうすると、0.0.0.0 でアプリが実行されます。

URL の確認

この 0.0.0.0 にアクセスする方法ですが、先ほどの設定画面、「Server」より、それぞれのポートに対応する Server の Url が貼られていて、確認することができます。

できているはず

まとめ

Codenvy は便利ですが、情報が少ない面もあり、なかなか大変です。無料なので仕方がないのですが…

最後の URL の確認のところは、Commands という機能があって、それを利用すると手間が省けます。

それについてはいつか書くかもしれません。

© 2021 asterisks - Powered by Hexo - Theme Chan