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 Java
Script
REST
(HTTP/S)HTTP/S
Link Link
Web API Buisiness
Logic
DataBaseFile
Other
System
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.add
4.commit
5. push
1.clone
→RRのコピーをローカルPC上に作成する（LR）
2.pull
→RRからLRとの差分データを取得する
3.add
→作業領域の変更内容をLRに追加する
4.commit
→addした変更をLRに反映する
5.push
→LRの変更内容をRRに反映する
2.pull

• 基本的な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の方は
こちら

2. ダウンロードしたインストーラを実行し、手順に
従ってインストールをします。（初期値でOK）
3. セットアップ完了後、コマンドプロンプトから以下
コマンドを実行し、Gitのバージョンが表示される
ことを確認して下さい。
19
> git --version
git version 2.9.0.windows.1 ・・・ gitのバージョンが表示される

• Jenkinsをセットアップします。
1. https://jenkins.io/index.htmlから取得
20
Windowsの方
はこちら
Macの方は
こちら
クリック

2. ダウンロードしたインストーラを実行し、手順に
従ってインストールをします。
 インストール先は「c:jenkins」に変更してください。
3. ブラウザでhttp://localhost:8080を表示し、管理
者パスワードを設定します。
21
管理者パスワードを入力
表示されているファイルから
管理者パスワードを取得

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

5. 管理者ユーザー情報を入力し、Save and Finish
ボタンを押下します。
23
■入力値
ユーザー名：admin
パスワード：admin
パスワードの確認：admin
フルネーム：Jenkins管理者
メールアドレス：admin@example.com

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非公式イメージキャラクター
シニア勉強会への参加、
お待ちしてます

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

More Related Content

What's hot

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

Recently uploaded