Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
AITCシニア技術者勉強会
「今さら聞けないWebサイト開発」
...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
はじめに(再掲)
• 本勉強会の趣旨
– Web開発界隈で語られ...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
本日のアジェンダ
• いまどきの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サーバはパブリッククラウドが提...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
フロントエンド バックエンド
• フロントエンドもバックエンドも...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
開発プロセスは極力自動化
• 開発作業は複雑化しています。そのた...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
開発プロセスは極力自動化
• CIとは・・・
8
参考: htt...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
開発プロセスは極力自動化
• CIツール導入のメリット
1. 人...
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.
ハンズオンのゴール
• 前回作成した郵便番号検索ページを題材に
...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CI体験概要
• CI体験は、CIツール「Jenkins」を用い...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CI体験 – 用語説明 –
• Gitとは、昨今もっとも利用され...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CI体験 – 用語説明 –
• GitHubとはGit環境を提供...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CI体験 – 用語説明 –
• 基本的なGit用語
15
リモー...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CI体験 – 用語説明 –
• 基本的なGitコマンド
16
1...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CI体験 – 用語説明 –
• JenkinsとはOSSのCIツ...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CI体験 – セットアップ –
• GitHubとのやりとりのた...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CI体験 – セットアップ –
2. ダウンロードしたインストー...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CI体験 – セットアップ –
• Jenkinsをセットアップ...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CI体験 – セットアップ –
2. ダウンロードしたインストー...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CI体験 – セットアップ –
4. パスワード承認後の初期設定...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CI体験 – セットアップ –
5. 管理者ユーザー情報を入力し...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CI体験 – セットアップ –
6. 以下、画面が表示されるとセ...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CI体験 – セットアップ –
• Jenkins Plugin...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CI体験 – セットアップ –
2. 「利用可能」タブを選択し、...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CI体験 – 処理の流れ –
• ジョブを実行すると、Jenki...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
GitHubにリポジトリを作成する
• GitHub[Repos...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
GitHubにリポジトリを作成する
29
Repository ...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
GitHubにソースコードを追加
• 郵便番号検索ページのフォル...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
Jenkinsのジョブ登録
• ソースコードをビルドするジョブを...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
Jenkinsのジョブ登録
2. ジョブ名に「postal」と入...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
Jenkinsのジョブ登録
4. ソースコード管理で「Git」を...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
Jenkinsのジョブ登録
6. プロジェクトトップ画面に戻り、...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
Jenkinsのジョブ登録
7. プロジェクトトップ画面に戻り、...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
応用1 – 定期ビルド -
• Jenkinsのタイマー機能を使...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
応用2 – Push検知ビルド -
• GitHubへソースコー...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
AWSでWebサイトを公開する
• AWSとは、Amazon W...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
AWSでWebサイトを公開する
• Webサイトの公開にはAma...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
AWSでWebサイトを公開する
• Webサイトとして公開するS...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
AWSでWebサイトを公開する
2. 「バケット作成」をクリック...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
AWSでWebサイトを公開する
2. 作成したバケットにアクセス...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
AWSでWebサイトを公開する
3. S3バケット設定「静的ウェ...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
AWSでWebサイトを公開する
4. S3バケット設定「アクセス...
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. 「静的ウェブサイトホスティ...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
http://aitc.jp
https://www.faceb...
Upcoming SlideShare
Loading in …5
×

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

121 views

Published on

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

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

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

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

×