# 作る！勉強会：デプロイ編【第３回】
本日は、作る！勉強会にお越しくださいましてありがとうございます。
## 本勉強会の目的
「実際に体験し(ハンズオン)、ソフトウェア開発の作る力を身につけること」
第３回のWebページ公開し、URLからWebページを見れるようにします。
## 「デプロイ」とは
Wikiによると、
> 主にネットワークを通じて提供されるWebアプリケーションなどのシステム開発工程において、システムを利用可能な状態にすることである。
つまり、作ったWebアプリをサーバ(正確にはサーバコンピュータ)に送り、インターネット上から他の人が見れる、使えるようにすることを言います。
## どうやってデプロイするか
デプロイは、サーバにプログラムを送り、サーバ上で動かす事が出来れば、方法は問いません。
そのため、各社、各サービス様々な方法が存在します。
例えば、規定の仕様で書くだけでデプロイ出来たり([Firebase](https://firebase.google.com/?hl=ja)や[monaca](https://ja.monaca.io/)など)
はたまた、
[専用サーバ](https://www.kagoya.jp/dedicated/)や自社サーバ(**オンプレミス**)、自宅サーバで
CPUやメモリから選んで運用(リリース)するという場合もあります。
## クラウドサービスでデプロイする
現在、クラウドサービスのデプロイがトレンドです。
基本的にクラウドサービスは、自社サーバ(オンプレミス)とは違い、使った分だけ課金される**従量課金制**です。
つまり、サービスがあまり使われない夜は、あまりお金がかからないメリットがあります。
また、サーバをメンテナンスしなくても良いため、人件費が浮きます。
Microsoftの主要な営業利益率を見てみると、クラウドサービスである「Azure(アジュール)」が大きな利益を挙げている事がわかります。
[出典：Microsoft 2020年度（2020年6月に終了する決算年度）第3四半期（1〜3月期）決算資料](https://www.microsoft.com/en-us/Investor/earnings/FY-2020-Q3/press-release-webcast)
### PaaS(Platform as a Service)とは
アプリケーションの実行に必要なプラットフォーム(土台)となる
ネットワークやサーバーシステム、OSやミドルウェアなどを、インターネットを経由して利用できるサービスの事を言います。
代表的な**PaaS**として、
Amazon「Amazon Web Service(**AWS**)」
Microsoft「**Azure**」
Google「Google Cloud Platform(**GCP**)」
の３大クラウドがあります。
### クラウドサービス独自の仕組み
クラウドサービス(**PaaS**)と従来のオンプレミスやレンタルサーバとの最大の違いは、
物理的なサーバを貸してくれるだけでなく、
開発効率を上げてくれるサービスを提供してくれる点です。
例えば、
「オートスケール」...処理負荷が上がるとサーバの台数や性能を自動で増やす機能。
「サーバレス」...物理的なサーバ構成を気にせず、サービスを構築できる。
こうしたフルマネージド(PaaS側で面倒な作業を勝手にやってくれる)なサービスを提供してくれる点も、クラウドサービス(PaaS)を導入する企業が多くなる一因となっています。
## クラウドサービスにおけるデプロイでよく使われる技術
「**Git**」と「**コンテナ型仮想環境**」
という技術がよく使われます。
## 「Git(ギット)」とは
「ソースコードの保存した履歴を管理するツール」の名前です。
システム開発では複数の開発者によってソースコードが書き換わります。
・いつ誰がどこを変えたのか？
・最新の保存履歴はどれか？
など、ソースコードの履歴を把握する必要があります。
この履歴を管理をするツールの1つが「Git」です。
### 「GitHub(ギットハブ)」とは
「**Git**を利用した、開発者を支援するWebサービス」です。
https://github.com/Tonoyama
**GitHub**は、クラウド上でGitを用いたバージョン管理をすることができ、さらにGitには無い、開発者に便利な機能(GUI:ポチポチや検索機能など)を追加しています。
GitHubの他にも自社で運用できる[GitLab](https://about.gitlab.com/)やプロジェクト管理に重点を置いた[BitBucket](https://bitbucket.org/)があります。
「**Git**」はツールの名前で、「**GitHub**」はWebサービスの名前です。
この2つは「メールとGmail」のように同じ関係です。
## 「仮想化」とは
ソフトウェアで、自由なスペックでハードウェアを再現する技術を「**仮想化**」と呼びます。
実際には１つしかないのに複数あるように見せかけることで、**仮想化**、または、**仮想化技術**と呼ばれています。
### 仮想化技術によるメリット
- 従来は、１つの実行環境に１つのサーバが必要だったのが、１つのサーバに複数の実行環境を実行できる。
- 新サービスを作りたい時、新しく物理サーバを購入・設置する必要はなく、安価で速やかに新サーバーの手配が可能になる。
- 負荷分散が高速、安価
従来は、高負荷な処理をさばくために多くのサーバ台数が必要だったが、
仮想化の場合、仮想環境を増やすだけでサーバ(実行環境)を増やせるため、必要な時に必要なだけ、CPUやメモリを使える。
### クラウドで仮想環境
仮想化にも複数の技術がありますが、現在、よく使われている仮想化技術のひとつが「**コンテナ型仮想化**」と呼ばれる技術です。
### 「コンテナ型仮想化」とは
OSの機能の１つに「カーネル」というCPUやメモリなどのハードウェアとソフトウェアを仲立ちする機能があります。
このカーネルでCPUやメモリを区切る(パーティション)事で、仮想化を実現する技術の事を「**コンテナ仮想化**」いいます。
コンテナ仮想化によって、同じOS上で互いに隔離したプロセス(処理)を実行できるため、従来の仮想化技術に比べ、**立ち上げが速い**特徴があります。
### 「Docker(Docker)とは」
このコンテナ仮想化を使いやすく、高機能にしたソフトウェアが、「**[Docker](https://www.docker.com/)**」です。
Dockerでは、欲しいOSイメージやソフトウェアを「**Dockerfile**」というファイル一枚に書くだけで欲しい仮想環境を作れます。
PythonのWebフレームワーク「Flask」をUbuntu(Linux OSの１つ)上で動かしたい場合。
```dockerfile=
#ベースイメージは、Ubuntu(Linux OS)をインストール
FROM ubuntu:latest
RUN apt-get update
RUN apt-get install python3 python3-pip -y
RUN pip3 install flask
# Docker内にhomeフォルダを作る
WORKDIR /home
```
その他にも、他の人が作ったDockerfileを手軽に共有する事もできます。
下記コマンドを打つだけで、ディープラーニングの実行環境が立ち上げられます。
`docker pull`で環境(イメージ)をダウンロード
```shell=
docker pull tensorflow/tensorflow:latest-jupyter
```
`docker run`でコンテナを起動
```shell=
docker run -it -p 8081:8888 tensorflow/tensorflow:latest-jupyter
```
## PaaS「Heroku(ヘロク)」でデプロイする
### PaaS(Platform as a Service)とは
アプリケーションの実行に必要なプラットフォーム(土台)となる
ネットワークやサーバーシステム、OSやミドルウェア(DBやWebサーバ)などのインフラや、それらをサポートするソフトウェアを、
インターネットを経由して利用できるクラウドサービスの事を言います。
例えば、`Heroku`の場合、
サーバを貸してくれるだけでなく、CPUやメモリ使用率などの統計情報も載せてくれます。(有料版)
デプロイすると、こんなURLでWebサイトにアクセスできます。
https://heroku-js.herokuapp.com/
### heroku CLIのインストール
#### [The Heroku CLI Download and Install](https://devcenter.heroku.com/articles/heroku-cli#download-and-install)
に色々なOSへのインストール手順が書いています。
Windowsは、下記をクリックして、ダウンロードできます。
https://storage.googleapis.com/ramen-image/heroku/heroku-x64.exe
(22.7MB)
Macの場合、インストーラーもありますが、brewを既にインストールしていると簡単です。
```shell=
brew tap heroku/brew && brew install heroku
```
Ubuntu/Debianの場合、
```shell=
curl https://cli-assets.heroku.com/install-ubuntu.sh | sh
```
Next >
Install
Close
でインストールできました。
Chromeを起動し、PowerShellかコマンドプロンプトで、下記を記述
```shell=
heroku login
```
New to Heroku? > Sign Upで新規登録します。
#### 注意
`Primary development language*`は、Pythonにします。
#### Gmailで「Confirm your account on Heroku」をチェック
「`https://id.heroku.com/account/accept/`」というリンクをクリック
#### Passwordを設定
Welcome to Herokuと出ると、「CLICK HERE TO PROCEED」をクリック。
「Logged In」と表示される。
#### デプロイするファイルをダウンロード
https://drive.google.com/drive/folders/1jEYDpwoPJ3QvWfOuYSZS9XRYQm_C8teo?usp=sharing
今回は、Pythonの「Flask」というWebフレームワークに第２回のコードを移植しています。
:::info
「**Webフレームワーク**」とは、Webアプリ開発で使用頻度の高い共通の機能の動作や処理をパッケージ化したものを言います。
Webフレームワークを使うことで、コードをルールに則り整理していないと動かないようになっていたり、ブラウザ間のやり取りを気にすること無く開発に集中することが出来ます。
:::
### HerokuのGitでデプロイ
コマンドプロンプトに解凍したファイルをドラッグ・アンド・ドロップする
例：
下記の様にファイル名が表示される。
```
C:\Users\p-user\ダウンロード\yudai-js
```
`cd`コマンド(Change Directry)の意味、でheroku-jsディレクトリ(慣習的にファイルのことをディレクトリと呼ぶ)に移動する。
```
cd C:\Users\p-user\ダウンロード\yudai-js
```
#### git init
`git init`でコマンドを実行したディレクトリ(慣習的にファイルのことをディレクトリと呼ぶ)以下が`Git`で管理された状態になります。
```shell=
git init
```
```
Reinitialized existing Git repository in C:/Users/p-user/デスクトップ/yudai-js/.git/
```
#### git add
「.」は現在のディレクトリ(ファイル)を表しています。
今回は初回のため、「**git add .**」で今いるディレクトリの全てのファイルを「**インデックス**」という領域に登録します。
今後、修正したファイルがあった場合、git addでファイルを選択し、インデックスに登録します。
この作業を「**ステージング**」と言います。
「**インデックス**」には「これから**ローカルリポジトリ**に変更を登録したいファイル」を追加します。
「**ローカルリポジトリ**」とは、自分のPC(ローカル)にあるファイルの変更履歴の保管場所のことを言います。
逆に「**リモートリポジトリ**」とは、専用のサーバに配置して複数人でファイルの変更履歴を共有するための保管場所のことを言います。
「GitHub」のリモートリポジトリ：
https://github.com/Tonoyama/guguru-page
```shell=
git add .
```
ステージングされているか確認したい場合、
```shell=
git status
```
#### git commit
インデックスに登録(ステージング)したファイルの変更内容を「ローカルリポジトリ」に記録するときに「**git commit**」コマンドを使います。
`-m "Comment"`オプションでファイルに好きなコメントを書けます。
```shell=
git commit -m "First commit"
```
コミットを確認したい場合、
```shell=
git log
```
#### Herokuでオリジナルのアプリ名を登録
Herokuに世界に１つしか無い好きなアプリ名を登録します。
名前を入れると被りにくいです。
```shell=
heroku create heroku-js
```
被っていると注意されます。
```
Creating ⬢ heroku-js... !
! Name heroku-js is already taken
```
被っていなければ、URLが作られます。
```
Creating ⬢ yudai-js... done
https://yudai-js.herokuapp.com/ | https://git.heroku.com/yudai-js.git
```
<details>
<summary>You've reached the limit of 5 apps for unverified accounts.と出た場合の対処</summary>
`heroku`では、無料アカウントは、５つまでしかデプロイできないため、削除する必要があります。
```shell=
heroku apps
```
でアプリ名を確認。
```
heroku destroy --app アプリ名
```
で消します。
```
Destroying ⬢ アプリ名 (including all add-ons)... done
```
と出れば成功です。
</details>
#### Herokuへファイルを送る
`git push`でリモートリポジトリにファイルを送信します。
現在、`git push heroku master`でherokuというリモートリポジトリのmasterというブランチにファイルを送信する作業をしています。。
「**ブランチ**」とは、履歴の流れを分岐して記録していくためのものです。
`master`ブランチとは、リポジトリに最初のコミットを行うと自動的にできるブランチの事です。
##### masterブランチの使いどころ
複数人での開発を行う時、各自が好きな名前のブランチに変更履歴を記録し、作業の最後に`master`ブランチにpushし、変更を反映させます。
```shell=
git push heroku master
```
`push`が成功すると、URLが生成されます。
```
Counting objects: 17, done.
Delta compression using up to 20 threads.
Compressing objects: 100% (12/12), done.
...
remote: https://heroku-js.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.
To https://git.heroku.com/heroku-js.git
* [new branch] master -> master
```
URLだけでなく、下記コマンドでもアクセスできます。
```shell=
heroku open
```
### ２回目以降のデプロイ
```shell=
git add .
```
```shell=
git status
```
```
ブランチ master
コミット予定の変更点:
(use "git reset HEAD <file>..." to unstage)
新しいファイルが作成されたという意味
new file: static/image/illustrator.jpg
new file: static/image/programming.jpg
new file: static/image/server.jpg
削除した。という意味
deleted: static/image/snow.jpg
deleted: static/image/title-img.jpg
変更した。という意味
modified: static/js/index.js
modified: templates/index.html
```
好きなコメント書きましょう。
```shell=
git commit -m "Modified commit"
```
コミットされていない場合、
```
Everything up-to-date
```
と表示されます。
```shell=
git push heroku master
```
```shell=
heroku open
```
## 付録：Herokuでコンテナデプロイ
```shell=
heroku container:login
```
```shell=
heroku create アプリ名
```
```shell=
heroku container:push web
```
```shell=
heroku container:release web
```
```shell=
heroku open
```
## [第３回：アンケート](https://forms.gle/GDQt1c59njroL7zLA)
## 第３回に参加して頂き誠にありがとうございました。
Sign in via Facebook
Sign in via X(Twitter)
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Connect another wallet