Tweet
Tweet

Slide 1

Slide 1 text

1 GTB2020 Webアプリフレームワーク入門 REST API 入門

Slide 2

Slide 2 text

2 GMOペパボ株式会社 EC事業部 グーペグループ 2017年 入社 遠藤 太徳(endu) 趣味 ゲーム、自炊、ピアノ(を最近はじめました!) 講師紹介

Slide 3

Slide 3 text

3 GMOペパボ株式会社 EC事業部 カラーミーショップグループ 2014年 入社 牧野 弘幸 (kumak1) 趣味 ゲームを作る・絵を描く 講師紹介

Slide 4

Slide 4 text

4 GMOペパボ株式会社 ホスティング事業部 2018年 入社 高橋 邦彦 (kunit) 趣味 旅行、カメラ 講師紹介

Slide 5

Slide 5 text

5 GMOペパボ株式会社 ホスティング事業部 2019年 入社 望月 眞喜(mochiko) 趣味 F1観戦、クロマニヨンズ、 カレー（を食べる） 講師紹介

Slide 6

Slide 6 text

6 GMOペパボ株式会社 ホスティング事業部 2018年 入社 手島 尚人（てっしー／@tosite） 趣味 ドライブ・キャンプ・料理 講師紹介

Slide 7

Slide 7 text

7 講義の進め方について

Slide 8

Slide 8 text

8 スケジュールと担当について 講義の進め方について 1日目(2020/05/12 14:00〜19:00) • 座学 2時間30分 (14:00〜16:30) kumak1 • Webについて • ページが表示されるまで • Webアプリケーションについて • Webアプリケーションを作成するにあたって • 開発環境構築 2時間30分 (16:30〜19:00) endu • ConoHa VPSにLaravelを導入する • VSCodeの拡張機能Remote - SSHでConoHa VPSにアクセスする

Slide 9

Slide 9 text

9 講義の進め方について スケジュールと担当について 2日目(2020/05/12 10:00〜19:00) • Laravelについて 1時間 (11:00〜11:45) kumak1 • Laravelとは? • Laravelの便利機能 • Laravelのディレクトリ構成 • LaravelをMVCパターンで考えてみる • Laravelを使ってAPIを作成する (12:00〜19:00) endu • アプリケーションをセットアップしよう • アプリケーションをブラウザから見てみよう • APIのCRUDを実装しよう • Validationを実装しよう • ORM のよもやま話

Slide 10

Slide 10 text

10 講義の進め方について 基本はzoomのチャットに書き込んでください。 例 ) 【質問】***と書いてみたのですが、動かないです。 【質問】*** って、どういう意味でしょうか? 【質問】を見てサポート講師が質問にチャット上で答えます。 質問方法について

Slide 11

Slide 11 text

11 作業パートの進捗を確認する為に皆さんの反応を伺う時があります。その時はzoomの 「手を挙げる」機能でボタンを押してください。反応を確認できたら「手を下ろしてく ださい」と言うので「手を降ろす」ボタンを押してください。 講義をスムーズに進める為、ご協力お願いします。 リアクションについて 講義の進め方について

Slide 12

Slide 12 text

12 この画像が載っているスライドがある時は10分休憩です。 この講義ではこまめに休憩を入れて進めていきます。 休憩について 講義の進め方について

Slide 13

Slide 13 text

13 1日目の「開発環境構築」と「Laravelを使ってAPIを作成する」は手を動かします。 このタグが出ていないスライドは座学なのでスライドを見ながら聞いてください。 手を動かす作業でのスライドについて 講義の進め方について 「作業」がついているスライドは実際に手を動 かしながら行うパートになります。実際にコー ディングをしたり、設定したりする作業で出て きます。 「確認」がついているスライドは動作を確認し たり、返ってきた結果を確認します

Slide 14

Slide 14 text

14 DEMOスライドの出ている時は、講師が画面見せながら実際にDEMOを行います DEMOスライドと作業スライドについて 講義の進め方について

Slide 15

Slide 15 text

15 作業スライドが出ている時は、皆さんに手を動かして作業をして貰います。 DEMOスライドと作業スライドについて 講義の進め方について

Slide 16

Slide 16 text

16 座学

Slide 17

Slide 17 text

17 講師担当: kumak1 資料作成担当 : kunit

Slide 18

Slide 18 text

18 Webについて Webについておさらいをしましょう

Slide 19

Slide 19 text

19 Web の関連技術はとても扱いやすく、様々なところで利用されています。 - Chrome や Edge などのブラウザで企業やサービスのWebページを見る - オーソドックスな使われ方 - PC・スマホ・テレビといった様々なデバイスから見ることができる - スマホのゲームアプリで通信を行いながら協力プレイをする - ブラウザ以外の様々なアプリもデータのやり取りに利用している Webについて(おさらい)

Slide 20

Slide 20 text

20 クライアントとサーバー サービスを提供する側をサーバー、サービスを受ける側をクライアントと呼びます。 (一般的な言葉になりつつありますね) - クライアントの代表例がブラウザ - Google Chrome - Microsoft Edge、Internet Explorer - Apple Safari - Mozilla Firefox - サーバーとして利用されている代表的なもの - Apache HTTP Server - Nginx (エンジンエックス) - Microsoft IIS (Internet Information Services) - LiteSpeed Web Server

Slide 21

Slide 21 text

21 URL と HTTP Web では次の2つがとても重要な要素となります。 - URL (Uniform Resource Locator) - 「欲しい情報がどこにあるのか」という場所を明確に示す - HTTP (HyperText Transfer Protocol) - URL で示した場所に対して「情報をどうしたいか」を通信で指示する 上記の2つをこれ以降もう少しだけ深掘りします。

Slide 22

Slide 22 text

22 URLとは URL を使うことで「どこになにがあるか」を簡単に示すことができます。 - URL がなかったら - あの企業サーバーの○○というカテゴリ下の△△というサブカテゴリをみて！ - とても大変 - URL があったら - https://example.co/○○/△△/ をみて！ - 場所を指し示すのにシンプルなルールを提供できたので、利用するのがとても 簡単になった

Slide 23

Slide 23 text

23 プロトコルとは プロトコルとは通信する際の手順や規格を定めた規約のこと。 プロトコルに従うことで、サーバーとクライアントがネットワークを通じてやり取りでき ます。 - クライアントがサーバーに決められた命令 (1つもしくは複数) を送信すると結果が返る - Web では URL で示された場所に対して HTTP というプロトコルでやり取りを行う

Slide 24

Slide 24 text

24 HTTP の良さ HTTP はそれまであったプロトコルよりかなり単純なものとなっています。 - 以前のプロトコル - SMTP や POP3/IMAP4 (メールで使用) - FTP (ファイル転送で使用) 等 - 複数の命令を組み合わせて目的の動作を行う - HTTP - (基本的に) 1つの命令で目的を果たせる - プロトコルが単純なため、サーバーやクライアントを実装しやすい HTTP を利用したプロダクトや事例が爆発的に増えました。

Slide 25

Slide 25 text

25 14:25まで休憩

Slide 26

Slide 26 text

26 ページが表示されるまで Webページが表示されるまでになにが起きているか、説明 していきます。

Slide 27

Slide 27 text

27 リクエストとレスポンス クライアントとサーバーとのやり取りに対しての用語を説明します。 - リクエスト - クライアントからサーバーに接続し、サービスを提供してもらうための処理を 依頼することを「リクエストを投げる」という - レスポンス - クライアントからのリクエストを受けて、サーバーで処理を行った結果をクラ イアントに渡すことを「レスポンスを返す」という

Slide 28

Slide 28 text

28 HTTP のやり取り 例えば、Yahoo! JAPAN のページを表示するまでを考えてみましょう。 - ブラウザから Yahoo! JAPAN のWebサーバーにトップページの情報をもらうために、 トップページのURL に対してリクエストを投げる - Webサーバーはトップページのデータを準備して、ブラウザにレスポンスとして HTML ファイルを返す - ブラウザが HTML ファイルを解析すると、CSS や JavaScript、画像といったファイ ルを追加で取得する必要があることが判明する - ブラウザからWebサーバーに 必要なものをもらうために投げる - サーバーからブラウザにリクエストされたものを返す - 以下これの繰り返し

Slide 29

Slide 29 text

29 Yahoo! JAPAN のページが見えるまで(その1) ブラウザから Yahoo! JAPAN のWebサーバーにトップページの情報をもらうために、トップページの URL に対してリクエストを投げます。 リクエスト

Slide 30

Slide 30 text

30 Yahoo! JAPAN のページが見えるまで(その2) ブラウザから Yahoo! JAPAN のWebサーバーにトップページの情報をもらうために、トップページの URL に対してリクエストを投げます。 リクエスト GET https://www.yahoo.co.jp/ HTTP/1.1 Host: www.yahoo.co.jp Connection: keep-alive accept:text/html,application/xhtml+xml,application/xml;q=0.9,im age/webp,image/apng,*/*;q=0.8,application/signed- exchange;v=b3;q=0.9 accept-encoding: gzip, deflate, br accept-language: ja,en-US;q=0.9,en;q=0.8 cookie: ... sec-fetch-dest: document sec-fetch-mode: navigate sec-fetch-site: none sec-fetch-user: ?1 upgrade-insecure-requests: 1 user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36

Slide 31

Slide 31 text

31 Yahoo! JAPAN のページが見えるまで(その2) ブラウザから Yahoo! JAPAN のWebサーバーにトップページの情報をもらうために、トップページの URL に対してリクエストを投げます。 リクエスト GET https://www.yahoo.co.jp/ HTTP/1.1 Host: www.yahoo.co.jp Connection: keep-alive accept:text/html,application/xhtml+xml,application/xml;q=0.9,im age/webp,image/apng,*/*;q=0.8,application/signed- exchange;v=b3;q=0.9 accept-encoding: gzip, deflate, br accept-language: ja,en-US;q=0.9,en;q=0.8 cookie: ... sec-fetch-dest: document sec-fetch-mode: navigate sec-fetch-site: none sec-fetch-user: ?1 upgrade-insecure-requests: 1 user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36 GET https://www.yahoo.co.jp/ HTTP/1.1

Slide 32

Slide 32 text

32 Yahoo! JAPAN のページが見えるまで(その2) ブラウザから Yahoo! JAPAN のWebサーバーにトップページの情報をもらうために、トップページの URL に対してリクエストを投げます。 リクエスト GET https://www.yahoo.co.jp/ HTTP/1.1 Host: www.yahoo.co.jp Connection: keep-alive accept:text/html,application/xhtml+xml,application/xml;q=0.9,im age/webp,image/apng,*/*;q=0.8,application/signed- exchange;v=b3;q=0.9 accept-encoding: gzip, deflate, br accept-language: ja,en-US;q=0.9,en;q=0.8 cookie: ... sec-fetch-dest: document sec-fetch-mode: navigate sec-fetch-site: none sec-fetch-user: ?1 upgrade-insecure-requests: 1 user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36 GET https://www.yahoo.co.jp/ HTTP/1.1 リクエスト メソッド URL HTTPの バージョン

Slide 33

Slide 33 text

33 リクエストメソッド リクエストメソッドは、URLに対してどのような処理をしたいのかを示したものです。 - GET - 情報を取得 - 副作用はないように - POST - 情報を変更 - PUT - 情報を置換 - PATCH - 情報を一部置換 - DELETE - 情報を削除

Slide 34

Slide 34 text

34 Yahoo! JAPAN のページが見えるまで(その3) Webサーバーはトップページのデータを準備して、ブラウザにレスポンスとして html ファイルを返し ます。 レスポンス

Slide 35

Slide 35 text

35 Yahoo! JAPAN のページが見えるまで(その4) レスポンス HTTP/1.1 200 OK Cache-Control: private, no-cache, no-store, must-revalidate Content-Type: text/html; charset=UTF-8 Date: Mon, 20 Apr 2020 06:59:26 GMT Expires: -1 Pragma: no-cache Set-Cookie: B=18kikclf9qi2e&b=3&s=2m; expires=Thu, 21-Apr-2022 06:59:26 GMT; pat h=/; domain=.yahoo.co.jp Vary: Accept-Encoding X-Content-Type-Options: nosniff X-Frame-Options: SAMEORIGIN X-Vcap-Request-Id: 075691ed-bab6-4077-58f0-34523d132299 X-Xss-Protection: 1; mode=block Age: 0 Transfer-Encoding: chunked Connection: keep-alive Via: http/1.1 edge1675.img.bbt.yahoo.co.jp (ApacheTrafficServer [c sSf ]) Server: ATS Set-Cookie: XB=18kikclf9qi2e&b=3&s=2m; expires=Thu, 21-Apr-2022 06:59:26 GMT; pa th=/; domain=.yahoo.co.jp; secure; samesite=none ... Webサーバーはトップページのデータを準備して、ブラウザにレスポンスとして html ファイルを返し ます。

Slide 36

Slide 36 text

36 Yahoo! JAPAN のページが見えるまで(その4) レスポンス HTTP/1.1 200 OK Cache-Control: private, no-cache, no-store, must-revalidate Content-Type: text/html; charset=UTF-8 Date: Mon, 20 Apr 2020 06:59:26 GMT Expires: -1 Pragma: no-cache Set-Cookie: B=18kikclf9qi2e&b=3&s=2m; expires=Thu, 21-Apr-2022 06:59:26 GMT; pat h=/; domain=.yahoo.co.jp Vary: Accept-Encoding X-Content-Type-Options: nosniff X-Frame-Options: SAMEORIGIN X-Vcap-Request-Id: 075691ed-bab6-4077-58f0-34523d132299 X-Xss-Protection: 1; mode=block Age: 0 Transfer-Encoding: chunked Connection: keep-alive Via: http/1.1 edge1675.img.bbt.yahoo.co.jp (ApacheTrafficServer [c sSf ]) Server: ATS Set-Cookie: XB=18kikclf9qi2e&b=3&s=2m; expires=Thu, 21-Apr-2022 06:59:26 GMT; pa th=/; domain=.yahoo.co.jp; secure; samesite=none ... Webサーバーはトップページのデータを準備して、ブラウザにレスポンスとして html ファイルを返し ます。 HTTP/1.1 200 OK

Slide 37

Slide 37 text

37 Yahoo! JAPAN のページが見えるまで(その4) レスポンス HTTP/1.1 200 OK Cache-Control: private, no-cache, no-store, must-revalidate Content-Type: text/html; charset=UTF-8 Date: Mon, 20 Apr 2020 06:59:26 GMT Expires: -1 Pragma: no-cache Set-Cookie: B=18kikclf9qi2e&b=3&s=2m; expires=Thu, 21-Apr-2022 06:59:26 GMT; pat h=/; domain=.yahoo.co.jp Vary: Accept-Encoding X-Content-Type-Options: nosniff X-Frame-Options: SAMEORIGIN X-Vcap-Request-Id: 075691ed-bab6-4077-58f0-34523d132299 X-Xss-Protection: 1; mode=block Age: 0 Transfer-Encoding: chunked Connection: keep-alive Via: http/1.1 edge1675.img.bbt.yahoo.co.jp (ApacheTrafficServer [c sSf ]) Server: ATS Set-Cookie: XB=18kikclf9qi2e&b=3&s=2m; expires=Thu, 21-Apr-2022 06:59:26 GMT; pa th=/; domain=.yahoo.co.jp; secure; samesite=none ... Webサーバーはトップページのデータを準備して、ブラウザにレスポンスとして html ファイルを返し ます。 HTTP/1.1 200 OK HTTPの バージョン ステータス コード ステータス テキスト

Slide 38

Slide 38 text

38 ステータスコード ステータスコードは、サーバーの処理結果を示したものです。 3桁の数値でどのような状態になったかを表します。 - 200番台は処理が成功したことを表す - 200 OK - 201 Created - 300番台は追加の処理が必要であることを表す - 301 Moved Permanently - 302 Found - 307 Temporary Redirect - 308 Permanent Redirect

Slide 39

Slide 39 text

39 ステータスコード - 400番台はリクエストに問題があったことを表す - 400 Bad Request - 401 Unauthorized - 認証が必要 - 403 Forbidden - 404 Not Found - 500番台はサーバー側に問題があったことを表す - 500 Internal Server Error - 503 Service Unavailable

Slide 40

Slide 40 text

40 ドキュメントルート Web サーバーに関連する用語の補足説明。 - ドキュメントルート - URL (https://<サーバー名>/) のトップ部分と対応するサーバー上のディレクトリのこと （≒ドキュメントルートにファイルを置くとWebに公開される） - Linux をWebサーバーにセットアップすると /home/www/html がドキュメントルートになる （設定ファイルで変更可能） - レンタルサーバーでは1つのサーバーを複数のお客様が利用するので、お客様のドメイン毎 にドキュメントルートを設定している ドキュメントルートにファイルを無造作に置くと、Webブラウザから簡単にアクセスされてしまう。 このため、見られてはいけないデータは /home/www/data などのドキュメントルート外のディレクトリ に置くようにしましょう。（情報漏えいの一部はドキュメントルートに誤ってファイルを置いたことで発生しま す。）

Slide 41

Slide 41 text

41 安全な通信をするために リクエストもレスポンスも単なるテキストなので、そのままでは簡単に中身を見られてし まいます。 - TLS (Transport Layer Security) - 通信相手の認証、通信の暗号化を行うプロトコル - 以前は SSL (Secure Sockets Layer) と呼ばれていた - SSL の古いバージョンで使われていた暗号方式が破られてしまったため、 SSL の上位規約として TLS が作られた - SSL と TLS をまとめて SSL と呼ばれることも多い - HTTPS - SSL/TLS プロトコルで接続の上で HTTP 通信を行うこと - SSL/TLS が使われていない状態だとURLは http://〜 - SSL/TLS が使われている状態では https://〜 になる

Slide 42

Slide 42 text

42 特定の誰かだけ利用させたい 提供するコンテンツによっては、会員だけが使えるとか、特定の人だけが使えるといった 制限をしたいことがよくあります。 - 認証 (Authentication) - 誰であるかを確認して、許可された人以外は許さない - （パスポート持ってるからあなたはNさん。Nさんなら顔パス） - （Twitter へのログインなど） - 認可 (Authorization) - 誰であるかに応じて、どのような権利があるかをコントロールする - （新幹線のチケット持ってるので、乗っていいですよ） - （Twitter 連携アプリの OAuth 2.0 など） 日本語でも似たような用語だし、英語でも両方とも略すと Auth になるので、混同される 事が多いので注意しましょう。

Slide 43

Slide 43 text

43 14:55まで休憩

Slide 44

Slide 44 text

44 Webアプリケーションに ついて Webアプリケーションについて、学んでいきましょう

Slide 45

Slide 45 text

45 Web アプリケーションを分類してみる Web アプリケーションとして提供するものは、大きく分けて次の2つがあります。 - Webページを表示するためのアプリケーション - サーバーからは HTML, JavaScript, CSS, 画像などを返す - 古くから提供されてきたもの - スマホ等から利用されるアプリケーション - スマホアプリ等からアクセスされ、データの取得や更新を行う - 「データをどうやり取りをするか」という決まりをアプリケーション毎に決め て、クライアントとサーバーでやり取りを行う - この決まりのことを API (Application Programming Interface) という 今回の講義ではこの API の実装方法を学びます。

Slide 46

Slide 46 text

46 RESTful API API の設計方法にはいくつかの流儀があります。（RPC や SOAPなど） - Web API は SOAP (Simple Object Access Protocol) などで提供されていた - システム毎に複雑な仕様書 (XMLの構造など) のやり取りが必要 - 作成するシステムが複雑になりがち - RESTful API - URL が示すものに対して HTTP のメソッドを使って単純にアクセスする - 仕様がシンプルになるので、複数のシステム連携が比較的容易になる 昨今は RESTful API で提供するものが多いです。

Slide 47

Slide 47 text

47 REST という考え方 Web でシステムを構築するにあたって、どのようにすると効率がいいのかという考え方 が HTTP の規約を策定したメンバーの一人である Roy Fielding によって提唱された。 - REST (REpresentational State Transfer) - 拡張性のある Web システムを構築するためのアーキテクチャスタイル (設計の流儀や様式、作法) - クライアントとサーバーの間を URL と 統一インタフェース (リクエストメソッド) を使って、ステートレス にやり取りすることにより拡張性を高めるようにでき るとした考え - Web および HTTP そのものの原則と言える

Slide 48

Slide 48 text

48 CRUD という考え方 CRUD とは、データ操作で使う4つの基本機能のそれぞれの頭文字をとったものです。 これを RESTful API にマッピングすると以下の通りです。 - Create - データを生成する - POST - Read - データを読み取る - GET - Update - データを更新する - PUT or PATCH - Delete - データを削除する - DELETE

Slide 49

Slide 49 text

49 返却されるデータの形式 通常のWebアプリケーションでは HTML や JavaScript・CSS などが返却されますが、 API ではそれとは違った形式でデータを返却します。 - パース - プログラムでデータ (文字列) 解析すること - API で扱うデータはプログラムで処理しやすい形式を選ぶ (HTML や単なる複数行テキストはパースしづらい) - パースしやすいデータ形式 - XML (Extensible Markup Language) - データに対して厳密にタグを付与したデータ形式 - JSON (JavaScript Object Notation) - JavaScript でそのまま利用可能で、その他言語でも扱いやすい - 今回の講義では JSON を取り扱う

Slide 50

Slide 50 text

50 XML サンプルコードで比較 データ形式 HTML { "key": "value" } value JSON

Slide 51

Slide 51 text

51 Webアプリケーションを 作成するにあたって Webアプリケーションを作成するにあたって、必要な知識 を説明します。

Slide 52

Slide 52 text

52 フレームワークとは 明日のハンズオンで作成するWebアプリケーションではフレームワークを利用します。 - フレームワーク（Web アプリケーションフレームワーク） - モノを作成する際、0 から全て作るのはとても大変 - 土台として何割かできあがったモノの上に処理を追加することで、アプリケー ション完成までの手間を少なくするソフトウェア - フレームワーク毎にルールや作法があり、これに従えば比較的簡単にアプリケ ーションを作成できる（逆に言えばフレームワーク毎に癖があり、合わせて作る必要がある） ライブラリとの違い - ライブラリは自分が作成するプログラム から 利用する部品 - 特別な処理を簡単に実現できるよう作成されており、再実装する手間が省ける - フレームワークは自分が作成するプログラム が 利用される部品

Slide 53

Slide 53 text

53 パターン プログラムを設計・実装において「誰もが似た事をしているな」ということがしばしば起 こります。 - パターン - 似たアプリケーションを作成する場合、後々拡張・修正しやすい共通のやり方 が出てくる - 手法や手順に名前をつけ、エンジニア間で共通の語彙として会話ができるよう にしたモノ - アンチパターン - パターンは良いモノばかりではない - 「こういう風にすると良くないよ」と注意喚起するもの フレームワークはこのパターンを多く利用しており、その代表例がMVCパターンです。

Slide 54

Slide 54 text

54 MVCパターン - MVCパターン (Model-View-Controller パターン) - Model、View、Controller の3つのパーツでアプリケーションを作る考え方 - Controller - 外部からのリクエストを受ける - 処理を Model に依頼して、結果を受け取る - 処理結果を View に渡して、出力結果を受け取る - 出力結果をレスポンスとして返却する - Model - アプリケーションとしての処理を担当する - DBアクセスや外部サービスとのやり取りはここで行う - View - 処理結果をどのようにアウトプットするかを担当する - HTMLの生成や、JSONの生成を行ったりする

Slide 55

Slide 55 text

55 MVCパターンの特徴 - MVCパターン は多くのフレームワークに採用されているため応用しやすい - 実装する際「 MVC のどれが担当するか」ということで整理しやすい - ディレクトリ構成（どこに何を置くか）は悩みのタネになりやすい - ほとんどのフレームワークはディレクトリ構成が決まっており、これに従って 実装するので (比較的) 悩まないで済む 注意点 - MVCの担当を割り振る際、どうしても曖昧な部分ができてしまう - Controller, Model のどちらかの担当範囲は広くなりすぎる傾向がある

Slide 56

Slide 56 text

56 15:30まで休憩

Slide 57

Slide 57 text

57 開発環境構築

Slide 58

Slide 58 text

58 講師担当: endu 資料作成担当 : endu

Slide 59

Slide 59 text

59 このパートで行う事 ①ConoHa VPSにLaravelを導入する ②VSCodeの拡張機能 Remote - SSHでConoHa VPSにアクセスする 開発環境の構築

Slide 60

Slide 60 text

60 ConoHa VPSにLaravelを 導入する

Slide 61

Slide 61 text

61 ConoHa VPSにLaravelを導入する https://qiita.com/Fendo181/items/3a6d77c2f4c7ac96c071

Slide 62

Slide 62 text

62 リモート接続するためのディレクトリとファイルを生成する ※ここからの作業はMacの方はTerminal、Windowsの方はGit for Windowsで作業をしてください cd ~ #ホームディレクトリに移動 mkdir ~/.ssh #ディレクトリを生成する touch ~/.ssh/config #設定ファイルを作成する ls -l ~/.ssh/config 最初にシークレットキーを置いておくディレクトリと、リモートサーバーの接続する際に利用され る設定ファイルも生成しておきます。(※既にある場合はここはスキップして大丈夫です) ConoHa VPSにLaravelを導入する

Slide 63

Slide 63 text

63 16:50 まで各自で作業をしましょう。 わからない事があったら、遠慮なくzoomのチャットに 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です!

Slide 64

Slide 64 text

64 ConoHa VPSの管理画面に戻り「セキュリティ」から「SSH Key」を選択します。 ConoHa VPSにLaravelを導入する

Slide 65

Slide 65 text

65 ConoHa VPSにLaravelを導入する イメージを作成する前に、最初に「SSH Key」からパブリックキーを登録し、シー クレットキーをダウンロードします。

Slide 66

Slide 66 text

66 「パブリックキー」を押して登録します。登録されるとシークレットキーのダウンロードを 促すポップアップが出るので、ダウンロードします。 ConoHa VPSにLaravelを導入する

Slide 67

Slide 67 text

67 シークレットキーをダウンロードしたら、先程作成した「.ssh」ディレクトリに移動させて おいてください。後ほど説明が出てきますが、シークレットキーが置いてある場所のパスを 指定できれば問題ないです。 ConoHa VPSにLaravelを導入する

Slide 68

Slide 68 text

68 **:** まで各自で作業をしましょう。 わからない事があったら、遠慮なくzoomのチャットに 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です!

Slide 69

Slide 69 text

69 ConoHa VPSにLaravelを導入する ※rootパスワードは一度設定すると変更ができないので必ずどこかにメモをしてく ださい。また、紛失した際にも確認する術がないため注意してください。

Slide 70

Slide 70 text

70 ConoHa VPSにLaravelを導入する 先程作成したパブリックキーをオプションで指定してイメージを作成する

Slide 71

Slide 71 text

71 ConoHa VPSにLaravelを導入する 作成後にConoHa VPSの管理画面に遷移します。 サーバリストに作成したVPSがあるのを確認します。

Slide 72

Slide 72 text

72 ConoHa VPSにLaravelを導入する (ダッシュボード画面) (詳細画面) ダッシュボードから「詳細情報」→「VPS設定」→「逆引きホスト名」をクリックしてください。

Slide 73

Slide 73 text

73 ConoHa VPSにLaravelを導入する

Slide 74

Slide 74 text

74 **:** まで各自で作業をしましょう。 わからない事があったら、遠慮なくzoomのチャットに 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です!

Slide 75

Slide 75 text

75 「コンソール」と書かれているボタンをクリックしてコンソールパネルを開きます。 ConoHa VPSにLaravelを導入する

Slide 76

Slide 76 text

76 loginにはrootを指定してください。 Passwordには先程設定したrootパスワードを入力してください。 ConoHa VPSにLaravelを導入する

Slide 77

Slide 77 text

77 MySQLのパスワードは後ほど、2日目のハンズオンパートで使うのでメモし ておいてください。 ConoHa VPSにLaravelを導入する

Slide 78

Slide 78 text

78 ここまでできたら、Laravelがあるディレクトリに移動して、 インストールされているLaravelのバージョンを確認してみましょう。 下のコマンドを実行してConoHa VPSに入っているLaravelのバージョンを確認します。 ※(Vは大文字です) cd /var/www/html/laravel/ php artisan -V ConoHa VPSにLaravelを導入する

Slide 79

Slide 79 text

79 ConoHa VPSにLaravelを導入する

Slide 80

Slide 80 text

80 **:** まで各自で作業をしましょう。 わからない事があったら、遠慮なくzoomのチャットに 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です!

Slide 81

Slide 81 text

81 16:30まで休憩

Slide 82

Slide 82 text

82 VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする

Slide 83

Slide 83 text

83 なぜ、VSCodeを使ってConoHa VPSにアクセスする必要があるのか? エディターを使わない場合 ● コンソール画面に入りコマンドラインで操作 する為、手間が発生する ● viの知識が必要 ● 修正箇所を探すのが大変 VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする

Slide 84

Slide 84 text

84 なぜ、VSCodeを使ってConoHa VPSにアクセスする必要があるのか? ● GUIで楽に操作できる ● 自動でインデントや補完をしてくれるの で、編集が楽 ● 拡張機能を入れて自分好みにカスタマイ ズできる エディターを使う場合 VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする

Slide 85

Slide 85 text

85 手元のPC環境 ConoHa VPS 上の環境 SSH 接続 VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする Remote- SSH

Slide 86

Slide 86 text

86 これから行う具体的な手順 ① VSCodeにRemote-SSHをインストールする ② リモート接続するための設定ファイルにConoHa VPSの設定を記述する ③ VSCodeからConoHa VPSに接続する ④ VSCodeのターミナル画面からConoHa VPS上でコマンドライン操作できるようにする VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする

Slide 87

Slide 87 text

87 ① VSCodeにRemote-SSHをインストールする VSCodeの拡張機能の検索画面(Crt+Shift+X)からRemote-SSHを検索してインストールします。 VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする

Slide 88

Slide 88 text

88 VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする ① VSCodeにRemote-SSHをインストールする インストールが完了するとVSCodeの左のアイコン一覧にRemote-SSH用のアイコンが表示されま す。

Slide 89

Slide 89 text

89 VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする ① VSCodeにRemote-SSHをインストールする 歯車のアイコンをクリックして「.ssh/config」のパスを指定しましょう

Slide 90

Slide 90 text

90 ConoHa VPSにLaravelを導入する DEMOを行います。

Slide 91

Slide 91 text

91 **:** まで各自で作業をしましょう。 わからない事があったら、遠慮なくzoomのチャットに 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です!

Slide 92

Slide 92 text

92 17:55まで休憩

Slide 93

Slide 93 text

93 ② リモート接続するための設定ファイルにConoHa VPSの設定を記述する Host Conoha HostName {IPアドレス} User root Port 22 IdentityFile {秘密鍵が置いてあるパスを指定する} VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする

Slide 94

Slide 94 text

94 ② リモート接続するための設定ファイルにConoHa VPSの設定を記述する ConoHa VPSの管理画面に戻り、ネットワーク情報の【IPアドレス】を見て、設定ファイルに追記 します VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする

Slide 95

Slide 95 text

95 ② リモート接続するための設定ファイルにConoHa VPSの設定を記述する .sshディレクトリ配下に置いている場合、IdentityFileで指定するパスは以下のようになります。 IdentityFile ~/.ssh/シークレットキーの名前 VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする

Slide 96

Slide 96 text

96 ② リモート接続するための設定ファイルにConoHa VPSの設定を記述する Host Conoha HostName {IPアドレス} User root Port 22 IdentityFile {秘密鍵が置いてあるパスを指定する} VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする

Slide 97

Slide 97 text

97 ConoHa VPSにLaravelを導入する DEMOを行います。

Slide 98

Slide 98 text

98 **:** まで各自で作業をしましょう。 わからない事があったら、遠慮なくzoomのチャットに 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です!

Slide 99

Slide 99 text

99 ③ VSCodeからConoHa VPSに接続する 設定ファイルを追加後、VSCodeを更新するとHostで指定した名前がRemote-SSHに出てきます。 クリックしてConoHa VPSにアクセスしましょう。 VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする

Slide 100

Slide 100 text

100 ③ VSCodeからConoHa VPSに接続する VSCodeのエクスプローラーからConoHa VPS上のLaravelがインストールされているディレクトリ を開きます。 コマンドパレットにLaravelがインストールされているパスを指定します。 cd /var/www/html/laravel/ VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする

Slide 101

Slide 101 text

101 ConoHa VPSにLaravelを導入する DEMOを行います。

Slide 102

Slide 102 text

102 **:** まで各自で作業をしましょう。 わからない事があったら、遠慮なくzoomのチャットに 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です!

Slide 103

Slide 103 text

103 ④ VSCodeのターミナル画面からConoHa VPS上でコマンドライン操作できる ようにする 「設定」アイコンから「設定」をクリックし、「Terminal Automation shell Linux」で検索します。 VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする

Slide 104

Slide 104 text

104 「リモート」を選択してAutomation Shell:Linuxの下にあるsetting.jsonで編集を開いて、bashの パスを指定します。 ConoHa VPSでは/usr/bin/配下にbashがあります。 { "terminal.integrated.shell.linux": "/usr/bin/bash" } VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする ④ VSCodeのターミナル画面からConoHa VPS上でコマンドライン操作でき るようにする

Slide 105

Slide 105 text

105 この状態で保存をしてターミナルを開くと、ConoHa VPS上に接続した状態でサーバのターミナル を操作する事ができます。 試しにphp artisan -Vで確認してみましょう。 VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする ④ VSCodeのターミナル画面からConoHa VPS上でコマンドライン操作できる ようにする

Slide 106

Slide 106 text

106 VSCodeの拡張機能 Remote-SSHでConoHa VPSにアクセスする DEMOを行います。

Slide 107

Slide 107 text

107 **:** まで各自で作業をしましょう。 わからない事があったら、遠慮なくzoomのチャットに 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です!

Slide 108

Slide 108 text

108 1日目終了！ お疲れ様でした！

Slide 109

Slide 109 text

109 2日目 Laravelについて

Slide 110

Slide 110 text

110 講師担当: kumak1 資料作成担当 : mochiko

Slide 111

Slide 111 text

111 Laravelとは？ 今回のフレームワークの講義は Laravelを使って進めていきます

Slide 112

Slide 112 text

112 Laravelの紹介 Laravelとは？ - PHPで書かれたフレームワーク - 公式ドキュメント https://laravel.com/ - 日本語訳まとめサイト https://readouble.com/laravel/ - バージョンについて - v1 は2011年6月提供開始。最新バージョンは 7.X（2020/4 現在） - 半年毎にメジャーバージョンアップ - LTS（Long Term Support）のリリースは2年毎 - バグフィックスは2年間継続 - セキュリティフィックスは3年間継続 今回の講義では Laravel6.X（最新のLTS）を使用します。

Slide 113

Slide 113 text

113 復習

Slide 114

Slide 114 text

114 フレームワークとは（復習） 明日のハンズオンで作成するWebアプリケーションではフレームワークを利用します。 - フレームワーク（Web アプリケーションフレームワーク） - モノを作成する際、0 から全て作るのはとても大変 - 土台として何割かできあがったモノの上に処理を追加することで、アプリケー ション完成までの手間を少なくするソフトウェア - フレームワーク毎にルールや作法があり、これに従えば比較的簡単にアプリケ ーションを作成できる（逆に言えばフレームワーク毎に癖があり、合わせて作る必要がある） ライブラリとの違い - ライブラリは自分が作成するプログラム から 利用する部品 - 特別な処理を簡単に実現できるよう作成されており、再実装する手間が省ける - フレームワークは自分が作成するプログラム が 利用される部品

Slide 115

Slide 115 text

115 Webアプリケーションフレームワークとは？ Laravelとは？ - Webアプリケーションの開発をサポートするために設計されたもの - よく用いられる機能のためのライブラリを提供 Webアプリケーションに必要な共通機能をあらかじめ用意することで、完成までの手間 を少なくするソフトウェアです。

Slide 116

Slide 116 text

116 Webアプリケーションに必要な機能とは？ Laravelとは？ - DBと接続・データ取得（MVCのM） - テンプレートエンジン（MVCのV） - ルーティング - ログイン認証処理 - 基本的なセキュリティ - セッション管理 といった機能が必要になります。

Slide 117

Slide 117 text

117 様々な言語で提供されるフレームワーク Laravelとは？ - CakePHP（PHP） - Ruby on Rails（Ruby） - Django（Python） - Spring Framework（Java） などなど、様々な言語で、多くのフレームワークが用意されています。 それぞれに設計思想や特徴があるので、興味のある人は調べてみましょう。

Slide 118

Slide 118 text

118 参考：Ruby on Railsが与えた影響 Laravelとは？ - Ruby on Rails (Ruby製のWebアプリケーションフレームワーク) - 2004年に発表されその後人気になった - 簡単にWebアプリケーションが作れる - オブジェクト指向 - MVCアーキテクチャ Webアプリケーションが簡単に作れるようになった これ以降に出てきたフレームワーク（Laravelも含む）は、 Ruby on Railsの影響を大きく受けている

Slide 119

Slide 119 text

119 参考：Laravelの動静（Google トレンド日本） Laravelとは？ 赤：Ruby on Rails, 青：Laravel

Slide 120

Slide 120 text

120 参考：Laravelの動静（Google トレンド世界） Laravelとは？ 赤：Ruby on Rails, 青：Laravel

Slide 121

Slide 121 text

121 フレームワークを使うメリット Laravelとは？ 簡単に、安全に、短く書くことが可能になります。 - 規約が用意されている - 規約に添うことで開発者ごとのコーディングのバラ付きが抑えられる - コードが構造化されている - MVCパターン、リポジトリパターンなど - 保守性向上 - 便利なモノが用意されている - コマンドラインインターフェイス、ORMなど - 開発スピードアップ

Slide 122

Slide 122 text

122 フレームワークを使うデメリット Laravelとは？ - 学習コストが増える - フレームワークのお作法の習得が必要（言語のお作法と別に） - 例：コマンドラインインターフェイス、ORMの記法、ルーティングなど - フレームワークの知識に偏ってしまう - 細かい仕組みを理解せずにアプリケーションが作れてしまうので、 ブラックボックス化しやすい - カスタマイズしづらい（スクラッチと比べ） - アプリケーションの規模に対して冗長になる場合がある

Slide 123

Slide 123 text

123 Laravelの便利機能（の例）

Slide 124

Slide 124 text

124 Artisan について Laravelの便利機能 - Laravelのコマンドラインインターフェイス - https://readouble.com/laravel/6.x/ja/artisan.html - Artisan = 職人という意味 - php artisan ~ という記法で様々なコマンドを実行できる

Slide 125

Slide 125 text

125 Artisanコマンドの例 コマンド 処理内容 php artisan -v Laravelのバージョンの確認 php artisan list コマンド一覧を確認できる php artisan <実行コマンド> -h コマンドの使い方を確認できる php artisan make:controller FooController Fooコントローラーを作成する php artisan make:model Foo Fooモデルを作成する php artisan make:migration create_tests_table -- create=tests create_tests_table=ファイル名、tests＝テーブル名で マイグレーションファイルを作成する php artisan migrate マイグレーションの実行 php artisan migrate:rollback マイグレーションのロールバック php artisan route:list ルーティングの一覧を表示 php artisan tinker REPLの起動（ちょっとしたデバッグとかに便利）

Slide 126

Slide 126 text

126 マイグレーションについて Laravelの便利機能 - 移動・移行という意味。(wikipediaより引用) - ここではデータベースマイグレーションのこと - DBに保存されているデータを保持したまま、テーブルの作成やカラムの変更な どを行うための機能 マイグレーションのメリット - SQL文を作成して実行しなくても、簡単にテーブルを定義できる - テーブルの設計をコードで管理できる（マイグレーションファイル） - データベースがバージョンファイルにより管理される - 複数人での開発作業もやりやすくなる

Slide 127

Slide 127 text

127 .envファイルについて Laravelの便利機能 - アプリケーションで使う各種設定が含まれる - データベースの接続設定 - アプリケーション固有の環境変数（APP_KEYなど） - 開発環境や本番環境の切り替え - リストした値はPHPのスーパーグローバル変数へロードされる - 秘匿情報などを外部からアクセスできない形で保持できる .envファイルはGitHubなどにアップロードしてはいけません

Slide 128

Slide 128 text

128 .envファイルについて Laravelの便利機能 ファイル内容の例

Slide 129

Slide 129 text

129 Laravelのディレクトリ構成

Slide 130

Slide 130 text

130 ディレクトリの構成の一部（Laravel） Laravelの構成 - MVCのディレクトリ - app/ Modelのファイルが含まれる（諸説ある） - app/Http/Controller Controllerのファイルが含まれる - app/resources/views Viewのファイルが含まれる - そのほかのディレクトリ - app/Console/Commands Artisanの独自カスタムコマンド - routes/ ルート定義ファイル - database/ DBのマイグレーション・初期値設定ファイルなど - tests/ テスト - vendor/ ライブラリなど（composer による依存パッケージ解決） ※フレームワークによってディレクトリ構成は異なります。

Slide 131

Slide 131 text

131 Laravelを MVCパターンで考えてみる

Slide 132

Slide 132 text

132 復習

Slide 133

Slide 133 text

133 MVCパターン（復習） - MVCパターン (Model-View-Controller パターン) - Model、View、Controller の3つのパーツでアプリケーションを作る考え方 - Controller - 外部からのリクエストを受ける - 処理を Model に依頼して、結果を受け取る - 処理結果を View に渡して、出力結果を受け取る - 出力結果をレスポンスとして返却する - Model - アプリケーションとしての処理を担当する - DBアクセスや外部サービスとのやり取りはここで行う - View - 処理結果をどのようにアウトプットするかを担当する - HTMLの生成や、JSONの生成を行ったりする

Slide 134

Slide 134 text

134 MVCパターンの特徴（復習） - MVCパターン は多くのフレームワークに採用されているため応用しやすい - 実装する際「 MVC のどれが担当するか」ということで整理しやすい - ディレクトリ構成（どこに何を置くか）は悩みのタネになりやすい - ほとんどのフレームワークはディレクトリ構成が決まっており、これに従って 実装するので (比較的) 悩まないで済む 注意点 - MVCの担当を割り振る際、どうしても曖昧な部分ができてしまう - Controller, Model のどちらかの担当範囲は広くなりすぎる傾向がある

Slide 135

Slide 135 text

135 MVCパターンの特徴（復習） 服の一覧 を見たい

Slide 136

Slide 136 text

136 MVCパターンの特徴（復習） 服の一覧 を見たい Requet Response GET /clothes 服の一覧ページをレスポンスで返す ECショップから服の一覧データを取得したい場合の例

Slide 137

Slide 137 text

137 MVCパターンの特徴（復習） 服の一覧 を見たい Route Controller Model DB View ① ② ③ ④ ⑤ ⑥ ⑦

Slide 138

Slide 138 text

138 MVCパターンの特徴（復習） Route Controller Model DB View ① ② ③ ④ ⑤ ⑥ ⑦ GET /clothes ① 「/clothes」を元にControllerに遷移します。 服の一覧 を見たい

Slide 139

Slide 139 text

139 MVCパターンの特徴（復習） Route Controller Model DB View ① ② ③ ④ ⑤ ⑥ ⑦ GET /clothes ② Controller側で「服の一覧を取得する」処理を呼び出します。 服の一覧 を見たい

Slide 140

Slide 140 text

140 MVCパターンの特徴（復習） Route Controller Model DB View ① ② ③ ④ ⑤ ⑥ ⑦ GET /clothes ③DBからデータを取得したいので、Modelに遷移します。 服の一覧 を見たい

Slide 141

Slide 141 text

141 MVCパターンの特徴（復習） Route Controller Model DB View ① ② ③ ④ ⑤ ⑥ ⑦ GET /clothes ④DBから必要なデータをModel経由で取得します。 服の一覧 を見たい

Slide 142

Slide 142 text

142 MVCパターンの特徴（復習） Route Controller Model DB View ① ② ③ ④ ⑤ ⑥ ⑦ GET /clothes ⑤受け取ったデータをControllerに返します。 服の一覧 を見たい

Slide 143

Slide 143 text

143 MVCパターンの特徴（復習） Route Controller Model DB View ① ② ③ ④ ⑤ ⑥ ⑦ GET /clothes ⑥受け取ったデータをViewに渡してレスポンスで返す形に加工します。 服の一覧 を見たい

Slide 144

Slide 144 text

144 MVCパターンの特徴（復習） Route Controller Model DB View ① ② ③ ④ ⑤ ⑥ ⑦ GET /clothes ⑦Controller側からレスポンスをクライアントに返す。 服の一覧 を見たい 服の一覧ページをレスポンスで返す

Slide 145

Slide 145 text

145 MVCパターンの特徴（復習） Route Controller Model DB View ① ② ③ ④ ⑤ ⑥ ⑦ 服の一覧 を見たい MVCパターンの流れ

Slide 146

Slide 146 text

146 ディレクトリの構成の一部（Laravel） Laravelの構成 - MVCのディレクトリ - app/ Modelのファイルが含まれる（諸説ある） - app/Http/Controller Controllerのファイルが含まれる - app/resources/views Viewのファイルが含まれる - そのほかのディレクトリ - app/Console/Commands Artisanの独自カスタムコマンド - routes/ ルート定義ファイル - database/ DBのマイグレーション・初期値設定ファイルなど - tests/ テスト - vendor/ ライブラリなど（composer による依存パッケージ解決） ※フレームワークによってディレクトリ構成は異なります。

Slide 147

Slide 147 text

147 MVCパターンの特徴（復習） routes/ app/Http/Controller app/ DB app/resources/views ① ② ③ ④ ⑤ ⑥ ⑦ 服の一覧 を見たい

Slide 148

Slide 148 text

148 いろいろできる！ 便利そう！！ 今のところは、こう思ってもらえたら十分です 次から実際にアプリケーションを作っていきます！

Slide 149

Slide 149 text

149 11:50まで休憩

Slide 150

Slide 150 text

150 2日目 Laravelを使ってAPIを作成す る

Slide 151

Slide 151 text

151 講師担当: endu 資料作成担当 : tosite + endu + kumak1

Slide 152

Slide 152 text

152 1日目の「開発環境構築」と「Laravelを使ってAPIを作成する」は手を動かします。 このタグが出ていないスライドは座学なのでスライドを見ながら聞いてください。 手を動かす作業でのスライドについて 講義の進め方について 「作業」がついているスライドは実際に手を動 かしながら行うパートになります。実際にコー ディングをしたり、設定したりする作業で出て きます。 「確認」がついているスライドは動作を確認し たり、返ってきた結果を確認します

Slide 153

Slide 153 text

153 ハンズオンパート講義中のターミナルについて 講義の進め方について この講義で出てくるターミナルで実行する環境は、全てremote sshで接続している状態 でのVSCodeのターミナルです。手元のPCのターミナルではないです。

Slide 154

Slide 154 text

154 ターミナルでよく使うコマンド 講義の進め方について ターミナル上でディレクトリを移動したりします。 そのために知っておくべきコマンドを載せておきます。 他にもオプションなどありますが、基本はこの4つのコマンドを使うと覚えておいてくだ さい cd # ディレクトリ移動 cd .. # 1つ上のディレクトリ階層に戻る ls # ファイル一覧を表示 pwd # 現在のディレクトリを表示

Slide 155

Slide 155 text

155 アプリケーションを セットアップしよう

Slide 156

Slide 156 text

156 ConoHa VPSに教材をダウンロードしよう アプリケーションをセットアップしよう git をインストール sudo yum -y install git git --version git version 1.8.3.1 git がインストールされているか確認

Slide 157

Slide 157 text

157 cd /var/www/html ConoHa VPSに教材をダウンロードしよう アプリケーションをセットアップしよう git clone https://github.com/tosite0345/gtb2020-laravel.git 教材をダウンロード ディレクトリを移動・確認 cd /var/www/html/gtb2020-laravel pwd /var/www/html/gtb2020-laravel ディレクトリ移動

Slide 158

Slide 158 text

158 ConoHa VPSに教材をダウンロードしよう アプリケーションをセットアップしよう sh init.sh セットアップ実行 php artisan -V Laravel Framework 6.18.3 バージョン確認

Slide 159

Slide 159 text

159 VSCode側で作業ディレクトリをgtb2020-laravelに変更しよう アプリケーションをセットアップしよう VSCode側で「ファイル」→「Open」を選択してください 「/var/www/html/gtn2020-laravel」入力してOKを入れてださい

Slide 160

Slide 160 text

160 VSCode側で作業ディレクトリをgtb2020-laravelに変更しよう アプリケーションをセットアップしよう ディレクトリが変わっている事を確認します

Slide 161

Slide 161 text

161 DEMOを行います。 アプリケーションをセットアップしよう

Slide 162

Slide 162 text

162 **:** まで各自で作業をしましょう。 わからない事があったら、遠慮なくzoomのチャットに 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です!

Slide 163

Slide 163 text

163 マイグレーションを行い、アプリケーションで必要 なテーブルを作成しよう アプリケーションをセットアップしよう ① MariaDBにログインしてDatabaseを作成 ② .envにMySQLのパスワードを追加 ③ マイグレーションを実行する ④ ホストURLにアクセスする

Slide 164

Slide 164 text

164 アプリケーションをセットアップしよう ①MariaDBにログインしてDatabaseを作成 mysql -uroot -p Enter password: # laravelという名前のDBを作成する CREATE DATABASE laravel; # DBがちゃんと作られているか確認 SHOW DATABASES; # mysqlから抜ける exit; DBの名前はlaravelでつくります。

Slide 165

Slide 165 text

165 アプリケーションをセットアップしよう DEMOを行います。

Slide 166

Slide 166 text

166 **:** まで各自で作業をしましょう。 わからない事があったら、遠慮なくzoomのチャットに 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です!

Slide 167

Slide 167 text

167 アプリケーションをセットアップしよう ②.envにMySQLのパスワードを追加 /var/www/gtb2020-laravel/.env

Slide 168

Slide 168 text

168 アプリケーションをセットアップしよう ②.envにMySQLのパスワードを追加 DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=laravel DB_USERNAME=root DB_PASSWORD={MySQLのパスワード追加} /var/www/gtb2020-laravel/.env

Slide 169

Slide 169 text

169 アプリケーションをセットアップしよう DEMOを行います。

Slide 170

Slide 170 text

170 **:** まで各自で作業をしましょう。 わからない事があったら、遠慮なくzoomのチャットに 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です!

Slide 171

Slide 171 text

171 アプリケーションをセットアップしよう ③マイグレーションを実行する pwd /var/www/html/gtb2020-laravel #これが表示される事を確認してください。 # ディレクトリ確認 # マイグレーションを実行する php artisan migrate Migration table created successfully. Migrating: 2020_04_13_024636_create_comments_table Migrated: 2020_04_13_024636_create_comments_table (0.05 seconds)

Slide 172

Slide 172 text

172 アプリケーションをセットアップしよう ③マイグレーションを実行する USE laravel; SHOW TABLES; # MariaDBログイン（初日にメモしておいたMySQLのパスワードを使います） mysql -uroot -p Enter password: # tableを確認

Slide 173

Slide 173 text

173 アプリケーションをセットアップしよう DEMOを行います。

Slide 174

Slide 174 text

174 **:** まで各自で作業をしましょう。 わからない事があったら、遠慮なくzoomのチャットに 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です!

Slide 175

Slide 175 text

175 ダッシュボードから「詳細情報」→「VPS設定」→「逆引きホスト名」をコピーしてブ ラウザで確認する。 (ダッシュボード画面) (詳細画面) アプリケーションをセットアップしよう ④ホストにアクセスする

Slide 176

Slide 176 text

176 アプリケーションをセットアップしよう アクセスしたら問題なく「API Tester」が表示されるのを確認してください。

Slide 177

Slide 177 text

177 アプリケーションをセットアップしよう DEMOを行います。

Slide 178

Slide 178 text

178 **:** まで各自で作業をしましょう。 わからない事があったら、遠慮なくzoomのチャットに 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です!

Slide 179

Slide 179 text

179 API Testerを使ってみよう

Slide 180

Slide 180 text

180 API Testerを使ってみよう API画面 ここで主に作成したAPIの動作検証を行います。Resultにレスポンスが返ってきます。

Slide 181

Slide 181 text

181 API Testerを使ってみよう Routes画面 ルーティングとコントローラーの対応を見る事ができます。

Slide 182

Slide 182 text

182 API Testerを使ってみよう Logs画面 エラーログを見る事ができます。

Slide 183

Slide 183 text

183 データを全表示 API Testerを使ってみよう 画面入力 SUBMIT をクリック Selected Method get Uri /api/comments Parameters なし

Slide 184

Slide 184 text

184 API Testerを使ってみよう 画面入力 SUBMIT をクリック Selected Method get Uri /api/comments Parameters なし 200 （データ表示に成功） データを全表示

Slide 185

Slide 185 text

185 DEMOを行います。 API Testerを使ってみよう

Slide 186

Slide 186 text

186 **:** まで各自で作業をしましょう。 わからない事があったら、遠慮なくzoomのチャットに 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です!

Slide 187

Slide 187 text

187 API Testerを使ってみよう Parametersのkeyは「name」と「content」を追加してください

Slide 188

Slide 188 text

188 データを追加してPOSTでリクエストすると失敗するか確認しよう API Testerを使ってみよう 画面入力 SUBMIT をクリック Selected Method post Uri /api/comments Parameters name: 自由 content: 自由

Slide 189

Slide 189 text

189 API Testerを使ってみよう 画面入力 SUBMIT をクリック 405 エラー データを追加してPOSTでリクエストすると失敗するか確認しよう Selected Method post Uri /api/comments Parameters name: 自由 content: 自由

Slide 190

Slide 190 text

190 DEMOを行います。 API Testerを使ってみよう

Slide 191

Slide 191 text

191 **:** まで各自で作業をしましょう。 わからない事があったら、遠慮なくzoomのチャットに 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です!

Slide 192

Slide 192 text

192 14:50まで休憩

Slide 193

Slide 193 text

193 APIのCRUDを実装しよう 前半 (Create,Read)

Slide 194

Slide 194 text

194 Create

Slide 195

Slide 195 text

195 CRUD の C(reate)。ルーティングに追加 APIのCRUDを実装しよう group(function () { Route::delete('logs', function () { exec(': > ../storage/logs/laravel.log'); }); Route::get('comments', 'CommentController@index'); Route::post('comments', 'CommentController@store'); }); routes/api.php を VSCodeで開いてみよう

Slide 196

Slide 196 text

196 CRUD の C(reate) ルーティングに追加してレスポンスが返ってくるか確認 APIのCRUDを実装しよう 画面入力 SUBMIT をクリック Selected Method post Uri /api/comments Parameters name: 自由 content: 自由

Slide 197

Slide 197 text

197 APIのCRUDを実装しよう 画面入力 SUBMIT をクリック 200 （ルーティングに成功） CRUD の C(reate) ルーティングに追加してレスポンスが返ってくるか確認 Selected Method post Uri /api/comments Parameters name: 自由 content: 自由

Slide 198

Slide 198 text

198 APIのCRUDを実装しよう CRUD の C(reate) ルーティングに追加してレスポンスが返ってくるか確認 「422」が返ってきた場合は「value」になんらかの値を入力して試してください 422 エラー

Slide 199

Slide 199 text

199 DEMOを行います。 APIのCRUDを実装しよう

Slide 200

Slide 200 text

200 **:** まで各自で作業をしましょう。 わからない事があったら、遠慮なくzoomのチャットに 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です!

Slide 201

Slide 201 text

201 Model を artisan コマンドで作成 APIのCRUDを実装しよう pwd /var/www/html/gtb2020-laravel #これが表示される事を確認してください。 php artisan make:model Comment # 成功 Model created successfully. ターミナルで下記のコマンドを実行しよう

Slide 202

Slide 202 text

202 Model を artisan コマンドで作成 APIのCRUDを実装しよう

Slide 203

Slide 203 text

203 MVCパターンの特徴（復習） Route Controller Model DB View ① ② ③ ④ ⑤ ⑥ ⑦ 服の一覧 を見たい MVCパターンの流れ

Slide 204

Slide 204 text

204 APIのCRUDを実装しよう

Slide 205

Slide 205 text

205 CRUD の C(reate)。Controller に store の処理を追加 APIのCRUDを実装しよう public function store(¥App¥Http¥Requests¥Comments¥Post $request) { $comment = Comment::create([ 'name' => $request->input('name'), 'content' => $request->input('content'), ]); return response()->json($comment, 201); } app/Http/Controllers/CommentController.php をVSCodeで開いてみよう

Slide 206

Slide 206 text

206 画面入力 SUBMIT をクリック CRUD の C(reate)。再実行 APIのCRUDを実装しよう Selected Method post Uri /api/comments Parameters name: 自分 content: 自由 201 （DBにレコード追加）

Slide 207

Slide 207 text

207 画面入力 SUBMIT をクリック CRUD の C(reate)。再実行 APIのCRUDを実装しよう Selected Method post Uri /api/comments Parameters name: 自分 content: 自由 id を控えておく

Slide 208

Slide 208 text

208 画面入力 SUBMIT をクリック CRUD の C(reate)。再実行 APIのCRUDを実装しよう Selected Method post Uri /api/comments Parameters name: 自分 content: 自由 id を控えておく

Slide 209

Slide 209 text

209 DEMOを行います。 APIのCRUDを実装しよう

Slide 210

Slide 210 text

210 **:** まで各自で作業をしましょう。 わからない事があったら、遠慮なくzoomのチャットに 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です!

Slide 211

Slide 211 text

211 Read

Slide 212

Slide 212 text

212 CRUD の R(ead)。ルーティングに追加 APIのCRUDを実装しよう group(function () { Route::delete('logs', function () { exec(': > ../storage/logs/laravel.log'); }); Route::get('comments', 'CommentController@index'); Route::post('comments', 'CommentController@store'); Route::get('comments/{comment}', 'CommentController@show'); }); routes/api.php を VSCodeで開いてみよう

Slide 213

Slide 213 text

213 CRUD の R(ead)。Controller に show の処理を追加 APIのCRUDを実装しよう public function show($id) { return Comment::findOrFail($id); } app/Http/Controllers/CommentController.php をVSCodeで開いてみよう

Slide 214

Slide 214 text

214 画面入力 SUBMIT をクリック CRUD の R(ead)。実行 APIのCRUDを実装しよう Selected Method get Uri /api/comments/{id の番号} Parameters

Slide 215

Slide 215 text

215 画面入力 SUBMIT をクリック CRUD の R(ead)。実行 APIのCRUDを実装しよう Selected Method get Uri /api/comments/{id の番号} Parameters create したデータが表示

Slide 216

Slide 216 text

216 DEMOを行います。 APIのCRUDを実装しよう

Slide 217

Slide 217 text

217 **:** まで各自で作業をしましょう。 わからない事があったら、遠慮なくzoomのチャットに 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です!

Slide 218

Slide 218 text

218 16:10まで休憩

Slide 219

Slide 219 text

219 ORMのよもやま話

Slide 220

Slide 220 text

220 ORMについて簡単に紹介 ORMのよもやま話 ORMとはObject-Relational Mappingの略称です。 LaravelではEloquentと呼ばれるORMが使われています。RailsではActive Recordが使われています。 public function show($id) { return Comment::findOrFail($id); } app/Http/Controllers/CommentController.php をVSCodeで開いてみよう ここでは Comment クラスがORMの役割を果たしています。 参考資料:「Eloquent:利用の開始」https://readouble.com/laravel/7.x/ja/eloquent.html

Slide 221

Slide 221 text

221 ORMの利点について紹介 ORMのよもやま話 1.SQLを書かず直感的にDBを操作する事ができる。 2.リレーションを使った操作が楽に書ける。 3.SQLインジェクションなどの攻撃に対して自動で防いでくれる 4.取得したデータがオブジェクトなので編集がしやすい

Slide 222

Slide 222 text

222 SQLを書かず直感的にDBを操作する事ができる。 ORMのよもやま話 SQL ORM App¥Comment::all(); App¥Comment::where(‘id’, 1)->get(); SELECT * FROM comments; SELECT * FROM comments where id = 1; データを取得する場合の例(SELECT)

Slide 223

Slide 223 text

223 SQLを書かず直感的にDBを操作する事ができる。 ORMのよもやま話 SQL ORM (new Comments())->fill($request->input())->save(); INSERT INTO comments VALUE ( name = ‘tosite’, content = ’body text’, email = ’sample@example.com’ ); データを保存する場合の例(INSERT)

Slide 224

Slide 224 text

224 findOrFail ORMのよもやま話 public function show($id) { return Comment::findOrFail($id); } app/Http/Controllers/CommentController.php をVSCodeで開いてみよう findOrFailメソッドは該当するレコードが見つからない時、自動で404HTTP レスポンスを返してくれます。なのでこのメソッドを使用すればわざわざ明 確に404レスポンスを返すコードを書く必要はありません。 この場合はAPI Testerで存在しないIDを指定してリクエストをすると自動で 404が返ってきます。

Slide 225

Slide 225 text

225 findOrFail ORMのよもやま話

Slide 226

Slide 226 text

226 リレーションを使った操作が楽 class Comment extends Model { public function user() { return $this->hasOne('App¥User'); } } hasOne = 1:1 hasMany = 1:N belongTo = N:1 belongsToMany = N:N ORMのよもやま話 CommentモデルとUserモデルが1対1の関係になっている (※commentsテーブル内にuser_idを保持している場合)

Slide 227

Slide 227 text

227 ORMのよもやま話 Comment::user->name; SELECT user.name FROM comments LEFT JOIN user ON comments.user_id = user.id SQL ORM リレーションを使った操作が楽

Slide 228

Slide 228 text

228 セキュリティ対策 ORMのよもやま話 SQL + PHP ORM (new Comments())->fill($request->input())->save(); $res = pg_query_params( $dbconn, 'UPDATE comments SET name = $1 WHERE content = $2', array(‘tosite’, ‘body text’) );

Slide 229

Slide 229 text

229 Q. ORMを積極的に使った方がいいのか？ ORMのよもやま話

Slide 230

Slide 230 text

230 A. 場合による。ORMが使わない方が良い場合も当然ある。 ORMのよもやま話 (1)複数のtabelをまたぐ処理をORMで実装をしようとすると、実装が難しく なるケースがある (2)ORMの裏側で発行しているSQLが意図せずN+1問題を引き起こすケース もある

Slide 231

Slide 231 text

231 N+1問題を引き起こすケースもある ORMのよもやま話 $comments = Comment::all(); foreach ($comments as $ comment) { echo $comment->user } class Comment extends Model { public function user() { return $this->hasMany('App¥User'); } } ORM

Slide 232

Slide 232 text

232 N+1問題を引き起こすケースもある ORMのよもやま話 select * from comments; select * from users where id = 1; select * from users where id = 2; select * from users where id = 3; . . SQL $comments = Comment::with('user')->get(); foreach ($comments as $ comment) { echo $comment->user } ※ORM側で対策は可能 $comments->user が実行される度にSQLが発行されてしまい、処理が重くなってしまいます。

Slide 233

Slide 233 text

233 ORMを使った方法だけを理解するのではなく、裏側で発行される SQLの意味を理解するためにも、素のSQLをしっかり書けるように 学びましょう! ORMのよもやま話

Slide 234

Slide 234 text

234 16:45まで休憩

Slide 235

Slide 235 text

235 APIのCRUDを実装しよう 後半 (Update,Delete,Index)

Slide 236

Slide 236 text

236 Update

Slide 237

Slide 237 text

237 CRUD の U(pdate)。ルーティングに追加 APIのCRUDを実装しよう group(function () { Route::delete('logs', function () { exec(': > ../storage/logs/laravel.log'); }); Route::get('comments', 'CommentController@index'); Route::post('comments', 'CommentController@store'); Route::get('comments/{comment}', 'CommentController@show'); Route::put('comments/{comment}', 'CommentController@update'); }); routes/api.php をVSCodeで開いてみよう

Slide 238

Slide 238 text

238 CRUD の U(pdate)。Controller に update の処理を追加 APIのCRUDを実装しよう public function update(¥App¥Http¥Requests¥Comments¥Put $request, $id) { $comment = Comment::findOrFail($id); $comment->update([ 'name' => $request->input('name') ?: $comment->name, 'content' => $request->input('content') ?: $comment->content, ]); return response()->json($comment, 200); } app/Http/Controllers/CommentController.php をVSCodeで開いてみよう

Slide 239

Slide 239 text

239 CRUD の U(pdate)。 APIのCRUDを実装しよう 画面入力 SUBMIT をクリック Selected Method put/patch Uri /api/comments/ Parameters name: 自由

Slide 240

Slide 240 text

240 CRUD の U(pdate)。Update Controller を追加 APIのCRUDを実装しよう 画面入力 SUBMIT をクリック Selected Method put/patch Uri /api/comments/ Parameters name: 自由 200 name が更新される

Slide 241

Slide 241 text

241 DEMOを行います。 APIのCRUDを実装しよう

Slide 242

Slide 242 text

242 **:** まで各自で作業をしましょう。 わからない事があったら、遠慮なくzoomのチャットに 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です!

Slide 243

Slide 243 text

243 Delete

Slide 244

Slide 244 text

244 CRUD の D(elete)。ルーティングに追加 APIのCRUDを実装しよう group(function () { Route::delete('logs', function () { exec(': > ../storage/logs/laravel.log'); }); Route::get('comments', 'CommentController@index'); Route::post('comments', 'CommentController@store'); Route::get('comments/{comment}', 'CommentController@show'); Route::put('comments/{comment}', 'CommentController@update'); Route::delete('comments/{comment}', 'CommentController@destroy'); }); routes/api.php をVSCodeで開いてみよう

Slide 245

Slide 245 text

245 CRUD の D(elete)。Controller に destroy の処理を追加 APIのCRUDを実装しよう public function destroy($id) { Comment::findOrFail($id)->delete(); return response()->noContent(); } app/Http/Controllers/CommentController.php をVSCodeで開いてみよう

Slide 246

Slide 246 text

246 CRUD の D(elete)。Delete Controller を追加 APIのCRUDを実装しよう 画面入力 SUBMIT をクリック Selected Method delete Uri /api/comments/34 Parameters

Slide 247

Slide 247 text

247 DEMOを行います。 APIのCRUDを実装しよう

Slide 248

Slide 248 text

248 **:** まで各自で作業をしましょう。 わからない事があったら、遠慮なくzoomのチャットに 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です!

Slide 249

Slide 249 text

249 Index

Slide 250

Slide 250 text

250 CRUD の R(ead)。Controller に show の処理を追加 APIのCRUDを実装しよう public function index() { return [ ['name' => 'tom', 'content' => 'hello'], ['name' => 'sam', 'content' => 'world'], ]; return Comment::all(); } app/Http/Controllers/CommentController.php をVSCodeで開いてみよう

Slide 251

Slide 251 text

251 API 実行してみよう - データを全表示 APIのCRUDを実装しよう 画面入力 SUBMIT をクリック Selected Method get Uri /api/comments Parameters

Slide 252

Slide 252 text

252 API 実行してみよう - データを全表示 APIのCRUDを実装しよう 画面入力 SUBMIT をクリック Selected Method get Uri /api/comments Parameters 200 （データ表示に成功）

Slide 253

Slide 253 text

253 DEMOを行います。 APIのCRUDを実装しよう

Slide 254

Slide 254 text

254 **:** まで各自で作業をしましょう。 わからない事があったら、遠慮なくzoomのチャットに 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です!

Slide 255

Slide 255 text

255 18:05まで休憩

Slide 256

Slide 256 text

256 Validationを実装しよう

Slide 257

Slide 257 text

257 Validation を実装しよう 利用者の 個人情報 悪意のある攻撃 正常なリクエスト だと勘違いして、 レスポンスを返し てしまう Validationなしの場合

Slide 258

Slide 258 text

258 Validation を実装しよう Validationありの場合 利用者の 個人情報 悪意のある攻撃 悪意のある攻撃を 事前に防ぐように する

Slide 259

Slide 259 text

259 画面入力 SUBMIT をクリック Validation に引っかかるようにAPIを実行してみよう Validation を実装しよう Selected Method post Uri /api/comments Parameters name: 自分 content:

Slide 260

Slide 260 text

260 画面入力 SUBMIT をクリック Validation に引っかかるようにAPIを実行してみよう Validation を実装しよう Selected Method post Uri /api/comments Parameters name: 自分 content: 422 The content field is required.

Slide 261

Slide 261 text

261 今のValidation の実装をみてみよう Validation を実装しよう public function rules() { return [ 'name' => 'required', // nameパラメータは必須 'content' => 'required', // contentパラメータは必須 ]; } app/Http/Request/Comments/Post.php をVSCodeで開いてみよう

Slide 262

Slide 262 text

262 Validation のドキュメントをみてルール追加しよう Validation を実装しよう public function rules() { return [ 'name' => 'required|min:5|max:10', 'content' => 'required', ]; } min:値 = フィールドが最小値として指定された値以下であることをバリデートします。 max:値 = フィールドが最小値として指定された値以上であることをバリデートします。 参考資料バリデーションについて https://readouble.com/laravel/7.x/ja/validation.html

Slide 263

Slide 263 text

263 画面入力 SUBMIT をクリック nameに4文字または11文字の文字列入れて失敗するのを確認し てください Validation を実装しよう Selected Method post Uri /api/comments Parameters name:aaaa or aaaaaaaaaaa content: 自由 422 The content field is required.

Slide 264

Slide 264 text

264 DEMOを行います。 Validation を実装しよう

Slide 265

Slide 265 text

265 **:** まで各自で作業をしましょう。 わからない事があったら、遠慮なくzoomのチャットに 【質問】をつけてコメントしてください。 それ以外のコメントも大丈夫です!

Slide 266

Slide 266 text

266 2日目終了〜！ Webアプリフレームワーク入門 REST API 入門 研修は終了です！ お疲れ様でした！

Slide 267

Slide 267 text

267 トラブルシューティング

Slide 268

Slide 268 text

268 ハンズオンで接続できない方がいたので、問題切り分けして挑みましょう。 確認 : CUI で ConoHa に ssh 接続できますか？ - できる (VS Code のセットアップの問題かも) - Remote-SSH を一旦アンインストール・インストールしよう - VS Code を一旦アンインストール・インストールしよう - できない (ConoHa のセットアップの問題かも) - 公開鍵をサーバーに登録しよう - 秘密鍵を改めてChromeでダウンロードしよう (原因確率は低) VS Code で Remote-SSH で ConoHa に接続できない

Slide 269

Slide 269 text

269 確認 : CUI で ConoHa に ssh 接続できますか？ VS Code で Remote-SSH で ConoHa に接続できない ssh Conoha .ssh/config の設定は皆できましたね。 Mac の方は Terminal 、 Windows の方は Git Bash で ssh できるか確認しましょう。 実行するコマンド (.ssh/config に登録した Hostname が Conoha の場合) 実行結果 （接続できた場合）

Slide 270

Slide 270 text

270 コマンドを実行して公開鍵を登録します。事前に以下の3つを確認しましょう。 - 秘密鍵のPath (.ssh/config に書いてあるよ) - ConoHaのIP (.ssh/config に書いてあるよ) - ConoHaのrootパスワード 秘密鍵が利用でき、公開鍵を生成できるか確認するコマンド 公開鍵をサーバーに登録しよう VS Code で Remote-SSH で ConoHa に接続できない ssh-keygen -y -f <秘密鍵のPath>

Slide 271

Slide 271 text

271 公開鍵を生成できることを確認したら、ConoHa に登録しましょう。 実行するコマンド 実行したらrootパスワードを聞かれるので、入力してEnterキーを押します。 問題なさそうであれば、再びConoHaにssh接続してみよう 公開鍵をサーバーに登録しよう VS Code で Remote-SSH で ConoHa に接続できない ssh-keygen -y -f <秘密鍵のPath> | ssh root@ 'cat >> .ssh/authorized_keys'