# VisualStudioCodeでプログラミングを始めよう③

### 前提条件
手元で作業される場合は、以下のインストールや取得が必要です。
WindowsでもMacでもおｋ

- VisualStudioCodeのインストール
https://code.visualstudio.com/download

- Gitのインストール
[インストール手順](https://git-scm.com/book/ja/v2/%E4%BD%BF%E3%81%84%E5%A7%8B%E3%82%81%E3%82%8B-Git%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)

- DockerHub登録
https://hub.docker.com

- Docker Desktopのインストール
(Windows10はProじゃないと動きません)
https://www.docker.com/products/docker-desktop

- マイクロソフトアカウントとAzureサブスクリプションの取得
https://azure.microsoft.com/ja-jp/
※5/2の「令和になったしAzure始めよう」セッションも合わせてどうぞ。

---

## VSCodeでコンテナアプリ開発

SoftwareDesign4月号の寄稿されてる記事を参考に進めます。
手元でやる方、分からなかったら買いましょう！(せめてもの宣伝)

### 1. VS Codeに拡張機能を入れる

拡張機能の画面はCtrl+Shift+Xで開ける。
MS公式の拡張機能[**Docker**]を入れる。
- Dockerfile,docker-compose.ymlのハイライトやインテリセンス
- VSCodeからDockerDesktopやAzureのコンテナサービスに対する操作
- コマンドパレットからDockerの操作

### 2.Node.jsでサンプルアプリを作る

以下のリポジトリからClone
https://github.com/asashiho/webapp-container

> git clone https://github.com/asashiho/webapp-container.git

ファイルの解説
- .dockerignore ：Dockerイメージに含めないファイルを定義
- .gitignore ：gitにコミットしないファイルを定義
- Dockerfile ：Dockerイメージの定義
- package.json ：node.jsのパッケージの依存関係などを定義
- server.js ：コンテナ内で実行されるnode.jsのファイル

Dockerfileのベースのイメージをalpineに変えよう
コンテナのサイズが1/10以下になるよ

変更前）FROM node:8
変更後）FROM node:8-alpine

### 3.Dockerfileをビルドする。

VSCodeのコマンドパレット（Ctrl+Shift+P）から
[**Docker Build Image**]を選択。

Dockerイメージの名前をつけて実行。
[あなたのDockerHubID]/[コンテナ名]:[タグ]
（tenn25/webapp-container:1.0）

実際には以下のコマンドが実行されます。

> docker build --rm -f "Dockerfile" -t [あなたのDockerHubID]/webapp-container:1.0 .

Dockerイメージができてることを確認する

> docker images
REPOSITORY                TAG                 IMAGE ID            CREATED             SIZE
tenn25/webapp-container   1.0                 aef419f087c8        5 minutes ago       69.8MB
node                      8-alpine            75a2ffce2f88        7 days ago          66.7MB

### 4.コンテナ起動
コマンドパレット（Ctrl+Shift+P）から
[**Docker Run Interactive**]を選択
今作ったDockerイメージを選択。

実際には以下のコマンドが実行されます。

> docker run --rm -it -p 8080:8080/tcp tenn25/webapp-container:1.0

ブラウザでlocalhost:8080にアクセス
プログラムが動いてることを確認できればOK

### 5.その後のアプリなどの変更

コマンドパレット（Ctrl+Shift+P）から
[**Docker Remove COntainer**]でコンテナ停止後、
再度イメージのビルド→コンテナ起動を実施すればOK

試しにserver.jsを書き換えて再度ビルドしてみよう。
これでローカルでのコンテナアプリ開発はOK!!

### 6.コンテナイメージの共有

DockerHubにPushしよう。

コマンドパレット（Ctrl+Shift+P）から
[**Docker Push**]を選択。

自分のDockerHubアカウントで認証

ブラウザ上からDockerHubにログインしてPushされてることを確認しよう。
また、リポジトリがPublicになってることも確認しよう。

### 7.クラウド(Azure)にデプロイ

VSCode画面左側のDocker拡張からも認証して連携可能。
Registries>tenn25>webapp-container:1.0を右クリック
[Deploy Image to Azure AppService]
を選択。

リソースグループ
AppServicePlan名
AppServicePlanのインスタンスサイズ
WebAppsの名前(一意)
を入力すると、Webappsにデプロイされる。

ブラウザから動作確認。

### お片付け
AppServiceインスタンスの削除を忘れずに。
Azureポータルにログインして、リソースグループごと削除しよう。

---

## 個人でプログラミングを勉強していく方法

意見くださいー

#### モチベーション
- 作りたいものがあるといいよね
- 同じ言語勉強してる人が身近にいると心強い
- ミニマムスタートがいい
- スクリプト言語から始めてみる？

#### 勉強方法
- Udemy
個人的に導入は一番スムーズ

---

## VSCodeでサーバレスとIoT

**★★こっちはセッションとは別で延長戦としてやります。
お時間あればお付き合いください★★**

### 1.拡張機能のインストール

Microsoft公式の[**Azure Tools**]という拡張機能をインストール

主要な4サービスが包括的に使えるお手軽拡張機能みたいなやつ
今回はFunction(FaaS)とCosmosDB(NoSQL)を使います。

### 2.開発環境構築

Windowsの場合はnpmで入れるのでNode.js8.0以上をインストール。
Macはbrewで入れられるので不要。
https://nodejs.org/en/download/

>node --version
v10.15.3

Azure Functions Core Toolsのインストール
https://docs.microsoft.com/ja-jp/azure/azure-functions/functions-run-local
今回はバージョン2を使います(2はマルチプラットフォーム対応)

Win)
npm install -g azure-functions-core-tools

Mac)
brew tap azure/functions
brew install azure-functions-core-tools

VSCodeを再起動しましょう。

### 3. AzureFunctionの作成

VSCode拡張画面
「FUNCTION」のフォルダマーク(Create New Project)を選択

- 言語：Javascript
- トリガー：HTTP Trigger
- バージョン：V2
- Function名：vscode-function-demo

プロジェクトが作成されればOK

### 4.ローカルでデバッグ実行

Debug>Start Debugging
コンソールに
http://localhost:7071/api/vscode-function-demo
と表示されるのでアクセス。

http://localhost:7071/api/vscode-function-demo?name=tenn25
とnameパラメータをつけると

Hello tenn25

と返ってくる。

次は、このパラメータをDBに保存するようにする。

### 5.CosmosDBの作成

CosmosDBはグローバル分散型のNoSQLデータベースです。

VSCode拡張画面
「COSMOS DB」から＋マーク(Create Account)を選択

- アカウント名：好きに
- DBの種類：今回は「SQL(DocumentDB)」を選択
- リソースグループ：新規作成
- リージョン：Japan East

### データベースの作成
VSCode拡張画面
「COSMOS DB」>サブスクリプション>cosmosdb-tenn25(SQL)

- データベース名：demo-db
- コレクション名：function-logs
- パーティションキー：id
- スループット：1000

まとめるの疲れた・・
こっから先はSoftwareDesignを読みながら進めます。

---