1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

AWS Cloud9でAngularアプリ開発(前編)

Last updated at Posted at 2018-01-12

AWS Cloud9とは

ブラウザ上で動作するIDEで、40以上の言語に必要なツールがあらかじめインストールされているため起動すればすぐに開発を始められる。
AWSが運営してるだけあって、AWSの他のサービスとの連携も簡単(らしい)。
複数人で同時に編集できたりハイライトした部分が相手からも見えるなど、ペアプロやコードレビューに向いた機能もある。

バージョン

ちなみにインストールされているバージョンは執筆当時で
Java : 1.7
node : 6.12.3
npm : 3.10.10
Python : 2.7.12
でした。
もちろんアップデートする方法はあるみたいです。

料金

Cloud9は基本的にEC2上で動作するようになっていて、課金はこの時に利用するEC2の料金のみ。
t2.microで構成すれば無料枠内で利用できる。
もちろんリッチな構成で作れば早くなる。
詳しくは公式を見てください。

AWS Cloud9環境の準備

では実際にCloud9の環境を準備してみます。
まずはCloud9のトップにアクセス。
すると、普段東京リージョンで利用している人はこんな画面に遷移したと思います。

キャプチャ.PNG

実はCloud9は現在東京リージョンには来ていないんです。
なので、おとなしく別のリージョンに移動しましょう。
するとこんな画面に遷移するので、右側にあるオレンジ色のCreate environmentをクリックしてCloud9の準備を始めましょう。
キャプチャ.PNG

Environment name and description

最初に環境の名前を設定します。
今回はcloud9-angular-sampleという名前にしました。
Descriptionの部分は環境の説明を書く部分なので今回は省略。

キャプチャ.PNG

Environment setting

次にCloud9を構築するサーバの設定をしていきます。

キャプチャ.PNG

Environment type

一番上のEnvironment typeは環境のタイプの設定です。
キャプチャ.PNG
上が新規にEC2インスタンスを作成してそこにCloud9環境を作る設定、
下が既存のEC2インスタンスもしくは自分で構築したサーバに環境を作る設定になります。
下の設定の場合には色々条件があるみたいなので公式の解説を参照するようにしてください。
今回は新規にインスタンスを作成するので上を選択します。

Instance type

新規インスタンスを選択すると、作成するインスタンスの構成を設定する必要があります。
image.png
今回は無料枠内で利用したいのでt2.microを選択します。
もちろんリッチな構成にすればそれだけ快適になるので、ここは好みで大丈夫です。

Cost-saving setting

この設定をすることで、Cloud9を使用していない時、自動的にインスタンスを閉じてくれるようになります。
キャプチャ.PNG
今回は30分に設定しておきました。

他の設定についてはデフォルトのままNextStepを押して先へ進みます。
キャプチャ.PNG

準備完了

確認画面のCreate environmentを押すと、グルグルしてる画面に遷移します。
image.png

初回はインスタンスの起動等々ありますが、だいたい1分ほどで準備が完了します。
キャプチャ.PNG

おわりに

前編はCloud9の環境構築までを行いました。
後編ではCloud9上でAngularの環境構築~実行までをやってみます。

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?