前のパートに戻る 完了して次のパートへ  

  0-2 環境構築をしよう (Cloud 9)

この章ではオンラインの統合開発環境であるCloud9での開発環境構築(以下IDE)について解説していきます。IDEは開発に必要なエディッタやターミナル、デバッガーと呼ばれる開発に必要な機能をまとて、更に入力補完など便利機能などを備えたアプリケーションのことです。Cloud9はそのIDEの中でもブラウザ上で実行できる数少ないWebIDEです。

Cloud9はWebサービスの関係上更新が早くもしかしたら更新によってUIや手順が変わっている場合があります。その際は遠慮なく質問を投げかけていただけると幸いです。

またこの記事は2019/4/28時点のCloud9を参照して執筆されています。

Cloud9立ち上げまで


Cloud9は現在Amazon Web Service(以下AWS)が提供しているサービスです。

なので最初にAWSアカウントを取得する必要があります。

この章ではAWSアカウントを取得には触れませんので次の記事などを参照にしてアカウントを取得してください。

AWS アカウント作成の流れ

途中クレジットカードまたはデビットカードの登録があります。

中高生の方は保護者に説明をしてカード情報を記入するか、デビットカードしようしましょう。

AWSは最初の一年間は無料枠があります。無料枠を超えない範囲で使用する場合料金は発生しません。

参照: AWS 無料利用枠について

また学生はAWS Educateプログラムを受講できます。

学校法人側でプログラムに参加している加盟校と参加していないまたは非加盟校で待遇に差がありますが、非加盟校でも40USD分のAWSクレジットと600USD相当のトレーニングコースを受講できます。 ぜひ活用してみてください。

参考: AWS Educate

AWSにログインしたら上にあるサービスをクリックして検索ウィジェットからCloud9を探しましょう。 



Cloud9を開くと新しいインスタンスを設置するウィザードが始まります。インスタンスはCloud9を設置するサーバーのことです。ここではインスタンスに行う設定を決めていきます。



まずはNameのところに設置するインスタンス名を決めましょう。

自分がわかりやすい名前で大丈夫です。記入できたらNextStepを押して進みましょう。

次に細かい設定をしていきます。 



ここは図と同じデフォルト設定のままで大丈夫です。こちらもNextStepを押して進みましょう。

最後にこれまで設定した内容の確認です。 



こちらも問題なければCreate Enviromentを押してください。これでCloud9を使う準備は完了です。

Cloud9の基本UI


Cloud9はブラウザ上で動くIDEです。

ブラウザ上でも開発できるように1つの画面に様々な機能が用意されています。

この章の説明で混乱を避けるため書く部分に関してこの章で扱う名称と機能を紹介します。



1.メニューバー

これは様々な機能へのアクセスするためのメニューが用意されています。

設定やプレビューなどもここを使います。

2.ディレクトリツリー

左側にはファイルにアクセスするためのディレクトリツリーが表示されています。

普段使っているファイルビューアー、Windowsならファイルエクスプローラー、Mac OSならFinderと同様に扱うことができます。

3.エディター

ここにはディレクトリツリーで選択したファイルが表示されます。上にあるタブで見るファイルを変えることもできます。

4. ターミナル

下にはサーバーのターミナルが表示されています。

ここのターミナルを通してサーバーに命令やPythonのコマンドを実行していきます。

Pythonアップデートしよう


まず、Pythonをアップデートしましょう。Cloud9で用意されているものは「Python2系」と呼ばれるもので古いものとなっています。

最近は「Python3系」が標準的ですので、まずはここで3系にアップデートしましょう。

まずメニューバー右端にある歯車アイコンをクリックして設定画面を表示させます。



表示したらpython supportを選択して、Python VersionをPython3に変更しましょう。

またターミナルで正しく扱えるように環境にも手を加えていきます。

ターミナルで以下のコマンドを打ち込んでいきましょう。

# ターミナルの設定ファイルに設定を上書き
$ echo "alias python=python36" >> ~/.bashrc

# このあと使うpipenvのためにpipもPython3系に(後述)
$ echo "alias pip=pip-3.6" >> ~/.bashrc

# 新しい設定ファイルを読み込み
$ source ~/.bashrc

ここまでできたらPythonのバージョンを確認してみましょう。

$  python --version

Python 3.6.8

これでアップデートは完了です。

pipenvインストール


pipはPythonの標準的なパッケージマネージャーです。様々なPythonライブラリをpip経由でインストールできます。そしてpipenvはpipをもとに機能を付け足したパッケージマネージャーの1つです。 依存やPythonバージョン指定もできます。便利ですので入れておきましょう。

https://pipenv-ja.readthedocs.io/ja/translate-ja/install.html#installing-pipenv

まず先程インストールされたpipのバージョンが古いのでアップデートしましょう。

$ curl -kL https://bootstrap.pypa.io/get-pip.py | sudo python

実行結果すると以下のようなものが表示されてダウンロードが始まります。

  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Curren Dload  Upload   Total   Spent    Left  Speed
   100 1622k  100 1622k    0     0  9356k      0 --:--:-- --:--:-- --:--:-- 9379k
Collecting pip
  Using cached https://files.pythonhosted.org/packages/c2/d7/90f34cb0d83a6c5631cf71dfe64cc1054598c843a92b400e55675cc2ac37/pip-18.1-py2.py3-none-any.whl
Collecting wheel
  Using cached https://files.pythonhosted.org/packages/ff/47/1dfa4795e24fd6f93d5d58602dd716c3f101cfd5a77cd9acbe519b44a0a9/wheel-0.32.3-py2.py3-none-any.whl
Installing collected packages: pip, wheel
  Found existing installation: pip 18.1
    Uninstalling pip-18.1:
      Successfully uninstalled pip-18.1

ドキュメントに用意されている「大雑把なインストール」を参照しながら入れていきます。用意されたPythonスクリプトをダウンロードして実行することによってインストールを行います。 https://pipenv-ja.readthedocs.io/ja/translate-ja/install.html#installing-pipenv

$ curl https://raw.githubusercontent.com/kennethreitz/pipenv/master/get-pipenv.py | sudo  python

実行結果すると以下のようなものが表示されてダウンロードが始まります。

  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current Dload  Upload   Total   Spent    Left  Speed
100 1558k  100 1558k    0     0  7690k      0 --:--:-- --:--:-- --:--:-- 7713k
Cache entry deserialization failed, entry ignored
Requirement already up-to-date: pip in /usr/local/lib/python3.6/site-packages
Collecting pipenv
  Downloading https://files.pythonhosted.org/packages/13/b4/3ffa55f77161cff9a5220f162670f7c5eb00df52e00939e203f601b0f579/pipenv-2018.11.26-py3-none-any.whl (5.2MB)
    100% |████████████████████████████████| 5.2MB 257kB/s 
Cache entry deserialization failed, entry ignored
Collecting setuptools>=36.2.1 (from pipenv)
  Using cached https://files.pythonhosted.org/packages/e7/16/da8cb8046149d50940c6110310983abb359bbb8cbc3539e6bef95c29428a/setuptools-40.6.2-py2.py3-none-any.whl
Collecting certifi (from pipenv)
  Using cached https://files.pythonhosted.org/packages/9f/e0/accfc1b56b57e9750eba272e24c4dddeac86852c2bebd1236674d7887e8a/certifi-2018.11.29-py2.py3-none-any.whl
Requirement already up-to-date: virtualenv in /usr/local/lib/python3.6/site-packages (from pipenv)
Collecting virtualenv-clone>=0.2.5 (from pipenv)
  Downloading https://files.pythonhosted.org/packages/16/9d/6419a4f0fe4350db7fdc01e9d22e949779b6f2d2650e4884aa8aededc5ae/virtualenv_clone-0.4.0-py2.py3-none-any.whl
Installing collected packages: setuptools, certifi, virtualenv-clone, pipenv
  Found existing installation: setuptools 36.2.7
    Uninstalling setuptools-36.2.7:
      Successfully uninstalled setuptools-36.2.7
Successfully installed certifi-2018.11.29 pipenv-2018.11.26 setuptools-40.6.2 virtualenv-clone-0.4.0

SQLiteアップデート


今回使用するDjango2.2ではデータ保存にSQLite3.8.3以降が必要になっています。 アップデートをやっていきます。

まずはホームディレクトリに来てwgetでSQLiteのソースコードをダウンロードします。

  $ cd

  $ wget https://www.sqlite.org/2019/sqlite-autoconf-3270200.tar.gz

次にダウンロードしたコードを解凍します。

$ tar xvfz sqlite-autoconf-3270200.tar.gz

解凍したらインストールしていきます。次のコマンドを順に実行してください。

# インストールに必要な環境変数やライブラリのチェックを実施する
$ ./configure --prefix=/usr/local

# ソースコードのコンパイルを行う
$ make

# コンパイルしたアプリケーションをインストールする
$ sudo make install

次にどこからでも呼べるように設定していきます。

# 古いSQLiteを名前変更します。
$ sudo mv /usr/bin/sqlite3 /usr/bin/sqlite3_old

# 新しくインストールしたSQLiteのショートカット(シンボリックリンク)を作成します。
$ sudo ln -s /usr/local/bin/sqlite3 /usr/bin/sqlite3

# ライブラリパスの追加をします。
$  export LD_LIBRARY_PATH="/usr/local/lib"

# 環境変数の再読込をします。
$ source ~/.bashrc

Djangoインストール


ここまで来たらディレクトリツリーの一番上で右クリックしてnew Folderを選択して新しいディレクトリを作成します。作成したらtechpitgramと名前を設定します。

ここからはtechpitgram内で作業を行います。



つぎにPipfileを用意します。Pipfileはpipenvで使うファイルです。ここには動作するPythonバージョンや開発に使用するライブラリが記入されています。

たとえばpipenv installを行うと使うライブラリや依存関係にあるライブラリをインストールしてくれます。 今回は画像を扱うサービスなので途中Djangoの画像を扱うためのコードを記述していきますが、画像を扱うのに必要なライブラリである「pillow」が必要になっています。事前に入れておきましょう。

プロジェクト直下にあるディレクトリツリーのtechpitgramを右クリックしてメニューに有るnew fileを選択してください。

ファイル名をPipfileにして新規作成してください。作成したら次のように記入して下さい。

新規作成:techpitgram/Pipfile

[[source]]
url = "https://pypi.org/simple"
verify_ssl = true
name = "pypi"
# ここ以下を編集する (ここのコメントアウトは記入しない)
[packages]
Django = "==2.2"
pillow = "*"
[dev-packages]
[requires]
python_version = "3.6"

そうしたら次のコマンドでインストールを行います。

$ pipenv install

Locking [dev-packages] dependencies...
Locking [packages] dependencies...
✔ Success! 
Updated Pipfile.lock (8f8472)!
Installing dependencies from Pipfile.lock (8f8472)...
     ▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉ 4/4 — 00:00:02

これでDjangoがインストールできました。念のためにコマンドでDjangoのバージョンを確認しましょう。

$ pipenv run django-admin --version

2.0.2

いよいよプロジェクトを作りましょう。次のコマンドでtechpitgramプロジェクトを作成します。

$ pipenv run django-admin startproject techpitgram ./

この時点でディレクトリ構造は次のようになっています。

techpitgram
    ├── Pipfile
    ├── Pipfile.lock
    ├── manage.py
    └── techpitgram
        ├── __init__.py
        ├── settings.py
        ├── urls.py
        └── wsgi.py

cloud9向けの設定


デフォルトの設定ではCloud9上で立ち上げることができないためCloud9向けの設定をしていきます。

まず一度サーバーを起動してみましょう。

$ pipenv run python manage.py runserver 0:8080

立ち上げたら上のメニューバーから「preview」を押して「preview runnning application」を選択します。 



すると次のようなエラーが表示されます。 



「Invalid HTTP_HOST header: '8ddca07924f1489f9b3f8126e545bc42.vfs.cloud9.ap-southeast-1.amazonaws.com'~」と表示されている''の間のURLを控えてください。

プロジェクトの全体の設定は/techpitgram/techpitgram/settings.pyに書いてありますのでそちらを編集します。設定ファイルの中にあるALLOWED_HOSTSの部分を次のように編集します。

︙
(略)
# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/2.0/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = '***********************************'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

# ここを編集する
ALLOWED_HOSTS = [ "ここに先程控えたURLを記入する"]  


# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

︙
(略)

できたらもう一度実行してみましょう。 Cloud9の 仕様ではCloud9内のブラウザでは確認できないので、Cloud9の右上にあるブラウザアイコンの「Pop Out New Window」を押して新しいタブで動作を確認してみましょう。 


最後に動作確認をしてみましょう。 Djangoにはrunnserverコマンドがあるのでそれを用います。




最後に


最後にDjangoの言語設定と時間設定をしておきます。

これはこのアプリで使うものが日本の時間で日本語を扱うものと言うのを明示するものです。 再度 /techpitgram/techpitgram/settings.pyを編集します。 この後もいくつか追記をしていきますので覚えておきましょう。

言語設定

settings.pyのLANGUAGE_CODEを書き換えます。


書き換え前

LANGUAGE_CODE = 'en-us'

書き換え後

LANGUAGE_CODE = 'ja'

タイムゾーン

settings.pyのTIME_ZONEを書き換えます。

書き換え前

TIME_ZONE = 'UTC'

書き換え後

TIME_ZONE = 'Asia/Tokyo'

これ以降の章を進めるにあたって

次以降の章ではサーバー起動するのに次のコマンドを用います。

$ pipenv run python manage.py runserver 

Cloud9ではポートとの兼ね合いのため、次のように読み替えて勧めてください。

$ pipenv run python manage.py runserver 0:8080

これで環境構築は終わりです。

議論
8 質問
このコースの評価は?