【無料】20分で環境構築しオリジナルサービスを作り始める方法(前編)

こんにちは、@redtail03です。Progateで学習している人が自身のポートフォリオを公開するまでを支援する記事を書いています。 前回は、オリジナルサービスの考え方について書きました。

joushiki.hatenablog.com

今回は自分でサービスを作ってみる第一歩として環境構築の話をしようと思います。

はじめに

本記事のゴール

本記事は「前編」としていますが、「後編」まで含めると、ゴールは

Ruby on Railsを利用してWebサービスを開発できる状態を作る」

ことです。

そのために、まずは環境構築について説明します。

環境構築とは?

皆さんは「環境構築」という言葉を聞いたことはあるでしょうか。プログラマーにとって「環境構築」という言葉は、 あるプログラミング言語を自分のパソコンで利用できるようにするための作業を指します。

なぜ環境構築が必要なのか

Progateを利用して勉強する場合、コードを実際に書くことはできても、書いたコードや作ったTweet Appを全世界に公開することができません。自分で作ったサービスを全世界に公開するためには、まず環境構築をして自分で自由にコードを書いたり他の人に共有できる状態を作る必要があります。 例えば一人でRubyの環境構築ができれば、自分のパソコン上でRubyを使った開発ができます。ということは、Ruby on Railsを使ったWebアプリケーション開発もできるということです!

環境構築は難しい

利用しているPCがMacの方の場合は、以下のProgateの記事などを読んで環境構築に挑戦してみても良いでしょう。

prog-8.com

ただし、利用中のPCの状態によっては問題が発生することがあります。 また、利用しているPCがWindowsの場合は、利用しているPCの種類ごとに微妙に環境構築の方法が異なります。そのため、Macに比べると環境構築の難易度は高めです。

環境構築のハードルを下げる

せっかくプログラミングができるようになったのに、環境構築に詰まってしまい挫折するのは非常にもったいないことです。私の観測範囲では環境構築がプログラミング初学者の一つのハードルになっているようです。そうしたリスクを避けるために、私は別の方法で環境構築することをオススメしています。

それは、自分の作業用のパソコンとは別のパソコンを借りてそこで環境構築をする方法です。パソコンは、Amazonという会社からCloud9というサービスを通じて借ります。また、そのパソコンに対してはインターネットブラウザ(Google ChromeSafariMicrosoft Edgeなど)から接続します。ちょうど、Progateで学習している形と同じようなイメージです。

パソコンを借りると言っても、この方法は無料で利用できます。

この方法であれば、難しい作業をしなくてもいきなりRuby on Railsでの開発を始めることができます。また、WindowsでもMacでも、どちらでも同じように環境構築をすることができます。

AWS Cloud9について

では、AWS Cloud9で開発の環境を作りましょう。その前に、AWSおよびCloud9について簡単に説明します。詳しい説明は公式サイトなどをご覧下さい。

AWSとは?

AWSとはAmazonが提供するWebサービスの総称です。Webサービスを公開するために必要なサーバを貸し出したり、そのサーバに問題がないか監視するサービスなどを提供しています。Amazonが提供するWebサービスは、無料で使えるものから有料のものまで膨大な数があります。

AWSクラウドベースである

AWSの特徴の1つとして、ほとんどがクラウドサービスとして提供されるということがあります。クラウドとは、主としてインターネットを通じてサービスを提供することを指します。 例えば、昔は会社でWebサービスを作りたければ自社内に物理的にサービスを提供するためのサーバを置く必要がありました(オンプレミスという手法です)。場所も取りますし、何か問題があれば自分たちで修理しなければいけません。 対してAWSの一つであるEC2というサービスはクラウドでサーバを提供するため準備や保守が圧倒的に楽です。また、必要であればすぐにサーバの性能を上げることができるなど、柔軟性が高いという点も優れています。

AWS Cloud9とは?

AWS Cloud9とはAWSのサービスのひとつで、公式ページ(https://aws.amazon.com/jp/cloud9/)によれば「ブラウザのみでコードを記述、実行、デバッグできるクラウドベースの統合開発環境 (IDE) 」と説明されています。Progateでの勉強と同じようにブラウザで開いてそこでコードを書けます。具体的には、以下のような機能を利用することができます。

  • ターミナル(サーバの操作)

  • エディタ(コードを書いていく)

  • rails sして確認(これはブラウザの別のタブで開く)

AWS Cloud9のメリット

AWS Cloud9を使えば、ほとんど手間をかけずRuby on Railsの環境構築をすることができます。そのため、難しいことがわからなくてもすぐにProgateで学習したことを活かしてサービス開発を始めることができます。しかも、無料で利用することができます。

AWS cloud9のデメリット

対してデメリットはほとんどありません。強いていうならば、ネットに繋がっている環境でなければほとんどの作業ができないことです。

AWSの会員登録をする

Cloud9を利用するにはまず、AWSの会員登録をする必要があります。その後、AWS Cloud9を利用してみます。

事前準備

AWS Cloud9を利用するには、自身が取ることができる電話番号と、クレジットカードもしくはデビットカードが必要です。 電話番号については自宅に電話があるか、携帯電話を持っていれば大丈夫です。カードですが、クレジットカードもデビットカードも無い場合は、kyashやbundleカードといったアプリから発行できるカードを試してみると良いかもしれません(未確認です)。

kyash.co

1.利用しているブラウザが最新版かチェックする

AWS Cloud9の公式ページによれば、現在は主要なブラウザの最新版では動作が確認されているそうです。 利用しているブラウザがGoogle ChromeSafariFirefoxMicrosoft Edgeであれば大丈夫です。

aws.amazon.com

ただし「最新版での」という条件つきなので、利用しているブラウザが最新版か確認しておきましょう。

2.AWSの会員登録をする

AWS Cloud9を利用するには、AWSに会員登録をする必要があります。まず、以下のページにアクセスしてください。

AWS Console - Signup

続いて以下のように必要な項目を入力し、「続行」をクリックします。

f:id:xeichan:20180922114553p:plain

今度は連絡先情報を入力します。この時電話番号は必ず通じるものにしておきましょう。後で、本人確認のための電話がかかってきます。 全て入力し終わったら、「アカウントを作成して続行」をクリックします。

f:id:xeichan:20180922140834p:plain

次は、支払い情報の入力です。オリジナルサービスを公開しても1年間は無料で利用できるため、変な使い方をしない限り請求は来ませんが、ここで有効なクレジットカード/デビットカードを登録する必要があります。

f:id:xeichan:20180922141205p:plain

そして、電話による本人確認です。連絡先情報の際に入力した電話番号がすでにフォームに入力されている状態です。セキュリティチェックの文字を入力し、「すぐに連絡を受ける」をクリックしましょう。

f:id:xeichan:20180922141444p:plain

すると、以下のような画面になります。同時に電話がかかって来ます。「こんにちは。この電話はAmazon Web Serviceからの自動音声案内です~」と言って来たら、AWSからの電話で間違いありません。指示に従い、画面に表示されている番号を、電話のキーダイヤルに入力します。しばらくすると、認証が完了します。

f:id:xeichan:20180922141626p:plain

認証が完了するとその旨を電話越しに伝えられ、画面が自動的に以下のように変化します。「続行」をクリックしましょう。

f:id:xeichan:20180922141816p:plain

続いてプランの選択画面に移ります。ベーシックプランという文字の下にある、「無料」と書かれた部分をクリックします。

f:id:xeichan:20180922141846p:plain

以上で会員登録の操作は終了です。以下の画面になっていると思うので、「コンソールにログイン」をクリックしましょう。

f:id:xeichan:20180922142049p:plain

以下のようなログイン画面に遷移します。最初に登録したメールアドレスを入力し、「次へ」をクリックします。

f:id:xeichan:20180922142124p:plain

するとパスワードの入力を求められますので入力し、「サインイン」を押しましょう。

f:id:xeichan:20180922142340p:plain

以下のような画面が表示されれば成功です。

f:id:xeichan:20180922142414p:plain

終わりに

無事にAWSの会員登録はできたでしょうか?少し長くなってしまったので、Cloud9の利用方法については別の記事にしたいと思います。 試してみてもし上手くいかなかった場合などはお気軽にTwitterでメンション or DMをください。