VS Code Meetup 〜Remote Developmentと Dockerで快適Web開発〜

Slide 1

Slide 1 text

Slide 2

Slide 2 text

© SIOS Technology, Inc. All rights Reserved. About me 2 Internal Only BCPVUNF Noriyuki TAKEI ෢Ҫ ٓߦ Information • サイオステクノロジー株式会社 • クラウドネイティブアプリケーション • 千葉県在住 Favorites • Azure • Squash • Sweets blog https://tech-lab.sios.jp/ core skill Azure Kubernetes Service Azure Bot Service

Slide 3

Slide 3 text

Slide 4

Slide 4 text

© SIOS Technology, Inc. All rights Reserved. VS Code Meetup 4 Internal Only リモートサーバー上のコードを直接編集が可能 SSHで接続可能なリモートサーバーやコンテナ、WSL上にあるファイルをVisual Studio Codeから直接編集できる Remote Developmentとは︖ 拡張機能をリモートサーバーにインストールし、リモートサーバー上で動作させることが可能

Slide 5

Slide 5 text

© SIOS Technology, Inc. All rights Reserved. VS Code Meetup 5 Internal Only 開発エンジニア GitHub Jenkins Docker hubなどの Dockerレポジトリ Kubernetes 開発エンジニアがソースをコミットします。 GitHubのwebhookの機能を使って、Jenkinsの特定のURL を叩きます。 Docker使うとCI/CD的にウレシイ

Slide 6

Slide 6 text

© SIOS Technology, Inc. All rights Reserved. VS Code Meetup 6 Internal Only 開発エンジニア GitHub Jenkins Docker hubなどの Dockerレポジトリ Kubernetes Dockerイメージ Docker使うとCI/CD的にウレシイ webhookをトリガーにしてJenkins が起動する。まずはじめに、ソースコードをgit pullします。 Dockerのコマンドで、ビルドしたアプリケーションを含むDockerイメージを作成します。

Slide 7

Slide 7 text

© SIOS Technology, Inc. All rights Reserved. VS Code Meetup 7 Internal Only 開発エンジニア GitHub Jenkins Docker hubなどの Dockerレポジトリ Kubernetes Docker使うとCI/CD的にウレシイ DockerイメージをDockerレポジトリにプッシュします。 webookでステージング環境の特定のURLが叩かれたことをトリガーにして、Dockerリポジトリから Dockerイメージをpullします。

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

© SIOS Technology, Inc. All rights Reserved. VS Code Meetup 13 Internal Only Remote Developmentを可能にする拡張機能をインストールします。左部メニュー最下部にあるアイコン(四⾓が4つ並んでいるもの)をクリックし、「remote development」と⼊⼒し、Remote Developmentの拡張機能をインストールします。

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

© SIOS Technology, Inc. All rights Reserved. VS Code Meetup 17 Internal Only Dockerfile docker-compose.yml html index.php xdebug xdebug.ini .devcontainer devcontainer.json → テスト⽤のスクリプト → xdebugの設定ファイル → コンテナの設定ファイルファイル構成は以下のとおりです。

Slide 18

Slide 18 text

© SIOS Technology, Inc. All rights Reserved. VS Code Meetup 18 Internal Only # Apache上でPHPが動くDockerイメージを取得 FROM php:7.3.8-apache # xdebugの設定をコンテナにコピー ADD xdebug/xdebug.ini /usr/local/etc/php/conf.d/xdebug.ini # xdebugのインストール RUN pecl install xdebug && docker-php-ext-enable xdebug %PDLFSGJMF

Slide 19

Slide 19 text

© SIOS Technology, Inc. All rights Reserved. VS Code Meetup 19 Internal Only version: '3' services: php: build: . ports: - '8080:80ʼ # ローカルのhtmlディレクトリをコンテナの/var/www/htmlにマウント volumes: - ./html:/var/www/html EPDLFSDPNQPTFZNM

Slide 20

Slide 20 text

Slide 21

Slide 21 text

© SIOS Technology, Inc. All rights Reserved. VS Code Meetup 21 Internal Only # リモートデバッグ接続先です。今回はサーバー側にXdebugが動くので、 # 127.0.0.1を指定します。 xdebug.remote_host = 127.0.0.1 # リモートデバッグを⾃動で開始します。 xdebug.remote_autostart = 1 # リモートデバッグを有効にします。 xdebug.remote_enable = 1 # リモートデバッグの接続ポートです。 xdebug.remote_port = 9000 YEFCVHJOJ

Slide 22

Slide 22 text

© SIOS Technology, Inc. All rights Reserved. VS Code Meetup 22 Internal Only { # 任意の名前 "name": "Existing Docker Compose (Extend)", # Remoteでログインしたいコンテナを作成するためのdocker compose "dockerComposeFile": [ "../docker-compose.yml", ], # 先程指定したdocker composeファイル内に定義しているサービスで # 起動したいもの "service": "php", # コンテナに⼊ったときに下記のディレクトリにcdします。 "workspaceFolder": "/var/www/html", # コンテナが⽣成されたときにインストールする拡張機能です。 # これを指定しないと、コンテナが再⽣成すると拡張機能が消えます。 "extensions": ["felixfbecker.php-debug"] } EFWDPOUBJOFSEFWDPOUBJOFSKTPO