4
2

More than 3 years have passed since last update.

AWSのCloud9を既存インスタンスで使用する

Posted at

はじめに

既存のインスタンスを使用して、Cloud9を構築します。Visual Studio CodeのRemote Developmentを使用してEC2に接続できますが、Cloud9だとブラウザがあれば動作するので、タブレットやChromeBookなどでもコーディングをできるようにします。

インスタンスのセキュリティーグループの変更

インバウンドルールのSSHに、Cloud9のIPアドレス18.179.48.128/27 18.179.48.96/27許可します。

スクリーンショット (54).png

IPアドレスの固定(EIPを割り当てていない場合)

EC2ダッシュボードのネットワーク&セキュリティから、Elastic IPを選択します。

Elastic IPアドレスの割り当てを開き、割り当てをクリックします

スクリーンショット (55).png

取得したIPアドレスが選択された状態で、アクションからElastic IP アドレスの関連付けをクリックします。インスタンスが選択されていることを確認し、インスタンスの入力ボックスをクリックし、使用したいインスタンスを選択します。

スクリーンショット (58).png

Node.jsのインストール(Ubuntu向け)

最初に、アップデート&アップグレードを実行します。

sudo apt-get update
sudo apt-get -y upgrade

curlのインストール

sudo apt-get -y install curl

PRAの導入

sudo curl -sL https://deb.nodesource.com/setup_12.x | sudo bash -

Node.jsのインストール

sudo apt-get -y install nodejs

Cloud9の構築

cloud9の設定

Cloud9のページのNew AWS Cloud9 environment -> Create environmentからCloud9の環境を構築します。

スクリーンショット (59).png

Nameと、Descriptionを入力します。Descriptionは省略可能です。入力が完了したら、Next stepをクリックします。

スクリーンショット (60).png

既存のインスタンスを使用するので、Environment typeからConnect and run in remote server (SSH)を選択します。

Userのところにインスタンスのユーザー名、HostにインスタンスのIPアドレス又はDNSを入力します。

スクリーンショット (61).png

View public SSH keyのところのCopy key to clipboardをクリックして、クリップボードにCloud9の公開鍵をコピーします。

インスタンスに接続し、./.ssh/authorized_keysに上記でコピーした公開鍵を貼り付けます。

スクリーンショット (62).png

公開鍵を追加したら、Next stepをクリックします。

Reviewが表示されるので、Create environmentをクリックします。

スクリーンショット (63).png

Cloud9のインストール

Can we quickly set up AWS Cloud9 on your environment?と表示されるので、Nextをクリックします

スクリーンショット (66).png

The following components will be installed. You can untick any of the optional components.と表示されるので、すべてチェックが入っている状態で、Nextをクリックします。

スクリーンショット (67).png

Installing Cloud9 IDEDo you want to install them now [Y/n]が表示されたらエンターキーを押します。

スクリーンショット (68).png

Installation Completedと表示されるとインストール成功です。Nextをクリックします。

スクリーンショット (69).png

Finishをクリックして、Cloud9の使用を始めます。

スクリーンショット (70).png

Cloud9を使ってみる

タブの+マークから、New Fileをクリックします。

スクリーンショット (72).png

Ctrl + S または、File -> Saveから、名前を付けて保存します。ここでは、Hello.jsにしました。

スクリーンショット (73).png

スクリーンショット (74).png

プログラムを入力します。

Hello.js
const Hello = "Hello!";
for (let i = 0; i < 10; i ++ ) {
    console.log(Hello);
}

Alt + F5 または、Runボタンをクリックして実行します。
スクリーンショット (77).png

おわりに

ブラウザ上で動くので、デバイスに関係なくコードを書くことがき、補完機能もあるので、ちょっとしたコーディングからメインのIDEとしても使えます。複数人で編集できるので、チーム開発やペアプロにもってこいだと思います。

4
2
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
4
2