aitcシニア技術者勉強会「今さら聞けないwebサイト開発」 vol2

Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

AITCシニア技術者勉強会「今さら聞けないWebサイト開発」

Vol.2

2016年07月16日

先端IT活用推進コンソーシアムシニア技術者勉強会

近藤繁延


はじめに（再掲）

• 本勉強会の趣旨

– Web開発界隈で語られるツール、キーワードについて学ぶ

– HTML5ベースのWebサイトの開発方法を学ぶ

• 本勉強会1～2回目のゴール

– HTML5のWebサイトが作成できる

– Webサイト開発に必要なツールを使いこなせる


本日のアジェンダ

• いまどきのWebシステム開発の定石

– サーバはクラウドが主流

– 開発プロセスは極力自動化

• ハンズオン

– ハンズオンのゴール

– CI体験（Git、Jenkins）

– AWSでWebサイトを公開する


いまどきのWebシステム開発の定石

4


サーバはクラウドが主流

• Webサーバはパブリッククラウドが提供しているサーバを利用するのが主流です。

5

2016年1月時点IaaS ：インフラストラクチャー・アズ・ア・サービスPaaS:プラットフォーム・アズ・ア・サービス


フロントエンドバックエンド

• フロントエンドもバックエンドもクラウドで全てカバーします。

サーバはクラウドが主流

6

PC

Mobile

Phone

Tablet

HTML

CSS JavaScript

REST

(HTTP/S)HTTP/S

Link Link

Web API BuisinessLogic

DataBaseFile

OtherSystem

module

load

REST

DB

driver

File.IO

パブリッククラウドサービス


開発プロセスは極力自動化

• 開発作業は複雑化しています。そのため、ツールによる自動化が進んでおり、特に実装～リリースの一部はCIツールによる自動化の取り組みが盛んです。

7

コンセプトデザイン

UXデザイン

UIデザイン

要件定義設計

実装単体テスト

結合テスト

システムテスト

受入テスト

CIツールによる自動化

リリース



• CIとは・・・

8

参考： https://ja.wikipedia.org/wiki/継続的インテグレーション



• CIツール導入のメリット

1. 人的ミスを低減できる

手作業が減ることで人的ミスの範囲が狭まる

2. 再テストが容易になる

開発中に再テストが発生してもツールによる自動テストで何度もやり直しができる

デグレード確認が容易になり、想定外のミスに気づきやすくなる

9


ハンズオン

10


ハンズオンのゴール

• 前回作成した郵便番号検索ページを題材にCI体験、クラウドでのサイト公開を体験していきます。

11


CI体験概要

• CI体験は、CIツール「Jenkins」を用い、実装の「ソース取得→ビルド」を自動化します。

– ソースコードはGitHubから取得します。

12

コンセプトデザイン

UXデザイン

UIデザイン

要件定義設計

実装単体テスト

結合テスト

システムテスト

受入テスト

リリース

ソースコード取得

ビルド今回のハンズオン対象


CI体験 –用語説明 –

• Gitとは、昨今もっとも利用されているソースコード管理のツールです。

13参考： https://ja.wikipedia.org/wiki/Git



• GitHubとはGit環境を提供するサービスです。

14



• 基本的なGit用語

15

リモートリポジトリ（RR）

ローカルPC GitHub（リモートサーバ）

ローカルリポジトリ（LR）

作業領域

1. clone

2. pull

3.ad

d

4.co

mm

it

5. push

1.clone→RRのコピーをローカルPC上に作成する（LR）

2.pull→RRからLRとの差分データを取得する

3.add→作業領域の変更内容をLRに追加する

4.commit→addした変更をLRに反映する

5.push→LRの変更内容をRRに反映する

2.p

ull



• 基本的なGitコマンド

16

1. clone> git clone https://github.com/xxx/postal.git

2. pull> git pull

3. add> git add *

4. commit> git commit –m “commit comment”

5. push> git push origin master



• JenkinsとはOSSのCIツールです。

– Windows/Mac/Linuxで動作します。

17


CI体験 –セットアップ –

• GitHubとのやりとりのため、Gitクライアントツールをセットアップします。

1. https://git-scm.com/downloadsから取得

18

Windowsの方はこちら

Macの方はこちら

https://git-scm.com/downloads



2. ダウンロードしたインストーラを実行し、手順に従ってインストールをします。（初期値でOK）

3. セットアップ完了後、コマンドプロンプトから以下コマンドを実行し、Gitのバージョンが表示されることを確認して下さい。

19

> git --versiongit version 2.9.0.windows.1 ・・・ gitのバージョンが表示される



• Jenkinsをセットアップします。

1. https://jenkins.io/index.htmlから取得

20

Windowsの方はこちら

Macの方はこちら

クリック

https://jenkins.io/index.html



2. ダウンロードしたインストーラを実行し、手順に従ってインストールをします。

インストール先は「c:\jenkins」に変更してください。

3. ブラウザでhttp://localhost:8080を表示し、管理者パスワードを設定します。

21

管理者パスワードを入力

表示されているファイルから管理者パスワードを取得

http://localhost:8080/



4. パスワード承認後の初期設定画面にて、「Install suggested plugins」を選択します。

22

クリックする



5. 管理者ユーザー情報を入力し、Save and Finishボタンを押下します。

23

■入力値ユーザー名：adminパスワード：adminパスワードの確認：adminフルネーム：Jenkins管理者メールアドレス：[email protected]



6. 以下、画面が表示されるとセットアップ完了です。

24



• Jenkins Pluginをインストールします。

1. Jenkinsトップから Jenkinsの管理＞プラグインの管理をクリックします。

25

クリックする

クリックする



2. 「利用可能」タブを選択し、以下のプラグインをインストールします。

1. Run Condition Plugin

2. Run Condition Extras Plugin

3. Build Keeper Plugin

4. Conditional BuildStep

5. Flexible Publish Plugin

26

検索欄でキーワード検索する

インストール対象を選択後、クリックする


CI体験 –処理の流れ –

• ジョブを実行すると、JenkinsがGitHubからソースコードを取得し、ビルドを実行します。

27

1.ジョブ実行 2. pull

3. ビルド実行


GitHubにリポジトリを作成する

• GitHub[Repositories]タブから、Newをクリックし、リポジトリを作成する。

28

クリックする


GitHubにリポジトリを作成する

29

Repository nameに「postal」を入力する

クリックする


GitHubにソースコードを追加

• 郵便番号検索ページのフォルダでコマンドプロンプトを実行し、以下コマンドを実行します。

30

> git init

> git add *

> git commit –m “first commit”

> git remote add origin https://github.com/xxx/postal.git

> git push -u origin master 皆さんのGit URLを入力する


Jenkinsのジョブ登録

• ソースコードをビルドするジョブを作成します。

1. ダッシュボード「新規ジョブ作成」をクリック

31

クリック



2. ジョブ名に「postal」と入力。

3. フリースタイル・プロジェクトのビルドを選択し、OKをクリック。

32

「postal」と入力

選択

クリック



4. ソースコード管理で「Git」を選択し、Repository URLにGitHubのリポジトリURLを入力。

5. ビルドで「Windowsバッチコマンドの実行」を選択し、「コマンド」に「grunt」を入力。

33

GitHubのリポジトリURLを入力

gruntを入力



6. プロジェクトトップ画面に戻り、「ビルド実行」をクリックすると、ビルドが開始されます。

34

ビルド実行をクリック



7. プロジェクトトップ画面に戻り、「ビルド実行」をクリックすると、ビルドが開始されます。

35

青丸が表示されていればビルド成功


応用1 –定期ビルド -

• Jenkinsのタイマー機能を使用し、定期的（時間単位、日時単位）にビルドを実行します。

36

2. pull

3. ビルド実行

1. タイマーによるジョブ実行


応用2 – Push検知ビルド -

• GitHubへソースコードをPushしたことを検知し、Jenkinsがビルドを実行します。

– GitHubと連携するためには、Jenkinsサーバをインターネット上に公開する必要があります。

37

1. push

2. pushを通知

3. pull

4. ビルド実行


AWSでWebサイトを公開する

• AWSとは、Amazon Web Services社が提供するパブリッククラウドサービスです。

38



• Webサイトの公開にはAmazon S3のWebホスティングを利用します。

39



• Webサイトとして公開するS3バケットを作成し、Webページのファイルをアップロードします。

1. マネジメントコンソールからS3を選択。

40

青丸が表示されていればビルド成功



2. 「バケット作成」をクリックし、S3バケットを作成します。

バケット名：<氏名のアルファベット表記>.postal

リージョン：Tokyo

41

クリック



2. 作成したバケットにアクセスし、Webページの各種ファイルをアップロードします。

42

クリック

Webページをフォルダごとドラッグアンドドロップ



3. S3バケット設定「静的ウェブホスティング」の設定を「有効にする」に変更します。

43

「ウェブサイトのホスティングを有効にする」を選択。

「インデックスドキュメント」にindex.htmlを入力。



4. S3バケット設定「アクセス許可」で、以下JSONをバケットポリシーに記述します。

44

{"Version": "2012-10-17","Statement": [

{"Sid": "PublicReadForGetBucketObjects","Effect": "Allow","Principal": "*","Action": "s3:GetObject","Resource": "arn:aws:s3:::shigenobu.kondo.postal/*"

}]

} バケット名を入力してください。



45



5. 「静的ウェブサイトホスティング」のエンドポイントに記載のURLをクリックし、郵便番号検索ページが表示されれば、公開は成功です。

46

クリック


http://aitc.jp

https://www.facebook.com/aitc.jp

最新情報はこちらをご参照ください

ハルミンAITC非公式イメージキャラクター

シニア勉強会への参加、お待ちしてます

http://aitc.jp/

https://www.facebook.com/aitc.jp

aitcシニア技術者勉強会 「今さら聞けないwebサイト開発」 vol2

Engineering

aitcシニア技術者勉強会「今さら聞けないwebサイト開発」 vol2