ペイの技術MEMO

文系大学生の技術メモ

[Flask]環境構築メモ

Flask Python

はじめに

Flaskはとても軽量なPythonのフレームワークで簡単にAPIを作成したいときなどにファイル１つさえあれば動くようなフレームワークです。Pythonは今まで経験がないので、Python3をインストールするところから説明します。

環境

手順

  • Python3のインストール
  • venvモジュールで仮想環境を作る
  • 仮想環境を有効化する
  • Flaskをインストールする

Python3のインストール

Flaskの公式ではPython3の最新版をおすすめしているのでPython3系をインストールします。

  • homebewのインストール

公式にインストールのスクリプトが掲載されているので参考にしてください。

  • Python3のインストール
brew install python3
  • Python3のバージョン確認
python3 -V

venvで仮想環境構築

プロジェクトの依存環境を管理するためにvenvというモジュールをいれます。

仮想環境を作りたいディレクトリに移動して下記のコマンドを実行します

python3 -m venv [ここにディレクトリ名]

venvを有効化

Flaskの公式ではvenvを入れたら仮想環境を有効化してくれとあるので有効化します。 venvの公式では以下のような注翻があるので軽く目を通しておきました...

When a venv is active (i.e. the venv’s Python interpreter is running), the attributes sys.prefix and sys.exec_prefix point to the base directory of the venv, whereas sys.base_prefix and sys.base_exec_prefix point to the non-venv Python installation which was used to create the venv. If a venv is not active, then sys.prefix is the same as sys.base_prefix and sys.exec_prefix is the same as sys.base_exec_prefix (they all point to a non-venv Python installation).

有効化するコマンドはシェルによって異なります。

source <venv>/bin/activate
  • fish
. <venv>/bin/activate.fish
source <venv>/bin/activate.csh

ちなみに私はfish shellを使っていますが、Flaskの公式にある以下のコマンドはbashのコマンドだったようで

. venv/bin/activate

以下のエラーで若干ハマりました

if [ -n "${BASH:-}" -o -n "${ZSH_VERSION:-}" ] ; then
^
from sourcing file venv/bin/activate
called on line 359 of file /usr/local/Cellar/fish/3.0.1/share/fish/config.fish

in function '.'
called on standard input

fish使ってるのに知識不足です...

Flaskインストール

pip install Flask

参考

http://flask.pocoo.org/docs/1.0/installation/ https://qiita.com/7110/items/1aa5968022373e99ae28 https://docs.python.org/ja/3.5/library/venv.html

Vue.js コンポーネントの定義

Vue.js

Vue.jsのコンポーネントとは

Vue.jsの良いところは「コンポーネント」と言う部品を機能毎に開発できるところにあります。

Why?

わざわざ部品にしなくても良いのでは？と疑問に感じた方はECサイトなどの商品一覧ページを想像してみてください。

商品や、レビュー、値段などを一から全部書くのは少々手間です。また、値段の位置などは均一でないといけないので、少しのタイプミスも許されません。

なので、部品化してしまい再利用可能なコンポーネントを作ろうというのがコンポーネントを利用する意味です。

詳しくは下記を参考ください。

qiita.com

コンポーネントの定義

Vue.jsコンポーネントを使うにはグローバル、もしくはローカルに登録して利用します。

グローバル

html

<div id="app">
    <my-component></my-component>
</div>

javascript

Vue.component('my-component', {
    template: '<p>Mycomponent</p>',
})
//第一引数　カスタムタグで使う名前
//第二引数　オプション

var app = new Vue({
    el: '#app',
})

描画

<div id="app">
    <p>Mycomponent</p>
    <!-- コンポーネントで定義されているテンプレートと置き換わっている -->
</div>

描画される前の<my-component></my-component>をインスタンスと言います。

例えば今回はel: '#app'のように定義しているので、<div id="app"><div>で利用できますが、el: '#vm'のように新しくNEWしたら、そちらでも<my-component></my-component>が使えるようになります。

つまりグローバルで定義しているからです。

ローカル

var myComponent = {
    template: '<p>Mycomponent</p>',
}

new Vue({
    el: '#app',
    component: {
        'my-component': myComponent
    }
})

ローカルで定義する際はNEWの中にcomponentオプションを定義します。

componentはnewの上記で定義しています。

ちなみにコンポーネントをnewする前に書かないと読み込んでくれないのでnewする前に定義しましょう。

コンポーネントの命名については下記を参照。

コンポーネントの登録 — Vue.js

コンポーネントのオプション

コンポーネントは下記のようにオプションを記述できますが注意点があります。

それはdataはオブジェクトを返す関数にしないといけない点です。

Vue.component('my-component', {
    template: '<p>{{ message }}</p>',
    data: function() {
        return {
            message: 'Hello World!'
        }
    },
    methods: {
    }
})

Why?

複数のコンポーネントインスタンスで同じオブジェクトを参照して状態が変化してしまうのを回避するためです。

ということは下記のインスタンスは別々のインスタンスであることが分かります。

<div id="app">
    <my-component></my-component>
    <my-component></my-component>
</div>

参照

基礎から学ぶ Vue.js

https://vuejs.org/v2/guide/components.html

Amazon VPCとは

AWS ネットワーク VPC

※この記事ではAWSの操作の話は出てきません。

Amazon VPCでできること

Amazon VPCの概要については下記を参考。

docs.aws.amazon.com

まとめると

  • VPC領域をつくると自由なネットワークを作れる
  • ネットワークを分割して利用する「サブネット」を利用できる
  • サブネットの中にEC2を配置できる

VPC領域

VPC領域を指定するにはCIDR表記で指定する必要があります。CIDR表記については下記の記事でまとめました。

peei.hatenablog.com

VPCをサブネットに分割する

VPC領域を作成したらCIDR表記で範囲を指定しますが、一般的にはその範囲をそのまま使わず、さらにCIDRを細分化して利用します。

その細分化したCIDRブロックのことを「サブネット」と言います。

why?

なぜVPC領域で指定した範囲をそのまま利用しないのか疑問に思うかもしれません。その理由として

  • 分割したら、どちらかに障害が起きても、もう片方には影響がでにくい
  • 分割したら、それぞれに適切なネットワークの設定をすることができる

例えば

例えば、CIDR ブロック 10.0.0.0/24 を持つ VPC を作成した場合、その VPC では 256 個の IP アドレスがサポートされます。この CIDR ブロックは 2 つのサブネットに分割でき、それぞれのサブネットで 128 個の IP アドレスがサポートされています。一方のサブネットでは CIDR ブロック 10.0.0.0/25 (アドレス 10.0.0.0～10.0.0.127) が、もう一方のサブネットでは CIDR ブロック 10.0.0.128/25 (アドレス 10.0.0.128～10.0.0.255) が使用されます。

ここを参照

用途としてはパブリックサブネットとプライベートサブネットに分割した場合、パブリックサブネットにはwebサーバーを設置し、プライベートサブネットにはDBサーバーを設置するなどの用途で利用できます。

DBサーバーを設置しているプライベートサブネットには、インターネットには直接アクセスできないように構成することで、セキュリティを高めることができます。

インターネット回線とルーティング

サブネットを作成しただけではインターネットには接続できません。AWS VPCはインターネットに接続する時に「Internet Gateway」を使います。 f:id:PeeI:20190303032058p:plain

ルートテーブル

ルートテーブルはどのネットワークに流すべきかを設定したものです。

イメージしずらいかもしれませんが、上記の図で各サブネットと書いてある領域があります。そのサブネットに対してルートテーブルを設定できます。

具体的には「0.0.0.0/0の範囲はインターネットゲートウェイに転送する」といった設定をルートテーブルに設定します。

ちなみに「0.0.0.0/0」はすべてのIPアドレスの範囲です。

以下の記事が参考になりました。

awsinfra.site

まとめ

  • VPC領域でネットワーク空間を作る
  • CIDRを細分化したものをサブネットと言い、各サブネットにルートテーブルが関連ずけられている
  • ルートテーブルにはどのネットワークに接続するかの設定がなされている

IPアドレス基礎

IPアドレス ネットワーク

はじめに

AWSのVPCの勉強中にIPアドレスについての知識が必要になった為、簡単にまとめます。

IPアドレスとは

  • ネットワークで通信先を指定するものであり、互いに被らない番号が振られる
  • 32ビットで構成され、8ビットずつ10進数に変換したもの
  • IPアドレスにはパブリックIPアドレスとプライベートIPアドレスが存在する

ex) 192.168.1.0

  • 192を二進数にすると 11000000
  • 168を二進数にすると 10101000
  • 1を二進数にすると 00000001
  • 0を二進数にすると 00000000

IPアドレスの範囲

  • 一般的には256個(2の8乗)と65536個(2の16乗)がある
  • ネットワーク部とホスト部がある

ex) 192.168.1.0~192.168.1.255(256個)

まずはネットワーク部とホスト部だが 192.168.1までがネットワーク部になり、

0~255（256個）がホスト部になる。

ex) 192.168.0.0~192.168.255.255(65536個)

  • 192.168がネットワーク部
  • 0.0~255.255(65536個)がホスト部

表記方法

CIRD表記

上記で述べたネットワーク部のビット長を/ビット長で表す。

ex)192.168.1.0~192.168.1.255の場合

192.168.1(ネットワーク部)は8ビット.8ビット.8ビットの24ビットなので、192.168.1.0/24で表す

ex)192.168.0.0~192.168.255.255の場合

192.168(ネットワーク部)は 8ビット.8ビットの16ビットなので、192.168.0.0/16で表す

このビット長のことをプレフィックスと言う

サブネットマスク表記

プレフィックスのビット数を二進数の1 残りを二進数の0にして表記したもの

ex)192.168.1.0~192.168.1.255の場合

プレフィックスは24(8ビット.8ビット.8ビット)

つまり二進数にすると 11111111.11111111.11111111になる。

これを10進数にすると255.255.255になる。

残りは二進数で0になるので、サブネットマスクは255.255.255.0になる。

表記方法は192.168.10/255.255.255.0

ex)192.168.0.0~192.168.255.255の場合

プレフィックスは16(8ビット.8ビット) つまり二進数にすると

11111111.11111111になり10進数にすると255.255になる。

残りは0のため、サブネットマスクは255.255.0.0

表記方法は192.168.0.0/255.255.0.0

表記方法のまとめ

  • 表記方法はわざわざ10進数や二進数などに変換して考えなくても覚えれば視覚的に範囲がわかる。
  • 256個分の範囲はCIDR表記で「/24」サブネットマスク表記で「/255.255.255.0」
  • 65536個分の範囲はCIDR表記で「/16」サブネットマスク表記で「/255.255.0.0」

個人的な感想

表記方法を覚えるのに少し時間がかかったが、まとめてみると以外とすっきりした。

インフラ周りの勉強は初めてなので、間違いや誤字はコメント頂けると嬉しいです。

なぜVue.js?

Vue.js

なぜVue.js?

jp.vuejs.org

上記のなぜVue.js?の動画を見てみると何か英語で説明していますが、私には分かりません。

cr-vue.mio3io.com

なので基礎から学ぶVue.jsを買ってきて、勉強することにしました。(公式読んでもわからない人)

Why?

なぜVue.jsを使わないといけないのか？

それはフレームワークに設計を手助けしてもらうためです。

以下はライブラリは使わず、JavaScriptでテキストの要素を更新する処理になります。

var el = document.getElementById('text')
el.innerText = '新しいテキスト'

行数的には少なくシンプルに見えますが、規模が大きくなると可読性が悪くなり、管理がしずらくなります。

そこで、注目されたのが、データバインディング型のライブラリやフレームワークです。

へ？どゆこと？

実際にVueのコードを見てみる

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js App</title>
    <link href="main.css" rel="stylesheet">
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="main.js"></script>
</body>
</html>

JavaScript

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue.js!'
    },
})

実際の描画

<div id = "app">
    <p>Hello Vue.js!</div>
</div>

JavaScript内に書かれているmessageの内容がhtmlの{{ }}の中に置き換わっています。

文法的な説明は別の記事でまとめるとして、JavaScriptのmessageプロパティがテキストの一部としてバインドしています。

つまり、画面に描画されたデータを変更したいときも、DOMを更新する処理を自分で書く必要がありません。

データバインディング

先ほど述べた、DOMを更新する処理を自分で書く必要がない、ということをもう少し詳しくみてみます。

先ほどのコードをブラウザでみると、単に「Hello Vue.js!」と表示されてますが、特にメソッドを定義したわけでもありません。

それはリアクティブシステムといいVue.jsが内部でいろいろ処理をしてくれて結果的に反応できるデータにしてくれています。

jp.vuejs.org

リアクティブシステムでは

  • DOMの更新
  • DOMの更新を最適化
  • 加工したデータの同期
  • 変更を検知し、処理を自動で実行

などができ、Vue.jsではこのリアクティブシステムにより、大半が動いているそうです。

結論

多分わかれば、凄い楽しいフレームワークだと思う。

余談

今回、hatenaに初投稿です。全体的に見づらいので記事を書きながら改善できればと思います。

あとVue.jsの勉強と平行でLaravelも勉強しているので、アウトプットしていきたいです。