# VisualStudioCodeでプログラミングを始めよう③ ### 前提条件 手元で作業される場合は、以下のインストールや取得が必要です。 WindowsでもMacでもおk - 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を読みながら進めます。 ---