すでにメンバーの場合は

無料会員登録

GitHubアカウントで登録 Pikawakaが許可なくTwitterやFacebookに投稿することはありません。

登録がまだの方はこちらから

Pikawakaにログイン

GitHubアカウントでログイン Pikawakaが許可なくTwitterやFacebookに投稿することはありません。

お役立ち情報

【お役立ち情報】初心者向け!丁寧すぎる『AWS Cloud9』の導入方法

ぴっかちゃん
ぴっかちゃん

AWS Cloud9とは、ブラウザ(Google Chrome, IE, Safari...)上でWEBアプリなどの開発ができる便利なツールのことです。初心者にとって難しい環境構築の手間を省くことができます。

環境構築とは、パソコンをプログラミング可能な状態にするための手順のことです。
プログラミング言語やフレームワーク(アプリを簡単に開発するための専用キット)をインストールすることを指します。

Cloud9は、最初からプログラミング言語やフレームワークがほぼインストールされているため環境構築の手間なく、アプリ開発に専念できます。

cloud9のwelcome画面

とは言っても初心者にとってAWSの利用ってちょっと難しそうなイメージがありますよね。不正利用されて高額請求されたなんて話もありますし・・・

でも安心してください!この記事では初心者の方でも安全に利用できるように、AWS Cloud9の導入手順を画像を使いながら丁寧に解説します。

AWS Cloud9の特徴

AWS(アマゾン ウェブ サービス)とは、「Amazon」が提供するインターネットを介して利用できるサービス(クラウドコンピューティング)の総称のことです。

そのサービスの1つに「Cloud9」があります。

AWSのサービス

通常WEBアプリケーションを開発するためには、プログラムを書くための「テキストエディタ」とプログラムを処理・実行するための「コマンドライン」が必須です。自分のパソコンの中に用意しなければなりません。

しかし、Cloud9を使えばブラウザにログインするだけで「テキストエディタ」と「コマンドライン」はすでに用意されており、自分のパソコンに用意する必要なくWEBアプリなどの開発ができます。(他にも40以上のプログラミング言語がサポートされています。)

Cloud9の画面

さらにデータはすべてクラウド上(インターネット上)に保管されるので、インターネットに接続していればどのコンピュータからでも(自宅のパソコンや友人のパソコン、MacやWindowsであろうが関係なく)開発環境にアクセスすることができます。

ポイント
  1. Cloud9は、AWSが提供するサービスでブラウザ上で開発を進められる
  2. 自分のパソコンに開発環境を用意する必要がなくなる
  3. インターネットに接続していればどのパソコンからでもアクセスできる

それではさっそくAWS Cloud9の導入をしていきましょう!

AWS Cloud9の導入手順

以下の手順にしたがってAWS Cloud9を導入していきます。

  1. AWS アカウント作成
  2. IAMユーザーの作成 (すでにアカウント作成済みの方はこちらへ)
  3. AWS Cloud9環境作成 (上記2つが済んでいる方はこちらへ)

導入までの道のりは少し長いですが、1つ1つクリアして頑張って進めていきましょう。

AWS アカウント作成

最初にAWSのアカウントを以下の手順で作成します。

  1. Cloud9のトップページにアクセスする
  2. メールアドレス、パスワード、アカウント名を入力する
  3. 連絡先の情報を入力する
  4. クレジットカード情報を入力する
  5. 本人確認をする
  6. ベーシックプラン(無料)を選択する

※ AWS アカウント作成にはクレジットカード/デビットカード情報が必要です。

それではAWSで新規アカウントを作成します。

1. Cloud9のトップページにアクセスする

まずは、こちらのリンク(AWS Cloud9)からCloud9のトップページに飛んで、次の画像のように中央にある「AWS Cloud9を始める」をクリックします。

Cloud9のトップページ

2. メールアドレス、パスワード、アカウント名を入力する

続いて出てくる「AWS アカウントの作成」のフォームに「メールアドレス、パスワード、アカウント名」を次の画像のように全て記入し「続行」をクリックします。

アカウント作成フォーム

3. 連絡先の情報を入力

続いて出てくる「連絡先情報」のフォームにも全て記入し「アカウントを作成して続行」をクリックします。※アカウントの種類は「パーソナル」を選んでください。

連絡先フォーム

4. クレジットカード情報を入力する

次に「支払情報」のフォームにクレジットカード情報を入力し「セキュアな通信」をクリックします。※AWSアカウント作成にはクレジットカード/デビットカードが必須です。

支払情報フォーム

5. 本人確認をする

次に電話番号での本人確認になります。次の画像のようにフォームを入力し、「すぐに連絡を受ける」をクリックして下さい。

電話が掛かってきますが、相手は機械なので緊張しなくて大丈夫ですよ👏

連絡フォーム

本人確認が完了すると次の画面が出てくるので「続行」をクリックします。

本人確認

6. ベーシックプラン(無料)を選択する

最後に「サポートプラン」の選択ですが「ベーシックプラン(無料)」を選択しましょう。無料プランで十分に開発できます。

プランの選択

これでAWSのアカウント登録完了です。プランを選んだ後は次のような画面になります。

アカウント登録完了後の画面

次は、AWSを安全に利用するためにIAMユーザーの作成をします。

IAMユーザーの作成

IAMユーザーは、以下の手順で作成していきます。

  1. ルートユーザーでコンソールにログインする
  2. IAMのユーザーにアクセスする
  3. ユーザー詳細の設定をする
  4. アクセス許可の設定をする
  5. 設定内容の確認をする
  6. csvをダウンロードする
  7. IAMユーザーとしてログインする

この手順が終わればcloud9の環境を作成することができます。あと少し頑張りましょう。

1. ルートユーザーでコンソールにログインする

まずは画面右上にある「コンソールへログイン」をクリックします。

コンソールにログインをクリック

次の画像のように「サインイン」の画面が出るので「ルートユーザー」を選択して、先ほどアカウント作成で登録した「メールアドレス」を入力し「次へ」をクリックします。

ルートユーザのメールアドレスを入力する

続いてパスワードを入力し「サインイン」をクリックします。(こちらも先ほどのアカウント作成で登録したパスワードを入力します。)

パスワードの入力

2. IAMのユーザーにアクセスする

ルートユーザーでログインした後は、「AWS マネジメントコンソール」の画面が表示されるので、次の画像のように上部にある検索窓に「iam」と入力します。

(※大文字でも小文字でもどちらでも大丈夫です。)

検索窓にiamと入力する

次の画像のようにモーダルの中のサービスの「IAM」にカーソルを当てると、「主な機能」が表示されるので「ユーザー」をクリックします。

IAMのモーダルを表示

3. ユーザー詳細の設定をする

Identity and Access Management(IAM)の画面が表示されるので、ページ上部にある「ユーザーを追加」をクリックします。

ユーザーを追加をクリック

続いて「ユーザー詳細の設定」の画面が表示されるので、次の赤枠の部分を入力します。

ユーザー詳細の設定ページ

  • ユーザー名- IAMでログインするユーザー名を入力します。
  • AWSアクセスの種類- 「プログラムによるアクセス」と「AWS マネジメントコンソールへのアクセス」にチェックします。
  • コンソールのパスワード - 今回はカスタムパスワードのままにします。

上記を入力したら「次のステップ:アクセス権限」をクリックします。

4. アクセス許可の設定をする

「アクセス許可の設定」ページが開くので、「グループの作成」をクリックします。

アクセス許可の設定

続いて「グループ作成」のモーダルが表示されるので、グループ名を入力して「AWSCloud9Administrator」と「AmazonEC2FullAccess」を検索してそれぞれチェックを入れます。

グループ作成のモーダルを表示する

そして「グループの作成」をクリックすると、次の画面に戻るので「次のステップ:タグ」をクリックします。

グループ作成のページに戻る

次の画面では、特に入力せずに空欄のまま「次のステップ:確認」をクリックします。

タグの追加オプションの画面

5. 設定内容の確認をする

続いて設定した内容を確認して「ユーザーを作成」をクリックします。

設定内容の確認ページ

6. csvをダウンロードする

次の画面が表示されるので、最初に必ず「.csvのダウンロード」をクリックします。このcsvファイルにはIAMで作成したユーザーの情報が記述されています。

アカウント情報画面

緑枠の「ユーザー名」と「パスワード」をメモするか、csvファイルを開いてアカウント情報を確認できるようにしてください。赤枠のURLをクリックして再ログインを行います。

7. IAMユーザーとしてログインする

URLをクリックすると次の画面が表示されるので、先ほど取得したIAMユーザーの「ユーザー名」と「パスワード」を入力し「サインイン」をクリックします。

IAMユーザーとしてログイン

続いて次の画像のようにパスワードの変更を求められるので「古いパスワード」と「新しいパスワード」を入力し「パスワード変更の確認」をクリックします。

新しいパスワードは先程のcsvファイルに記述するか、どこか自分がわかる場所に保管しておいてください。

パスワードの再設定

最後に作成したIAMユーザーで、次のようにログイン出来ていれば完了です。

IAMユーザーでログイン

このIAMユーザーでAWS Cloud9環境作成にとりかかります。あと少しがんばりましょう!

ポイント
  1. AWSアカウントを作成するとルートアカウントが発行される
  2. AWSを操作する際は全ての機能を扱えるルートアカウントではなく、必要な機能の権限のみ与えたIAMユーザーを使うこと

AWS Cloud9環境作成

Cloud9の環境は、AWSアカウントやIAMユーザーを作成した時よりも少ないステップで簡単に作成することができます!

それでは、Cloud9の環境を作成していきます。

まずは、次の画像のように検索窓に「cloud9」と入力しEnterを押します。
IAMユーザーでログイン済みであることを前提とします。

検索窓にcloud9と入力する

検索すると次の画面が表示されるので「Create environment」をクリックします

Account environmentsページ

続いて次の画面が表示されるので「Name」にアプリケーション開発を行う作業場所の名前を入力し「Next step」をクリックします。

ワークスペースの名前を設定

※今回はmy-demo-environmentと付けていますが、自身の開発環境に合わせた名前を付けましょう。

続いて次の画面が表示されますが、設定はデフォルトのまま「Next step」をクリックします。

環境設定の上部

環境設定の下部

次の画像のように最終確認画面が表示されるので、問題なければ「Create environment」を選択します。

最終確認画面の上部

最終確認画面の下部

設定した内容を反映させるために次の画面が表示されますが、完了するまでしばらく待ちましょう。

環境作成中の画面

次の画面が表示されたら、Cloud9の環境作成は完了です。お疲れ様でした!

Cloud9の環境作成は完了画面

これで開発環境が整ったので、いつでもプログラミングを始めることができます。

この記事のまとめ

  • アプリケーションの開発に必要なツールを揃えたソフトウェアをIDE(統合開発環境)と呼ぶ
  • AWS Cloud9は、クラウドベースのIDEでインターネットに接続していればどのコンピュータからでもアクセスできる
  • 環境構築の手間を省くことができる

1

わかった!

FLOCSS・BEM・SASSを使ったフロントエンドのCSS設計方法を動画で解説します。

動画内でぴっかちゃんが先生として解説してくれます。

「フロントエンドのCSS設計方法を知りたいRailsエンジニア」はこちら