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

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

はじめに

既存のインスタンスを使用して、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としても使えます。複数人で編集できるので、チーム開発やペアプロにもってこいだと思います。

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
ユーザーは見つかりませんでした