Upload
-
View
134
Download
0
Embed Size (px)
Citation preview
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
AITCシニア技術者勉強会「今さら聞けないWebサイト開発」
Vol.2
2016年07月16日
先端IT活用推進コンソーシアムシニア技術者勉強会
近藤 繁延
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
はじめに(再掲)
• 本勉強会の趣旨
– Web開発界隈で語られるツール、キーワードについて学ぶ
– HTML5ベースのWebサイトの開発方法を学ぶ
• 本勉強会1~2回目のゴール
– HTML5のWebサイトが作成できる
– Webサイト開発に必要なツールを使いこなせる
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
本日のアジェンダ
• いまどきのWebシステム開発の定石
– サーバはクラウドが主流
– 開発プロセスは極力自動化
• ハンズオン
– ハンズオンのゴール
– CI体験(Git、Jenkins)
– AWSでWebサイトを公開する
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
いまどきのWebシステム開発の定石
4
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
サーバはクラウドが主流
• Webサーバはパブリッククラウドが提供しているサーバを利用するのが主流です。
5
2016年1月時点IaaS :インフラストラクチャー・アズ・ア・サービスPaaS:プラットフォーム・アズ・ア・サービス
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
フロントエンド バックエンド
• フロントエンドもバックエンドもクラウドで全てカバーします。
サーバはクラウドが主流
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
パブリッククラウドサービス
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
開発プロセスは極力自動化
• 開発作業は複雑化しています。そのため、ツールによる自動化が進んでおり、特に実装~リリースの一部はCIツールによる自動化の取り組みが盛んです。
7
コンセプトデザイン
UXデザイン
UIデザイン
要件定義 設計
実装単体テスト
結合テスト
システムテスト
受入テスト
CIツールによる自動化
リリース
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
開発プロセスは極力自動化
• CIとは・・・
8
参考: https://ja.wikipedia.org/wiki/継続的インテグレーション
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
開発プロセスは極力自動化
• CIツール導入のメリット
1. 人的ミスを低減できる
手作業が減ることで人的ミスの範囲が狭まる
2. 再テストが容易になる
開発中に再テストが発生してもツールによる自動テストで何度もやり直しができる
デグレード確認が容易になり、想定外のミスに気づきやすくなる
9
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
ハンズオン
10
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
ハンズオンのゴール
• 前回作成した郵便番号検索ページを題材にCI体験、クラウドでのサイト公開を体験していきます。
11
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CI体験概要
• CI体験は、CIツール「Jenkins」を用い、実装の「ソース取得→ビルド」を自動化します。
– ソースコードはGitHubから取得します。
12
コンセプトデザイン
UXデザイン
UIデザイン
要件定義 設計
実装単体テスト
結合テスト
システムテスト
受入テスト
リリース
ソースコード取得
ビルド今回のハンズオン対象
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CI体験 –用語説明 –
• Gitとは、昨今もっとも利用されているソースコード管理のツールです。
13参考: https://ja.wikipedia.org/wiki/Git
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CI体験 –用語説明 –
• GitHubとはGit環境を提供するサービスです。
14
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CI体験 –用語説明 –
• 基本的な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
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CI体験 –用語説明 –
• 基本的な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
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CI体験 –用語説明 –
• JenkinsとはOSSのCIツールです。
– Windows/Mac/Linuxで動作します。
17
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CI体験 –セットアップ –
• GitHubとのやりとりのため、Gitクライアントツールをセットアップします。
1. https://git-scm.com/downloadsから取得
18
Windowsの方はこちら
Macの方はこちら
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CI体験 –セットアップ –
2. ダウンロードしたインストーラを実行し、手順に従ってインストールをします。(初期値でOK)
3. セットアップ完了後、コマンドプロンプトから以下コマンドを実行し、Gitのバージョンが表示されることを確認して下さい。
19
> git --versiongit version 2.9.0.windows.1 ・・・ gitのバージョンが表示される
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CI体験 –セットアップ –
• Jenkinsをセットアップします。
1. https://jenkins.io/index.htmlから取得
20
Windowsの方はこちら
Macの方はこちら
クリック
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CI体験 –セットアップ –
2. ダウンロードしたインストーラを実行し、手順に従ってインストールをします。
インストール先は「c:\jenkins」に変更してください。
3. ブラウザでhttp://localhost:8080を表示し、管理者パスワードを設定します。
21
管理者パスワードを入力
表示されているファイルから管理者パスワードを取得
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CI体験 –セットアップ –
4. パスワード承認後の初期設定画面にて、「Install suggested plugins」を選択します。
22
クリックする
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CI体験 –セットアップ –
5. 管理者ユーザー情報を入力し、Save and Finishボタンを押下します。
23
■入力値ユーザー名:adminパスワード:adminパスワードの確認:adminフルネーム:Jenkins管理者メールアドレス:[email protected]
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CI体験 –セットアップ –
6. 以下、画面が表示されるとセットアップ完了です。
24
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CI体験 –セットアップ –
• Jenkins Pluginをインストールします。
1. Jenkinsトップから Jenkinsの管理>プラグインの管理をクリックします。
25
クリックする
クリックする
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CI体験 –セットアップ –
2. 「利用可能」タブを選択し、以下のプラグインをインストールします。
1. Run Condition Plugin
2. Run Condition Extras Plugin
3. Build Keeper Plugin
4. Conditional BuildStep
5. Flexible Publish Plugin
26
検索欄でキーワード検索する
インストール対象を選択後、クリックする
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CI体験 –処理の流れ –
• ジョブを実行すると、JenkinsがGitHubからソースコードを取得し、ビルドを実行します。
27
1.ジョブ実行 2. pull
3. ビルド実行
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
GitHubにリポジトリを作成する
• GitHub[Repositories]タブから、Newをクリックし、リポジトリを作成する。
28
クリックする
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
GitHubにリポジトリを作成する
29
Repository nameに「postal」を入力する
クリックする
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
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を入力する
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
Jenkinsのジョブ登録
• ソースコードをビルドするジョブを作成します。
1. ダッシュボード「新規ジョブ作成」をクリック
31
クリック
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
Jenkinsのジョブ登録
2. ジョブ名に「postal」と入力。
3. フリースタイル・プロジェクトのビルドを選択し、OKをクリック。
32
「postal」と入力
選択
クリック
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
Jenkinsのジョブ登録
4. ソースコード管理で「Git」を選択し、Repository URLにGitHubのリポジトリURLを入力。
5. ビルドで「Windowsバッチコマンドの実行」を選択し、「コマンド」に「grunt」を入力。
33
GitHubのリポジトリURLを入力
gruntを入力
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
Jenkinsのジョブ登録
6. プロジェクトトップ画面に戻り、「ビルド実行」をクリックすると、ビルドが開始されます。
34
ビルド実行をクリック
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
Jenkinsのジョブ登録
7. プロジェクトトップ画面に戻り、「ビルド実行」をクリックすると、ビルドが開始されます。
35
青丸が表示されていればビルド成功
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
応用1 –定期ビルド -
• Jenkinsのタイマー機能を使用し、定期的(時間単位、日時単位)にビルドを実行します。
36
2. pull
3. ビルド実行
1. タイマーによるジョブ実行
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
応用2 – Push検知ビルド -
• GitHubへソースコードをPushしたことを検知し、Jenkinsがビルドを実行します。
– GitHubと連携するためには、Jenkinsサーバをインターネット上に公開する必要があります。
37
1. push
2. pushを通知
3. pull
4. ビルド実行
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
AWSでWebサイトを公開する
• AWSとは、Amazon Web Services社が提供するパブリッククラウドサービスです。
38
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
AWSでWebサイトを公開する
• Webサイトの公開にはAmazon S3のWebホスティングを利用します。
39
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
AWSでWebサイトを公開する
• Webサイトとして公開するS3バケットを作成し、Webページのファイルをアップロードします。
1. マネジメントコンソールからS3を選択。
40
青丸が表示されていればビルド成功
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
AWSでWebサイトを公開する
2. 「バケット作成」をクリックし、S3バケットを作成します。
バケット名:<氏名のアルファベット表記>.postal
リージョン:Tokyo
41
クリック
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
AWSでWebサイトを公開する
2. 作成したバケットにアクセスし、Webページの各種ファイルをアップロードします。
42
クリック
Webページをフォルダごとドラッグアンドドロップ
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
AWSでWebサイトを公開する
3. S3バケット設定「静的ウェブホスティング」の設定を「有効にする」に変更します。
43
「ウェブサイトのホスティングを有効にする」を選択。
「インデックスドキュメント」にindex.htmlを入力。
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
AWSでWebサイトを公開する
4. S3バケット設定「アクセス許可」で、以下JSONをバケットポリシーに記述します。
44
{"Version": "2012-10-17","Statement": [
{"Sid": "PublicReadForGetBucketObjects","Effect": "Allow","Principal": "*","Action": "s3:GetObject","Resource": "arn:aws:s3:::shigenobu.kondo.postal/*"
}]
} バケット名を入力してください。
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
AWSでWebサイトを公開する
45
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
AWSでWebサイトを公開する
5. 「静的ウェブサイトホスティング」のエンドポイントに記載のURLをクリックし、郵便番号検索ページが表示されれば、公開は成功です。
46
クリック
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
http://aitc.jp
https://www.facebook.com/aitc.jp
最新情報はこちらをご参照ください
ハルミンAITC非公式イメージキャラクター
シニア勉強会への参加、お待ちしてます