2019-02-20

今夜は社内AWSもくもく会 - CloudFormer（ベータ版）のご紹介と使い方

AWS

こんにちはふるてつです。
今回も社内AWS もくもく会の内容です。

今日はCloudFormerをご紹介します。もくもく会で他の人に聞いた話ですが…

既存の環境から CloudFormation の Template を作るツールがAWSにあると聞き、早速試してみました。
下記の手順を実際に試してみましたので宜しくお願いします。
https://docs.aws.amazon.com/ja_jp/AWSCloudFormation/latest/UserGuide/cfn-using-cloudformer.html

その１ CloudFormationのスタック作成

「メニュ」ーから「CloudFormation」を選びます。

f:id:tetsufuru:20190220204227p:plain

まだわたしの環境はなにも登録していない状態です。
この画面上で「新しいスタックの作成」をクリックします。
下の画面が表示されるようになります。
f:id:tetsufuru:20190220204355p:plain

「サンプルテンプレートの選択」欄には "CloudFormer" を選択して「次へ」進みます。 f:id:tetsufuru:20190220205303p:plain

「スタックの名前」欄と「パラメータ」欄を入力し、「VPCSelection」は "CreateNewVPC"を選択しました。
f:id:tetsufuru:20190220205647p:plain

「VPCSelection」は他に "default" も選択できましたが、"default" を選択するとデフォルトのVPC内にできる模様です。
デフォルトののVPCがどれなのかいまひとつ分からないのでdefaultはためしませんでした。

f:id:tetsufuru:20190220210224p:plain あと上記のオプションはなにも入力しないで進めることができます。

f:id:tetsufuru:20190220210319p:plain f:id:tetsufuru:20190220214541p:plain

上記のような確認画面が出ますので、
「AWS CloudFormationによってIAMリソースが作成～承認します。」欄はチェックをいれて「作成」をクリックします。

f:id:tetsufuru:20190220214917p:plain これでスタックができあがりました。
あとはこのスタックを使用して以前わたしが作った VPC を Template 化していきます。

その2 Template作成

Templateを作成していきます。その１で作ったスタックをクリックして詳細画面を開きます。

f:id:tetsufuru:20190221010647p:plain 下の方に出力欄が見えますが値が URL になっています。
その URL をクリックすると CloudFormer のウィザード画面が表示されます。
下記画面です。

f:id:tetsufuru:20190220215707p:plain まず使用しているリージョンを選択して「Create Template」をクリックします。

f:id:tetsufuru:20190220215836p:plain 「Template Description」には概要を入力し、そのあとはTemplateにしたいリソースが表示されるまで「Continue」をクリックし続けます。

f:id:tetsufuru:20190220220125p:plain わたしの場合はVPCをTemplateにしてみようと思い、以前作成したVPCにチェックを入れました（上の画面）

f:id:tetsufuru:20190220220331p:plain そのあとは選択したVPCに関連するリソースが自動で選択チェックされているようで、最後まで「Continue」をクリックし続けました。

f:id:tetsufuru:20190220220604p:plain そして最後に上記のような感じで Template（json）ができました。
グレーの部分が Template です。

感想

今回も客先から事務所にもどっての自社内「もくもく会」の内容でした。
実際のリソース（VPC）から CloudFormation の Template をリバースして作ってみました。
この Template を使って本当に今と同じ VPC が出来上がるかは、今回は試しませんでした。
いませっかく作っているVPCを消さないとならないので、それはもっと詳しくなった後でいいかなと思いまして。

それよりもできあがった json を確認することで、CloudFormationを使う時にどういう設定をすればいいか？を逆に推測できるかなと思いました。
Cloud Former を使いこなせば、きっとその点で良い参考になると思います。

では、お疲れさまでした。

2019-02-17

今夜は社内AWSもくもく会 - ルーティングテーブルとインターネットゲートウェイの作成方法

AWS

こんにちはふるてつです。
今回もAWS社内もくもく会の内容です。

以前、書籍を参考にVPCとサブネットを作りましたが、その続きです。

今回はルーティングテーブル作成とインターネットゲートウェイ作成になります。
結局、何をしたいかというと「インターネットアクセスを有効にしたい」というおはなしになります。
ユーザーガイドで言うところの下記のような内容です。
https://docs.aws.amazon.com/ja_jp/vpc/latest/userguide/VPC_Internet_Gateway.html

今回は本当にわたしがお勉強した回になります。
普段わたしのような開発系の人間はあまり関わらない部分でして。

その１ルーティングテーブル作成

「メニュ」ーから「ルートテーブル」を選び、ルートテーブル画面を表示します。
すでにデフォルトでいくつかできている模様です。
この画面にて「Create route table」ボタンをクリックします。

f:id:tetsufuru:20190214223114p:plain

下の画面が出てくるので「Name tag」を入力し、「VPC」を選択します。
「VPC」は前回新たにわたしが作成したVPCを選び、「Create」ボタンをクリックします。

f:id:tetsufuru:20190214222836p:plain

そして作成完了
f:id:tetsufuru:20190214223331p:plain

その2 ルーティングテーブルとサブネットを関連付け

先ほど作成したルーティングテーブルをクリックします。
画面下方に5つ程タブが出てくるのですが、その中から「Subnet Associations」タブを選択します。

f:id:tetsufuru:20190217111103p:plain

「Edit subnet associations」ボタンを押すと、下の画面のように、ルーティングテーブルに紐づけられているサブネットが表示されます。
いまはどれも紐づいてなく "subnetsは選択されていません" とのメッセージが表示されています。
ここで前回作ったサブネットを選び保存します。

f:id:tetsufuru:20190217111530p:plain

f:id:tetsufuru:20190217112147p:plain

これでサブネットとの紐づけ終了。

その3 インターネットゲートウェイの作成

次はインターネットゲートウェイを登録します。
まずメニューから「インターネットゲートウェイ」を選びます。

f:id:tetsufuru:20190217112511p:plain

すでに1件存在しますが、デフォルトで作られたものです。放っておきます。
新しく登録したく「インターネットゲートウェイの作成」ボタンをクリックします。

f:id:tetsufuru:20190217113129p:plain

f:id:tetsufuru:20190217113233p:plain

登録できました。

このあと再度「インターネットゲートウェイ」の画面に戻ります。
デフォルトですでに存在した方と今回作成した方（AWS_Test_Gateway）の2つが表示されます。
片方を VPC からデタッチし、新しく作った方を空いた VPC にアタッチします。

f:id:tetsufuru:20190217114155p:plain

（※わたしが参考にしている書籍には、デタッチの事は書いていませんでしたが、既存のゲートウェイをVPCからデタッチしないと、新しく作ったゲートウェイにアタッチできませんでした）
では、まず既存をデタッチします。
下の画面で「Name」が空の方が既存の方で、それを選択し「アクション」の「VPCからデタッチ」を実行します。
f:id:tetsufuru:20190217114310p:plain

次に新しく登録した方のアタッチをおこないます。
f:id:tetsufuru:20190217114752p:plain

VPCを選び、「アタッチ」を実行。 f:id:tetsufuru:20190217115101p:plain

これでインターネットゲートウェイの作成終了です。

その4 ルーティングテーブルに対応する送信先 IPアドレスの設定

すべてのIPアドレス向けのリクエストを、このルーティングテーブルに対応させます。
メニューから「ルートテーブル」に再度戻り、今回作成したルーティングテーブルを選択します。
その後、画面下方のタブから「Routes」タブを選択します。

f:id:tetsufuru:20190217120345p:plain

「Edit routes」をクリックすると下記の画面となり、送信先アドレス（Destination）を追加します（Add routeをクリック）

f:id:tetsufuru:20190217120824p:plain

すべての送信先アドレスに対応させるので "0.0.0.0/0" を設定して保存します。
"0.0.0.0/0" ってなんでしたっけね。
なんだかわからなくて周りの人に聞いてしまいました。
うまく説明できないので、知りたい方は下記をご参照ください。
0.0.0.0 ‐ 通信用語の基礎知識

f:id:tetsufuru:20190217121341p:plain

上記画面で、登録が完了すれば終わりです。最終的に下の画面のようになりました。
正しく動作するのかは次回以降に試す予定です。

f:id:tetsufuru:20190217125939p:plain

感想

今回も客先から事務所にもどっての自社内「もくもく会」の内容でした。
21時まで実施したのですが、ブログにする時間が足りなくて、この記事をまとめたのは3日後の日曜日になってしまいました。

今回の内容はルーティングでしたが書籍の通りに設定しただけで、正直まだあまり良く理解できていません。
私の会社内にはインフラ系の社員が多く在籍するので、誰かを捕まえ、質問ぜめにしたいと思います。

では、お疲れさまでした。

2019-02-14

今夜は社内AWSもくもく会 - 請求のアラート登録方法

AWS

こんにちはふるてつです。
今日は社内もくもく会の日です。今回もAWSをやります。

今日はちょっとしたトピックを書きたいと思います。

いまわたしはAWSに登録しての12か月間を無料で使用できる時期なのですが、その中でも有償になることがあるそうです。
無料枠で使えないようなサービスを使うとその有料分を請求されるそうですね。
そこで気づかないでそのような状態に陥らないために、請求額のアラートを入れておこうと思います。
（予算を超えた場合、自分宛てにメールが送られます）
これはもくもく会にて他の方に習いました。

その１予算を登録

f:id:tetsufuru:20190213214133p:plain:w500

上記のように「請求書」→「予算」で「AWS Budgets」の画面を表示します。
この画面で「予算を作成」ボタンを押すと下記の画面に変わります。

f:id:tetsufuru:20190213214556p:plain:w500

この画面では「コスト予算」を選択して「予算の設定」ボタンを押します。

f:id:tetsufuru:20190213215102p:plain:w500

「名前」と「予算額」を入力して、他の欄はデフォルトのままです。
この「予算額」を超えたら自分あてにメールが送られます。
とりあえず10ドルくらいにしておくと良いかと思います。

f:id:tetsufuru:20190214104356p:plain:w500

「次に基づいてアラートを送信」欄はどちらが良いのか？
はっきりとはわかりませんが、額が少ないので "実際のコスト" にしました。
あとは「Confirm Budget」を押して、その後も確認しながら最後まで進みます。

f:id:tetsufuru:20190214105025p:plain:w500

f:id:tetsufuru:20190214105149p:plain:w500

登録完了しました。
これでひと安心という感じでしょうか。
登録した予算 10 ドルの 80% で 8 ドルかかった時点でアラートのメールが、私の所へ送信されると思います。
あと12か月くらいはメール飛んでこないでほしいものですね～。

感想

今回も客先から事務所にもどっての自社内「もくもく会」でした。
21時まで実施したのですが、ブログにする時間が足りなくて、まとめたのは翌日になりました。
ブログを書くのって結構時間がかかりますね。
まずは今回のような簡単なトピックを先に書いてみましたが、昨日はもう一つ試したのでそれは追ってまた別途書きます。

ちなみに社内もくもく会の様子はこんな感じです。
机の上しか写真を撮っていませんがみな一生懸命でした。
f:id:tetsufuru:20190214110327p:plain:w500

では、お疲れさまでした。

2019-02-09

Angular7 + Bootstrap4でWebアプリを作ろう（Bootstrap 4.2.1）

Angular

こんにちはふるてつです。昨年の後半からしばらくAngularの活動をさぼっていましたが、今月からまた再開しました。

Angularのバージョンアップ

しばらくさわらなかった間にAngularのバージョンが 6 から 7 に上がりました。
今日はバージョンアップをしようとしていたのですが、Bootstrapで少し予想外のことがありました。
そのことを書いてみます。

結論

結果から先に書くと、Angularのバージョンを上げる前にnpm updateコマンドでライブラリを最新化したところ、Bootstrap 4.1.3 が Bootstrap 4.2.1にあがり、ドロップダウンやナビバーが軒並み動かなくなりました…
4.2.1 には issue がかなりある模様で、Bootstrapはしばらくバージョンを直接指定して、4.1.3 を使うことにしました。

今回やったこと

では今回何を実行したか順を追って書きます。

Angularのバージョン確認

Visual Studio Codeのターミナルでバージョンを確認しました。コマンドは下記。
ng --version

f:id:tetsufuru:20190207191251p:plain:w500

6.2.4でした。

使用しているライブラリを最新化

Angularのバージョンを上げる前に使用ライブラリを最新化。コマンドは下記。
npm update

動作確認

動作を確認しましたが、ナビバーやドロップダウンが全く動かなくなりました…
デバッグのコンソールには下記のメッセージがはき出されていました。

f:id:tetsufuru:20190209133941p:plain:w500

Angularのバージョンアップ

わたしは Angularをバージョンアップすればおさまると思い、Angularを 7 にバージョンアップしました。
下記のコマンドを実行しましたが、変化はありません。
コマンドの実行自体は簡単ですぐに終わりましたけれど。
ng update @angular/cli @angular/core

Bootstrap 4.2.1の不具合

エラーメッセージを頼りにネットで調べたところ、Bootstrap 4.2.1 の不具合(issue)とわかりました。

https://github.com/twbs/bootstrap/issues/27903#issuecomment-449600715

この不具合は「Closed」と書いてましたが結局修正済みなのか、英語で書いてあるのではっきりとわかりません。
そもそもissueが 270件もあるようなのでしばらく 4.1.3 を使うことにしました。

Bootstrap を4.1.3に戻す

package.jsonファイルのbootstrapの所でキャレット（^）をはずして、4.1.3に変更

f:id:tetsufuru:20190209140753p:plain:w500

変更前
"bootstrap": "^4.2.1",
変更後
"bootstrap": "4.1.3",

再度下記コマンド実行してライブラリを最新化
npm update

f:id:tetsufuru:20190209150043p:plain:w500

もとどおりナビバーやドロップダウンが動くようになりました。

今日の感想

今日は直接 Angular とは関係のないことを書きましたが、予想外の出来事でしたので記事にしてみました。
教訓としては「コンソールのエラーメッセージはよく見なさい」というところでしょうか。
あとGithubやStackoverflowなどの英語がもっと読めれば楽なのにと思う今日この頃でした。

では、お疲れ様でした。

2019-02-06

AWS始めました。

AWS

こんにちはふるてつです。いまさらかもしれませんがAWSをこれから始めます。

はじめた動機

昨年くらいから私の所属する会社がAWS推しになりまして。
開発ばかりのIT人生を送ってきた私も、AWSをはじめてみようかと思います。

AWSのどこをやってみるか

いちからはじめて最終的にはCloud Formationをマスターし、アプリケーションデプロイ用のJenkinsサーバーを作りたいと思います。

いつやってみるか

自分の会社内部で週1回もくもく会が開催されます。
その時間でAWSを試してみたいと思います。

参考書

わたしはこの本を使います。
Amazon Web Services パターン別構築・運用ガイド改訂第2版
f:id:tetsufuru:20190206191554j:plain:w100

その１ VPCネットワークを作ってみる

VPCネットワークとやらをまず作ってみます。
わたし本当に初心者ですねぇ
まずAWSにログインしてメニューのVPCから入ります。
IAMユーザを作ってはいるのですが、とりあえずはルートユーザで始めました。

下の画面から「VPCの作成」ボタンを押しました。
f:id:tetsufuru:20190206203120p:plain:w500

さらに「選択」してみる。

f:id:tetsufuru:20190206204018p:plain:w500

すると下のような画面が…
これはわたしのような開発系の者にはキツイですねぇ。
CIDRブロックとかサブネットは苦手中のニガテで。
過去に情報処理試験で勉強したくらいです。

f:id:tetsufuru:20190206204304p:plain:w500

とりあえず本の通りに設定しました。
最大IP数が表示されているのでなんとなくイメージはわきます。
本に載っていないパブリックサブネットのIPv4 CIDRなど、よくわからないものもありますが進んでみます。
パブリックサブネットとはAZ（アベイラビリティゾーン）をまたぐサブネットで、ハードウェアのテナンシーは占有するかどうからしいです。

f:id:tetsufuru:20190206232550p:plain:w500

「VPCの作成」ボタンを押すとできあがり。
思ったより簡単にできますねぇ。

f:id:tetsufuru:20190206230420p:plain:w500

その２サブネットを作る

先ほどのVPCの中にサブネットを作ります。
メニューのサブネットから入ります。

f:id:tetsufuru:20190206232001p:plain:w500

これも本の通りに設定しました。下記参照。
VPCの欄は上記で新規作成したVPCをプルダウンで選択しました。
（選択後の値がハッシュっぽくなってますが）

f:id:tetsufuru:20190206232349p:plain:w500

「作成」ボタンを推すとサブネットができました。
案外どれも簡単に作れてしまうもんですね。
各々パラメータの意味が今一つ分かっていませんが…

f:id:tetsufuru:20190206232159p:plain:w500

今日の感想

今日は客先から事務所にもどっての自社内「もくもく会」でした
18時半くらいからはじめてもう21時です。
遅くなったのでそろそろ帰らなくちゃ。

では、お疲れさまでした。

2018-11-11

Angular6 + Bootstrap4でWebアプリを作ろう（コンポーネント）

Angular

こんにちはふるてつです。今回はAngularのコンポーネントについて書いてみます。

CLIコマンドについて

Angularでコンポーネントを作るには、基本的にはCLIコマンドを使ったほうが便利です。
文法は意外と簡単です。
ng g component xxx

コンポーネント以外にはモジュールやサービスも作れます。
そこは公式ドキュメントで確認ください。
https://angular.jp/cli/generate

コンポーネントの考え方

では1画面のどこをコンポーネントに分けるかですけど。

私の場合は、もとからあった「app.component」に加えて、①ヘッダー「header.component」と ②フッター「footer.component」を追加しました。
ヘッダーはBootStrapのメニュー部分にします。
フッターは会社情報などにしようと思ってます。

f:id:tetsufuru:20181111223551p:plain:w500

vscodeでみると下記のような感じです。
下の写真の左側に3つコンポーネントが並びます。
写真右側はapp.componentのhtmlで①ヘッダーのセレクタと、②フッターのセレクタを呼び出すようにしています。
あと中身の部分はルーター<router-outlet>で変えられるようにしました。

f:id:tetsufuru:20181111221937p:plain:w500

app.component.htmlの中身例

<div class="container-fluid">
  <app-header></app-header>
  <router-outlet></router-outlet>
  <app-footer></app-footer>
</div>

footer.component.tsの中身例

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

今日の感想

以上、検索画面を例にコンポーネントの分け方を考えてみました。
補足になりますがこの画面の分け方だとログイン画面の場合もメニューが表示されてしまいます。
わたしはそこは下のような感じでルーターのURLでメニューを非表示にしました。

<div *ngIf="this.router.url!=='/loginUrl'">
　…メニューの内容
</div>

例に挙げた検索画面ですが「検索結果の件数」と「ページ番号」表示を一覧の上下につけていますが、同じものが2つあるのが嫌でこれもコンポーネントにしたほうが良いのかなと思っています。

では、ありがとうございました。

2018-10-07

Angular6 + Bootstrap4でWebアプリを作ろう（ng-bootstrapのインストール）

Angular

こんにちはふるてつです。これからAngularのプロジェクトを作ります。

プロジェクト作成前の準備

Angularでアプリケーションを作る際に必要なものといえば、まずはNode.js。
ダウンロードはこちらから
https://nodejs.org/ja/
IDEにはVisualStudioCodeを使ってます。
https://code.visualstudio.com/
みなさん同じでしょうけど、cli関連のコマンドはVSCode画面下の「ターミナル」を使ってます（赤い部分）。
f:id:tetsufuru:20181006215615p:plain:w300

プロジェクトの作成

Angular cliのインストール

npm install -g @angular/cli
私の場合すでにバージョン 5 が入っていて今回 6 にしました。
もう覚えていませんが最新を入れたく下記のコマンドを流したと思います。
npm install -g @angular/cli@latest
補足．-g はグローバルにパッケージをインストールするという意味。
パスを指定しなくてもどのディレクトリでも動くようになる感じだそう（↓に書いていました）。
https://qiita.com/standard-software/items/2ac49a409688733c90e7

プロジェクトの作成

ターミナルのカレントディレクトリをプロジェクトを作りたいパスに移動する。
アプリケーションを作成するコマンドは下記。
ng new MyApp
サーバーを起動したいときはカレントを移動し、下記コマンド --openを指定するとブラウザが起動します。
cd MyApp
ng server --open
ちなみにAngularのバージョンを知りたいときは
ng version

ng-bootstrapのインストール

今回はng-bootstrapを使います。
ngx-bootstrap というのもあり迷いましたが周りに聞くと ng-bootstrap の方がよさげとのことでした。
Bootstrap を素で使う方法もあるようでしたがそれはありません。
npm install --save @ng-bootstrap/ng-bootstrap

Bootstrap4のインストール

ng-bootstrapは入れましたが、結局Bootstrapに依存しているそうなので別途インストールしました。
下のサイトが参考になりました。
https://dev.classmethod.jp/client-side/angular6-bootstrap4/
まずBootstrap
npm install --save bootstrap
jQueryも入れます。
Popover.jsも。
両方ともBootstrapが依存していますので。
npm install --save jquery popper.js
Popover.jsはツールチップやポップオーバーで使用する位置決め用のサードパーティのライブラリファイルだそうです。
Bootstrap移行4ガイドを見ていたら書いていました。
https://cccabinet.jpn.org/bootstrap4/getting-started/introduction

さて、インストール後のわたしの環境は下記のようになりました。

package.jsonを載せておきます。

{
  "name": "sanrokumaru",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "@ng-bootstrap/ng-bootstrap": "^3.2.2", // この行が追加されました。
    "bootstrap": "^4.1.3", // この行が追加されました。
    "core-js": "^2.5.4",
    "jquery": "^3.3.1", // この行が追加されました。
    "npm": "^6.4.1",
    "popper.js": "^1.14.4", // この行が追加されました。
    "rxjs": "^6.0.0",
    "to": "^0.2.9",
    "update": "^0.7.4",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.7.0",
    "@angular/cli": "~6.1.5",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2"
  }
}

大体良さそうですね。
スタイル（Bootstrap）とスクリプト（Bootstrap、jQuery、Popper）をangular.jsonに追加します。
これを追加しないと動きません。

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "sanrokumaru": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/sanrokumaru",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              {
                "glob": "jquery.slim.min.js.map",
                "input": "../node_modules/jquery/dist/",
                "output": "./"
              },
              {
                "glob": "popper.min.js.map",
                "input": "../node_modules/popper.js/dist/umd/",
                "output": "./"
              },
              {
                "glob": "bootstrap.min.js.map",
                "input": "../node_modules/bootstrap/dist/js/",
                "output": "./"
              },
              "src/assets"
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css", // この行を追加する
              "src/styles.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js", // この行を追加する
              "node_modules/popper.js/dist/umd/popper.min.js", // この行を追加する
              "node_modules/bootstrap/dist/js/bootstrap.min.js", // この行を追加する
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "sanrokumaru:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "sanrokumaru:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "sanrokumaru:build"
          }
        },
        "test": {
　　　～～
　　　割愛
　　　～～
}

Bootstrapの確認

今作っている最中ですがログイン画面です。
中身は張りぼてです。
フォーカスが当たっているテキストボックスにBootstrapのスタイルが当たっているのが確認できます。
f:id:tetsufuru:20181007014156j:plain:w500

プロジェクトの作成はこれで以上になります。

ここまでの感想

ここまでで結構な時間がかかりました。
ng-bootstrapとngx-bootstrapどちらが良いのか迷ったり。
最初はng-bootstrapだけ入れていてBootstrapを入れてなかったり。
それでもログイン画面らしきものを作れたので良かったです。

今後について

今後ですがコンポーネントの分け方やログイン後の画面へのルーティングを考える予定です。それとログイン後の画面にはナビバーをつけたいです。
あとCSSを作らないといかんなあと思っています（いまいち苦手で…）

では、ありがとうございました。

今日はCloudFormerをご紹介します。もくもく会で他の人に聞いた話ですが…

その１ CloudFormationのスタック作成

その2 Template作成

感想

以前、書籍を参考にVPCとサブネットを作りましたが、その続きです。

その１ ルーティングテーブル作成

その2 ルーティングテーブルとサブネットを関連付け

その3 インターネットゲートウェイの作成

その4 ルーティングテーブルに対応する送信先IPアドレスの設定

感想

今日はちょっとしたトピックを書きたいと思います。

その１ 予算を登録

感想

Angularのバージョンアップ

結論

今回やったこと

Angularのバージョン確認

使用しているライブラリを最新化

動作確認

Angularのバージョンアップ

Bootstrap 4.2.1の不具合

Bootstrap を4.1.3に戻す

今日の感想

はじめた動機

AWSのどこをやってみるか

いつやってみるか

参考書

その１ VPCネットワークを作ってみる

その２ サブネットを作る

今日の感想

CLIコマンドについて

コンポーネントの考え方

今日の感想

プロジェクト作成前の準備

プロジェクトの作成

Angular cliのインストール

プロジェクトの作成

ng-bootstrapのインストール

Bootstrap4のインストール

Bootstrapの確認

ここまでの感想

今後について

その１ルーティングテーブル作成

その4 ルーティングテーブルに対応する送信先 IPアドレスの設定

その１予算を登録

その２サブネットを作る